将rowIndex传递给extjs 4中的窗口

Question

我有一个商店、一个网格、一个窗口和窗口中的几个文本框。我需要的是，在单击网格中的 actioncolumn 时，我需要获取单击行的 rowIndex 并将其作为参数传递给窗口。在那里，我需要加载商店并获取值并将其设置在适当的文本框中。我不确定如何在单击时将 rowIndex 从网格传递到窗口。文我尝试在testfunction 中提醒a 的值，它出现为undefined。请帮助，下面是我的代码。

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])
                }
        });

});

Answer 1

Ext.Function.pass(testFunction, [rIx]) 在执行pass 时采用rIx 的当前值。在 rIx 被设置为任何有意义的东西之前很久就调用了该方法。 Javascript 是一种按值传递的语言。最终将 rIx 设置为行索引并不重要。此时 Ext.Function.pass 已经执行完毕，传入的参数未定义。

另一种方法是将 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()
});