1

extjsデザイナー1.2で作業しています。クリックするとウィンドウを開くパネル上のボタンがあります。ウィンドウには、jsファイルで次のようにレンダラーを適用したグリッドがあります。問題は、ウィンドウを初めて開いたときにレンダラーがうまく機能することですが、ウィンドウを閉じて再度開くと、効果が消えます。

Ext.define('MyApp.view.TestWindow', {
    extend: 'MyApp.view.ui.TestWindow',

initComponent: function() {
    var me = this;
    me.callParent(arguments);

}

 });

================================================== ======================== 

Ext.define('MyApp.view.TestPanel', {
    extend: 'MyApp.view.ui.TestPanel',

initComponent: function() {
    var me = this;
    me.callParent(arguments);
    Ext.data.StoreManager.lookup('Test').load();
    me.down('button[id=testbutton]').on('click',me.onTestBtnClick,me); 
},

onTestBtnClick:  function(){

    var win = new Ext.create('MyApp.view.TestWindow');
    win.show();
    win.down('#testgrid').columns[0].renderer=function(val){
         return '<span style="color:red;">' + val + '</span>';
        }

}
});

観察： ui.jsでレンダラーを使用する場合、つまりデザイナーからプロジェクトをエクスポートすることによって生成されたファイルを使用する場合、上記の問題に直面することはありません。この問題の解決策は何ですか？

4

1 に答える 1

1

（Ext JS 4 default）の代わりに（あなたの場合）closeActionのconfigオプションがに設定されているために発生する同様の問題を解決しました。図解されたボタンクリックイベントハンドラーは、起動されるたびに新しい（あなたの場合）をインスタンス化します。これらのインスタンスが適切に作成および破棄されない場合、DOMの競合や望ましくない結果が発生する可能性があります。Ext.Window MyApp.view.TestWindowhidedestroy Ext.Window MyApp.view.TestWindowID

現在の構成オプションの状態に関係なく、そのようなインスタンスを永続化することが目標である場合は、インスタンス化ロジックをグローバルスコープに再配置し、ボタンクリックイベントでこのコンポーネントのshowingとingのみを管理することです。hideハンドラ。

基盤となるロジックを提供していないためMyApp.view.TestWindow、問題の根本的な原因は、構成オプションの構成ミスやコンポーネントインスタンス管理の組み合わせに関係しており、最終的にはコンポーネントが同じDOMを競合することになりますID。

注意すべきもう1つのことは、静的に定義された構成idオプションの使用です。コンポーネントに構成オプションを静的に定義する場合はid、それらのコンポーネントがシングルトンであるか、再利用のためにグローバルスコープで割り当てられたインスタンスであることを確認する必要があります。繰り返しますが、これはすべて適切なコンポーネント管理に要約されます。

最後に、私の提案を使用しても、あなたに固有の明白な問題が明らかにならない可能性もありますMyApp.view.TestWindow。MyApp.view.TestWindowこの場合は、基になる子コンポーネント（グリッド、列モデル、列など）が原因ではないことを確認してください。

編集

以下に例を示します。

Ext.define('MyApp.view.TestPanel', {
    extend: 'MyApp.view.ui.TestPanel',

initComponent: function() {
    var me = this;
    me.callParent(arguments);
    Ext.data.StoreManager.lookup('Test').load();
    me.down('button[id=testbutton]').on('click',me.onTestBtnClick,me);

    me.testWindow = new Ext.create('MyApp.view.TestWindow');
    me.testWindow.down('#testgrid').columns[0].renderer=function(val){
        return '<span style="color:red;">' + val + '</span>';
    }
},

onTestBtnClick:  function(){
    var me = this;
    me.testWindow.show();
}
});
于 2011-09-22T06:44:03.127 に答える