在extjs窗口中显示嵌套数据4
我有一个模型,一个商店和一个网格(将用商店中的数据填充)。点击网格中的一行,就会打开一个窗口,里面有一个测试箱,一个实验室拥有另一个网格的面板。我的数据是嵌套的,我发现很难将值传递给网格。以下是我的模型,商店和组件。在extjs窗口中显示嵌套数据4
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
。请帮助....
您确实在您的映射中使用了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);
}
}
});
});
请注意,您的代码可以被优化了很多,但我把重点放在当前的概率。
嗨Johan Haest,这只是我正在做的一个示例而不是真正的代码。非常感谢,因为这工作正常。你能否澄清一些更多的事情?1)模型没有任何明确的hasMany或belongsTo或映射。这是否意味着这种方法是对这些方法的一种替代方案,或者这也是隐含地使用的方法。 2)我可以从面板的'afterrender listener'中看到你用过'panel.up('window');'。这是用来升级1级,即从面板到窗口,还是将它放到窗口,即使它是2或3级别。 – CARTIC 2013-03-15 12:05:35
1)是的,它是一种替代方法,我personnaly不使用belongsTo或hasMany属性。 2)它可以上升多个层次。所以如果你说你的面板嵌套在几个容器中,它仍然会进入窗口(如果窗口在父链中)。 – 2013-03-15 14:25:27
我必须使用代理和阅读器选项来实现这个...如果是这样,任何人都可以请让我知道如何去做... – CARTIC 2013-03-15 11:31:26