[英]Ext JS 5 - add grid panel to viewport
I'm looking for a way to add a grid panel to my viewport, I tried to use the add() function but this didn't work for me. 我正在寻找一种方法来向我的视口添加网格面板,我尝试使用add()函数,但这对我不起作用。
Ext.application({ name : 'MyApp', Ext.application({name:'MyApp',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margin: '0 0 5 0'
}, {
region: 'west',
title: 'Navigation',
width: 250,
collapsible: false,
items : {
// I want to add it just there
xtype : 'gridPanel'
}
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'test test',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'test Tab',
html: ''
}
}]
});
}
}); });
thx in advance, 提前thx,
You just need to finsih your code and use the correct config & xtype. 您只需要finsih您的代码并使用正确的config&xtype。
I have copied your code and created a grid in this fiddle without any issues, code is also below in case the link breaks. 我已经复制了你的代码并在这个小提琴中创建了一个没有任何问题的网格,如果链接断开,代码也在下面。
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com"
, "phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margin: '0 0 5 0'
}, {
region: 'west',
title: 'Navigation',
width: 250,
collapsible: false,
items: {
// I want to add it just there
xtype: 'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
rowdblclick: function(grid, record, tr, rowIndex, e, eOpts) {
alert(record.get("name"));
}
},
height: 200,
width: 400,
}
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'test test',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'test Tab',
html: ''
}
}]
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.