0

ストア、グリッド、ウィンドウ、およびウィンドウ内のいくつかのテキスト ボックスがあります。私が必要としているのは、グリッド内の actioncolumn をクリックすると、クリックされた行の rowIndex を取得し、それをパラメーターとしてウィンドウに渡す必要があるということです。そこで、ストアをロードして値を取得し、適切なテキスト ボックスに設定する必要があります。クリック時にグリッドからウィンドウにrowIndexを渡す方法がわかりません。の値を警告しようとするとa、 のtestfunctionように表示されundefinedます。Plsは助けて、以下は私のコードです。

Js ファイル:

Ext.onReady(function() {
    var rIx;
    Ext.create('Ext.data.Store', {
        storeId:'employeeStore',
        fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
        data:[
            {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
            {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
            {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
            {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
            {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}
        ]
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Employee Data',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [
            { text: 'First Name',  dataIndex: 'firstname' },
            {
                header: 'Button',
                xtype: 'actioncolumn',
                icon : 'test.png',
                handler: function(grid, rowIndex, colIndex, item, e , record) {
                    rIx=rowIndex;
                    //var rec = grid.getStore().getAt(rowIndex);
                    //alert("Edit " + rec.get('firstname'));
                    Ext.create('MyWindow').show();
                }
            }

        ],

        width: 500,
        renderTo: Ext.getBody()
    });

    var testFunction = function(a){alert("a= "+a);

         var r = Ext.data.StoreManager.lookup('employeeStore').getAt(a);
         var firstname = r.get('firstname');
         Ext.getCmp('fname').setValue(firstname);   
     };

    Ext.define('MyWindow', {
        extend: 'Ext.window.Window',
        store : Ext.data.StoreManager.lookup('employeeStore'),
        height: 250,
        width: 250,
        title: 'My Window',
        items: [
                     {
                        xtype: 'textfield',           
                        id : 'fname',
                        fieldLabel:'Name'
                     }

                 ],
        listeners: {
                      afterrender: Ext.Function.pass(testFunction, [rIx])
                }
        });

});
4

1 に答える 1

0

Ext.Function.pass(testFunction, [rIx])rIxwhen passが実行されたときの現在の値を取ります。メソッドは、rIx意味のあるものに設定されるずっと前に呼び出されています。Javascript は値渡し言語です。最終的に rIx が行インデックスに設定されることは問題ではありません。その時点で Ext.Function.pass はすでに実行されており、渡されたパラメーターは未定義でした。

もう 1 つの方法は、rowIndex をプロパティとしてウィンドウにプッシュすることです。

Ext.create('Ext.grid.Panel', {
    title: 'Employee Data',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { text: 'First Name',  dataIndex: 'firstname' },
        {
            header: 'Button',
            xtype: 'actioncolumn',
            icon : 'test.png',
            handler: function(grid, rowIndex, colIndex, item, e , record) {
                Ext.create('MyWindow', {rIx: rowIndex}).show();
            }
        }

    ],
    width: 500,
    renderTo: Ext.getBody()
});

Ext.define('MyWindow', {
    extend: 'Ext.window.Window',
    store : Ext.data.StoreManager.lookup('employeeStore'),
    height: 250,
    width: 250,
    title: 'My Window',
    items: [
        {
            xtype: 'textfield',           
            id : 'fname',
            fieldLabel:'Name'
        }
    ],
    listeners: {
        afterrender: function(win){
            alert("idx= " + win.rIx);
            var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
            var firstname = r.get('firstname');
            Ext.getCmp('fname').setValue(firstname);   
        }
    }
});

afterrender別のオプションは、ウィンドウのクラス定義に追加する代わりに、ハンドラー関数でウィンドウのリスナーをセットアップすることです。私の意見では、このアプローチは少しクリーンです。関係のない状態プロパティをコンポーネントに追加することはあまり好きではありません。

Ext.create('Ext.grid.Panel', {
    title: 'Employee Data',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { text: 'First Name',  dataIndex: 'firstname' },
        {
            header: 'Button',
            xtype: 'actioncolumn',
            icon : 'test.png',
            handler: function(grid, rowIndex, colIndex, item, e , record) {
                var win = Ext.create('MyWindow');
                // add the listener after to avoid bashing any listener config
                // that may already exist for the window.
                win.on('afterrender', function() {
                    // rowIndex is available in the closure
                    alert("idx= " + rowIndex);
                    var r = Ext.data.StoreManager.lookup('employeeStore').getAt(rowIndex);
                    var firstname = r.get('firstname');
                    Ext.getCmp('fname').setValue(firstname);
                });
                win.show();
            }
        }

    ],
    width: 500,
    renderTo: Ext.getBody()
});
于 2013-03-13T12:29:31.090 に答える