Question

我在窗口中有一个商店，一个网格，一个窗口和几个文本框。我需要的是，在单击网格中的动作列时，我需要获取所单击行的rowIndex并将其作为参数传递给窗口。在那里，我需要加载商店并获取值并将其设置在适当的文本框中。我不确定如何在点击时将rowIndex从网格传递到窗口。我试着提醒a中testfunction的值，它出现为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])时，

rIx获取当前值pass。在将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()
});

将rowIndex传递给extjs 4中的窗口

1 个答案: