11

ExtJS を使用してデータをグリッドにロードしています。データが完全にグリッドに配置された後、いくつかのプロセスを追加したいと考えています。

私のコンテキストは、データがグリッドに配置された後、すべての行をチェックし、指定された条件に基づいてそれらの一部を無効としてマークし、ツールチップを行に配置します (無効になっている理由を説明します)。Grid の「afterrender」と、Grid の store の「load」の 2 つのイベントを使用しようとしましたが、うまくいきませんでした。

grid's 'afterrender'最初のグリッドの初期化時に発生したため、データのロードには関係ありません。store's 'load'データがプリフェッチされて保存された（画面にレンダリングされない）ときに発生したため、行<div>を無効としてスタイルすることはできません。

では、データがロードされてグリッドに完全にレンダリングされたときに検出するイベントは何ですか? そして、この要件をどのように実装できますか?

4

8 に答える 8

8

試しましたviewreadyか？

Ext.create('Ext.grid.Panel', {
    // ...
    viewConfig: {
        listeners: {
            viewready: function(view) {
                // ...
            }
        }
    }
});
于 2012-06-27T09:21:30.307 に答える
5

ストアのloadイベントを直接利用することも、グリッドを介してイベントを中継することもできます。

グリッド クラス内、おそらくinitComponent関数内に、次のように記述します。

this.relayEvents(this.getStore(), [ 'load' ]);
于 2012-12-17T20:58:53.153 に答える
2

この関数を使用するsetTimeoutと、レンダリングが終了した後に呼び出しが強制的に発生します。これは、私が行ったのと同様のケースで機能しました。

listeners: {
     'afterrender': function(grid) {
          setTimeout(function(){
          // ...
于 2012-08-08T11:45:48.787 に答える
2

グリッドがロードされるまで待つ必要はなくviewConfig、グリッドパネルのオプションを使用して、行を正確に表示する方法を設定する必要があると思います：

viewConfig: {
   getRowClass: function(r) {
      if (r.get('disabled'))
         return 'disabled-class';
      else 
         return '';
   }
}
于 2012-06-27T18:44:07.020 に答える
1

これは古い質問だと思いますが、最近、古い ExtJS (4.0.2) アプリのスクロールの問題を修正する必要があり、html (例: <table> タグ) が実際に更新/挿入されたときのトリガー/イベントが必要でした。グリッドビュー。

次のスクリプトは、新しい「更新」イベントを Ext.grid.View に追加します。update イベントは、html がビューに挿入された後に発生します。

(function(){
    var _setNewTemplate = Ext.grid.View.prototype.setNewTemplate; 
    Ext.override(Ext.grid.View, {
        setNewTemplate: function(){

            _setNewTemplate.apply(this, arguments);

            var view = this;
            var template = this.tpl;
            template.overwrite = function(el, values, returnElement){ 
                el = Ext.getDom(el);
                el.innerHTML = template.applyTemplate(values);
                view.fireEvent("update", view, el); //<--New Event!
                return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
            };

            template.doInsert = function(where, el, values, returnEl) {
                el = Ext.getDom(el);
                var newNode = Ext.core.DomHelper.insertHtml(where, el, template.applyTemplate(values));
                view.fireEvent("update", view, el); //<--New Event!
                return returnEl ? Ext.get(newNode, true) : newNode;
            }

        }
    });
})();

新しいイベントを使用するには、新しいイベント リスナーをグリッド ビューに追加するだけです。例：

paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ...

    //do something...
    console.log(el);

}, this);

これは ExtJS 4.0.2 を使用して実装されていることに注意してください。ExtJS のバージョンに合わせてスクリプトを更新する必要がある場合があります。

アップデート

ビューが空のストアをレンダリングしているときに、新しい「更新」イベントが発生していないことがわかりました。回避策として、ビューの更新方法を拡張しました。

(function(){
    var _refresh = Ext.grid.View.prototype.refresh;
    Ext.override(Ext.grid.View, {
        refresh: function() {
            _refresh.apply(this, arguments);                

            var view = this;
            var el = view.getTargetEl();
            var records = view.store.getRange();

            if (records.length < 1) {                    
                view.fireEvent("update", view, el); //<--New Event!
            }
        }
    });
})();
于 2015-12-02T11:28:44.160 に答える
0

viewready私のために働いた!!!

コントローラーで以下のように構成されています。

Ext.define('App.controller.Dashboard', {
  extend: 'Ext.app.Controller',
  init: function() {
    this.control({
        '#summary-bottom-grid': {
            viewready: function(cmp){
                var link = Ext.DomQuery.selectNode('span.summary-status',cmp.body.dom);
            }
          }
     });    
  }
}
于 2012-12-20T06:23:40.093 に答える
0

getForm().load() の success: プロパティを使用して関数を呼び出し、ロード後の処理を処理します。

于 2012-06-27T09:28:26.563 に答える