web-dev-qa-db-ja.com

ExtJSを使用してグリッドが完全にロードされた後のプロセス

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

私のコンテキストでは、データがグリッドに配置された後、すべての行をチェックし、指定された条件に基づいて一部の行を無効としてマークし、ツールチップを行に配置します（無効になっている理由を説明してください）。グリッドの「アフターレンダー」とグリッドのストアの「ロード」の2つのイベントを使用しようとしましたが、機能しませんでした。

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

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

gridviewextjsevent-handlingextjs4
11
Đinh Hồng Châu

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

viewConfig: {
   getRowClass: function(r) {
      if (r.get('disabled'))
         return 'disabled-class';
      else 
         return '';
   }
}
2
sha

viewready を試しましたか？

Ext.create('Ext.grid.Panel', {
    // ...
    viewConfig: {
        listeners: {
            viewready: function(view) {
                // ...
            }
        }
    }
});
8
Vasiliy Faronov

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

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

this.relayEvents(this.getStore(), [ 'load' ]);
5
James McMahon

setTimeout関数を使用すると、レンダリングが終了した後に呼び出しが強制的に発生します。これは、私があなたと同じように機能しました。

listeners: {
     'afterrender': function(grid) {
          setTimeout(function(){
          // ...
2
shleim

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

次のスクリプトは、Ext.grid.Viewに新しい「更新」イベントを追加します。更新イベントは、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);

これはExtJS4.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!
            }
        }
    });
})();
1
Peter

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);
            }
          }
     });    
  }
}
0
Srikanth

GetForm（）。load（）のsuccess：プロパティを使用して、ロード後の処理を処理する関数を呼び出します

0
gunnx

私はextjs4.2.3を使用していますが、これは機能しました。

私はこれを使用しました：

this.grid = Ext.create('Ext.grid.Panel',{
     store: this.ds,
     margins: '0 0 0 10', // top right button left
     title: lng.menu.caption.mailHeaderGrid,
     selType: 'checkboxmodel',
     columns:[...],
     selModel: {
         renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
             var baseCSSPrefix = Ext.baseCSSPrefix;
             metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
             return (record.get('status') =='lng.label.surveyFinalized') ? '' : '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>';
         },
     },

私にとってはクロムに取り組んでいます！

https://www.sencha.com/forum/showthread.php?237641-How-to-hide-certain-checkbox-in-a-CheckboxSelectionModel

0
Gabriel Frías