2

我有一个模型、一个商店和一个网格（将使用商店中的数据填充）。单击网格中的一行时，它会打开一个窗口，其中有一个测试框，一个面板，其中实习生持有另一个网格。我的数据是嵌套的，我发现很难将值传递给网格。下面是我的模型、商店和组件。

Ext.onReady(function() {

    //Model
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'firstname', type: 'string' },
            { name: 'lastname', type: 'string' },
            { name: 'senority', type: 'int' },
            { name: 'dep', type: 'auto' },
            { name: 'dep_id', type: 'int', mapping: 'dep.dep_id'},
            { name: 'dep_Name', type: 'string', mapping: 'dep.dep_Name'},
            { name: 'hired', type: 'string' }
        ]
    });

    //Store
    Ext.create('Ext.data.Store', {
        model: 'User',
        storeId:'employeeStore',
//      fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
        data:[
            {firstname:"Michael",
                lastname:"Scott", 
                senority:7, 
                dep:[{
                    dep_id: 1000,
                    dep_Name: 'HR'
                }], 
                hired:"01/10/2004"},
            {firstname:"Dwight", 
            lastname:"Schrute", 
            senority:2, 
            dep:[{
                dep_id: 1001,
                dep_Name: 'Sales'
                }], 
            hired:"04/01/2004"}
        ]
    });

    //First grid Panel
    Ext.create('Ext.grid.Panel', {
        title: 'Employee Data',
        id: 'gridID',
        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;
                    Ext.create('MyWindow',{rIx: rowIndex}).show();
                }

            }

        ],

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

    // Window
    Ext.define('MyWindow', {
        extend: 'Ext.window.Window',
        store : Ext.data.StoreManager.lookup('employeeStore'),
        height: 300,
        width: 400,
        title: 'My Window',
        items: [        //testfield
                     {
                        xtype: 'textfield',           
                        id : 'fname',
                        fieldLabel:'Name'
                     },
                     //panel
                     {
                         xtype: 'panel',
                         id: 'wPanel',
                         title: 'Test',
                         height: 400,

                         listeners: {
                             afterrender: function(){//alert("-->");
                                        //grid inside the panel which is in window
                                         var wgrid = Ext.create('Ext.grid.Panel', {
                                        title: 'Employee Data',
                                        id: 'gridID1',
                                        store: Ext.data.StoreManager.lookup('employeeStore'),
                                        columns: [
                                            { text: 'Department ID', 
                                              dataIndex: 'dep_id' 
                                            },
                                            {
                                                text: 'Department Name',
                                                dataIndex: 'dep_Name'

                                            }

                                        ],

                                        width: 300,
                                        height: 250

                                    });
                                  Ext.getCmp('wPanel').add(wgrid);



                                }
                         }
                     }

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

});

我尝试使用映射，但无法在面板内的网格中看到任何数据。单击第一行时，窗口内的文本框应显示名字（工作正常），窗口内的网格应仅显示该特定员工的部门 ID 和部门名称。首先，我尝试使用hasManyand belongsTo，但没有运气。现在我正在尝试使用mapping. 请帮忙....

4

1 回答 1

1

您确实在映射中使用了 hasMany 。

我用你的例子为你做了一个小提琴，我改变了一些东西，它现在可以工作了。http://jsfiddle.net/johanhaest/UehS2/

Ext.onReady(function () {

    //Model
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'firstname',
            type: 'string'
        }, {
            name: 'lastname',
            type: 'string'
        }, {
            name: 'senority',
            type: 'int'
        }, {
            name: 'dep'
        }, {
            name: 'hired',
            type: 'string'
        }]
    });

    Ext.define('Department', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'dep_id',
            type: 'int'
        }, {
            name: 'dep_Name',
            type: 'string'
        }]
    });

    //Store
    Ext.create('Ext.data.Store', {
        model: 'User',
        storeId: 'employeeStore',
        //      fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
        data: [{
            firstname: "Michael",
            lastname: "Scott",
            senority: 7,
            dep: [{
                dep_id: 1000,
                dep_Name: 'HR'
            }],
            hired: "01/10/2004"
        }, {
            firstname: "Dwight",
            lastname: "Schrute",
            senority: 2,
            dep: [{
                dep_id: 1001,
                dep_Name: 'Sales'
            }],
            hired: "04/01/2004"
        }]
    });

    //First grid Panel
    Ext.create('Ext.grid.Panel', {
        title: 'Employee Data',
        id: 'gridID',
        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;
                Ext.create('MyWindow', {
                    rIx: rowIndex
                }).show();
            }

        }

        ],

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

    // Window
    Ext.define('MyWindow', {
        extend: 'Ext.window.Window',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        height: 300,
        width: 400,
        title: 'My Window',
        items: [ //testfield
        {
            xtype: 'textfield',
            id: 'fname',
            fieldLabel: 'Name'
        },
        //panel
        {
            xtype: 'panel',
            id: 'wPanel',
            title: 'Test',
            height: 400,

            listeners: {
                afterrender: function (panel) { //alert("-->");
                    //grid inside the panel which is in window
                    var emplStore = Ext.data.StoreManager.lookup('employeeStore');
                    var win = panel.up('window');
                    var depStore = Ext.create('Ext.data.Store', {
                        model: 'Department',
                        data: emplStore.getAt(win.rIx).get('dep')
                    });
                    var wgrid = Ext.create('Ext.grid.Panel', {
                        title: 'Employee Data',
                        id: 'gridID1',
                        store: depStore,
                        columns: [{
                            text: 'Department ID',
                            dataIndex: 'dep_id'
                        }, {
                            text: 'Department Name',
                            dataIndex: 'dep_Name'

                        }],

                        width: 300,
                        height: 250

                    });
                    Ext.getCmp('wPanel').add(wgrid);
                }
            }
        }

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

});

请注意，您的代码可以进行很多优化，但我专注于您当前的问题。

于 2013-03-15T11:31:26.997 回答