ext中 面板怎么加入表格的问题
ext中 面板怎么加入表格的问题
如何在面板中加入表格呢 我只会单一的表格布局 刚学很多问题 还请各位老大赐教！
Ext.onReady(function() {
var productPanel = new Ext.Panel({
title : ' 模块 1 ',
//layout : 'fit',
id:'productPanel',
defaults : {
// applied to each contained panel
bodyStyle : 'padding:0px'
},
layout: {
type: 'accordion',
animate: true
},
items : [{ //就像在这个里面放进一个表格！
title : '水质部分',
html: '<a href="http://www.baidu.com" target="ifrMID">这是一个超链接</a>'
}]
});
var systemconfPanel= new Ext.Panel({
title : ' 模块2 ',
//layout : 'fit',
id:'systemconfPanel',
defaults : {
// applied to each contained panel
bodyStyle : 'padding:0px'
},
layout: {
type: 'accordion',
animate: true
},
items : [{
title : '系统初始化',
html : '<p>这是系统初始化</p>'
}, {
title : '参数配置',
html : '<p>这是参数配置</p>'
}, {
title : '知识管理',
html : '<p>这是知识管理</p>'
}]
});
var viewport = new Ext.Viewport({
layout : 'border',
renderTo : Ext.getBody(),
items : [//viewport的ITEM开始
//北方
{
title : '<marquee width="400px">This is ext</marquee>',
id : "north",
region : 'north',
xtype : 'panel',
spilt : true,
height : 120,
html : '<P align="center"> 哈哈哈系统 </p>'
},
//西方
{
title : '菜单',
region : 'west',
id : 'west', // see Ext.getCmp() below
title : 'West',
width: 200, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 0 0 0',
collapsible: true,
split: true,
layout: 'fit', // specify layout manager for items
items: // 西部的ITEM开始 // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
activeTab : 0,
width : 200,
defaults : {
autoScroll : true
},
items :
[productPanel,
systemconfPanel
]
})//tabPanel结束
//西部ITEM的结束
},
//中间
{
title : '中间',
region : 'center',
xtype : 'panel',
html: '<iframe frameborder="0" marginheight="0" width="100%" height="100%" marginwidth="0" scrolling="auto" name="ifrMID"></iframe>',
spilt : true
}]
//viewport的ITEM结束
});
Ext.get("hideit").on('click', function() {
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});
}); ext
[解决办法]
其实就是gridpanel的定义，楼主最好去看下api+demo
var store= Ext.create('Ext.data.Store', {
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": "home@simpsons.com", "phone": "555-222-1244" },
{ 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var productPanel = new Ext.Panel({
title: ' 模块 1 ',
//layout : 'fit',
id: 'productPanel',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:0px'
},
layout: {
type: 'accordion',
animate: true
},
items: [{
xtype: 'grid',
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
, store: store
}]
});