1

EXTJS 4 データビューを使用していますが、各データ ノードの html 要素 (リンク) にリスナーを追加すると、一貫性のない結果が得られます。データビューに関連付けられているストアのロード リスナーにコードを配置しました。最初のロードでは機能しているように見えますが、いくつかの要素が欠落し始めると、後続のロードが悪化します。store.reload() を呼び出すたびに悪化します。

HTML要素IDが適切にレンダリングされていることをfirebugで確認しましたが、何らかの理由でストアをリロードすると、最初にいくつかの要素が欠落し始め、次にすべての要素が欠落し始めます。以下のロード リスナーのコード:

listeners: {
            load: function(store, records, successful, options){
                    var nodes = records;
                    for (i=0, len = nodes.length; i < len;i++){
                        var id = nodes[i].data.id;
                        var addtocartel = Ext.get('img-cart-'+id);
                        var viewel = Ext.get('img-view-'+id);
                        //Setting hidden class for nonimage items
                        switch (nodes[i].data.type) {

                            case 'image' :
                            viewel.addCls('imgprf');
                            addtocartel.addCls('cartprf');
                            break;

                            default :
                            viewel.addCls('sc_hidden');
                            addtocartel.addCls('sc_hidden');
                            viewel.hide();
                            addtocartel.hide();
                            break;
                        }

                        if(addtocartel !== null){
                            addtocartel.itemid = id;
                            addtocartel.on('click', function(e,t){
                              var el = Ext.get(t);
                              var imgrec = imagestore.getById(el.itemid);
                              e.stopEvent(); 
                              prfproductwindow.show();
                            });
                        }
                        if(viewel !== null){
                            viewel.itemid = id;
                            viewel.on('click', function(e,t){
                                var el = Ext.get(t);
                                var imgrec = imagestore.getById(el.itemid);
                            });
                        }
                    }
            }
        }
4

1 に答える 1

0

グリッド ビューの更新は、負荷が発生することなく発生します。グリッド ビューが更新されると、既存の html 要素が消去されて新しい要素が作成されるため、それらの要素にアタッチしたリスナーは役に立たなくなります。

クリック リスナーをグリッド全体に追加し、デリゲートを使用してビュー内の特定の html 要素のクリックをリッスンすることを検討する必要があります。これにより、ビュー内の要素が何度再レンダリングされても常に機能する単一のリスナーを一度追加できます。

grid.getView().getEl().on('click', function(evt, target) {
    console.log('clicked on ' + target);
}, {delegate: '.my-css-selector-for-some-element'});

クリック ハンドラーは、デリゲート セレクターに一致する要素のクリックに対してのみ起動されます。

また、レコードのタイプに基づいて css クラスを追加するロジックは、レンダラー (グリッドがある場合) で実行するか、データ ビューのテンプレートで処理する必要があります。

于 2013-07-02T04:17:41.377 に答える