Extjs的tabpanel载入grid的方法 5
我有两个文件,一个是main.html,一个是js,附上代码Ext.onReady(function(){vartree=newExt.tree.TreePanel({e...
我有两个文件,一个是main.html,一个是js,附上代码
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree',
autoHeight:true
});
var node= new Ext.tree.TreeNode({text:'活动管理'});
var node2=new Ext.tree.TreeNode({id:'activitymanage',text:'修改活动信息'});
var node3=new Ext.tree.TreeNode({text:'查询活动信息'});
var node4=new Ext.tree.TreeNode({text:'活动审批'});
node.appendChild(node2);
node.appendChild(node3);
node.appendChild(node4);
tree.setRootNode(node);
tree.render();
node.expand(true,true);
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
height:32,
autoEl: {
tag: 'div',
html:'<p><h2>云南消防志愿者管理系统</h2></p>'
}
})
,{
region:'west',
width:'200',
layout: 'accordion',
title:'菜单',
collapsible:true,
margins: '5 0 5 5',
layoutConfig: {
titleCollapse: true,
animate: true,
activeOnTop: false
},
items:[{
title:'活动管理',
items:[tree]
},{
title:'信息管理'
}]
},
new Ext.TabPanel({
id:'tab',
region:'center',
title:'内容',
margins: '5 0 5 5',
deferredRender: false,
items:[{
title:'标题1',
html:'内容1'
},{
title:'标题2',
html:'内容2' ,
closable:true
}]
}),
new Ext.BoxComponent({
region:'south',
autoEl: {
tag: 'div',
html:"<div align='center'><font size='-1'>Copyright @ 2011 云南消费志愿者网 | Designed by Java 求索小组</font></div>"
}
})
]
});
node2.on("click",function(_node,_event){
var index=0;
var tabs = Ext.getCmp("tab");
var act = actInfo.list();
tabs.add({id:'dd',title:'用户管理',closable:true,items:grid});
tabs.setActiveTab(Ext.getCmp("dd"));
});
});
上面是main.html
Ext.ns("actInfo")
actInfo.list=Ext.extend(Ext.grid.GridPanel,{
constructor:function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
store: store,
cm: cm
});
}
});
Ext.reg('list',actInfo.list);
上面是js文件,我是想从点击tree的时候再tabpanel里增加一个标签,标签的内容就是js里面的grid,但是实际过程中,不出错,但是也没效果,请高手看看 展开
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree',
autoHeight:true
});
var node= new Ext.tree.TreeNode({text:'活动管理'});
var node2=new Ext.tree.TreeNode({id:'activitymanage',text:'修改活动信息'});
var node3=new Ext.tree.TreeNode({text:'查询活动信息'});
var node4=new Ext.tree.TreeNode({text:'活动审批'});
node.appendChild(node2);
node.appendChild(node3);
node.appendChild(node4);
tree.setRootNode(node);
tree.render();
node.expand(true,true);
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
height:32,
autoEl: {
tag: 'div',
html:'<p><h2>云南消防志愿者管理系统</h2></p>'
}
})
,{
region:'west',
width:'200',
layout: 'accordion',
title:'菜单',
collapsible:true,
margins: '5 0 5 5',
layoutConfig: {
titleCollapse: true,
animate: true,
activeOnTop: false
},
items:[{
title:'活动管理',
items:[tree]
},{
title:'信息管理'
}]
},
new Ext.TabPanel({
id:'tab',
region:'center',
title:'内容',
margins: '5 0 5 5',
deferredRender: false,
items:[{
title:'标题1',
html:'内容1'
},{
title:'标题2',
html:'内容2' ,
closable:true
}]
}),
new Ext.BoxComponent({
region:'south',
autoEl: {
tag: 'div',
html:"<div align='center'><font size='-1'>Copyright @ 2011 云南消费志愿者网 | Designed by Java 求索小组</font></div>"
}
})
]
});
node2.on("click",function(_node,_event){
var index=0;
var tabs = Ext.getCmp("tab");
var act = actInfo.list();
tabs.add({id:'dd',title:'用户管理',closable:true,items:grid});
tabs.setActiveTab(Ext.getCmp("dd"));
});
});
上面是main.html
Ext.ns("actInfo")
actInfo.list=Ext.extend(Ext.grid.GridPanel,{
constructor:function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
store: store,
cm: cm
});
}
});
Ext.reg('list',actInfo.list);
上面是js文件,我是想从点击tree的时候再tabpanel里增加一个标签,标签的内容就是js里面的grid,但是实际过程中,不出错,但是也没效果,请高手看看 展开
1个回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询