我有一个模型，一个商店和一个网格（将用商店中的数据填充）。单击网格中的一行时，它会打开一个窗口，其中包含一个测试框，一个实习生拥有另一个网格的面板。我的数据是嵌套的，我发现很难将值传递给网格。下面是我的模型，商店和组件。
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);
}
}
});
});
我尝试使用映射，我无法在面板内的网格中看到任何数据。单击第一行时，窗口内的文本框应显示firstname（工作正常），窗口内的网格应仅显示该特定员工的部门ID和部门名称。首先，我尝试了hasMany和belongsTo，但没有运气。现在我正在尝试使用mapping。请帮助......
答案 0 :(得分：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);
}
}
});
});
请注意，您的代码可以进行大量优化，但我专注于您当前的概率。