在extjs窗口中显示嵌套数据4

Question

我有一个模型，一个商店和一个网格（将用商店中的数据填充）。点击网格中的一行，就会打开一个窗口，里面有一个测试箱，一个实验室拥有另一个网格的面板。我的数据是嵌套的，我发现很难将值传递给网格。以下是我的模型，商店和组件。

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

}); 

我试图与映射和Im无法看到面板内的网格中的任何数据。单击第一行时，窗口内的文本框应显示名字（工作正常），并且窗口内的网格应单独显示该特定员工的部门标识和部门名称。首先，我尝试了hasMany和belongsTo，但没有运气。现在我试着用mapping。请帮助....

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

}); 

请注意，您的代码可以被优化了很多，但我把重点放在当前的概率。