最终的效果如下图所描述
上述效果的实现过程如下所示
直接上代码
如上图所示，我们点击treePanel触发tabPanel的变化，因此肯定是treePanel中添加了事件响应的代码
没错，就是这个
它的具体代码如下
//鼠标点击treePanel的item，然后触发tabPanel新增tab，所以必须首先获取tabPanel的对象
var tab = Ext.getCmp("centerPanelId");
//判断被点击的treePanel的item的类型，是否为leaf
if (record.get('leaf')) {
//获取treePanel的item的id(也就是菜单的唯一标识)
var id = record.get('id');
var text = record.get('text');
if (Ext.getCmp(id)){
//如果这个tab已经被添加过一次就不再添加第二次
//Ext.Msg.alert("已经有");
tab.setActiveTab(id);
}else{
//如果只是第一次被添加，那就把新的panel添加到tabPanel中去
var newTab = null;
newTab = Ext.create("Ext.panel.Panel",{
id:id,
autoDestroy:true,
title:text,
closable:true
});
var rTab = tab.add(newTab);
tab.setActiveTab(rTab);
}
}我们说的再具体一点，主页面是一个viewport，其中包括左侧一个treepanel右侧一个tabPanel
点击treepanel的leaf后，会触发右侧tabPanel添加相应数据信息的tab
当然，前提是我们事先使用store为viewport主页提供了treePanel的数据。
下面公布所有代码
viewport的代码
Ext.define('MyApp.view.MainVP', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainvp',
requires: [
'Ext.toolbar.Toolbar',
'Ext.tree.Panel',
'Ext.tree.View',
'Ext.tab.Panel',
'Ext.tab.Tab'
],
layout: 'border',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'north',
height: 103,
itemId: 'topPanel',
title: 'PWST服务系统',
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
itemId: 'topToolBar',
items: [
{
xtype: 'button',
itemId: 'agentBTN',
text: '代理店'
},
{
xtype: 'button',
itemId: 'orgBTN',
text: '组织'
}
]
}
]
},
{
xtype: 'treepanel',
region: 'west',
split: false,
frame: true,
id: 'leftAgentTreeId',
itemId: 'leftAgentTree',
width: 180,
collapsed: false,
collapsible: true,
title: '导航栏',
store: 'LeftAgentStore',
viewConfig: {
itemId: 'leftAgentTreeView'
},
listeners: {
itemclick: {
fn: me.agentTreeItemClick,
scope: me
}
}
},
{
xtype: 'treepanel',
region: 'west',
split: false,
frame: true,
hidden: true,
itemId: 'leftOrgTree',
width: 180,
collapsed: false,
collapsible: true,
title: 'PWST组织',
store: 'LeftOrgStore',
viewConfig: {
itemId: 'leftOrgTreeView'
}
},
{
xtype: 'tabpanel',
region: 'center',
id: 'centerPanelId',
itemId: 'centerPanel',
activeTab: 0,
items: [
{
xtype: 'panel',
id: 'tab1id',
itemId: 'tab1',
title: '任务'
}
]
}
]
});
me.callParent(arguments);
},
agentTreeItemClick: function(dataview, record, item, index, e, eOpts) {
/*
var rid = "uselessStr";
rid = record.raw.id;
if (rid.indexOf("agent") != -1){
//包含agent字符串，所以什么也不做
//Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text);
}else{
//不包含agent字符串，所以显示
Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text+" record.raw.leaf:"+record.raw.leaf);
}
// dataview.getItemId()显示treePanel拥有的view的itemid
*/
/*
下面是比较好一点的代码
var bsign = record.raw.leaf;
if(bsign===true){
var n = Ext.getCmp("barneyId").getItemId();
//var n = true;
Ext.Msg.alert("测试leaf","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text+" record.raw.leaf:"+record.raw.leaf+"++"+n);
}
*/
//下面这句很显然写错了因为leftAgentTreeId是treePanel的id，而不是我们应该获取的tabPanel的id
//var tab = Ext.getCmp("leftAgentTreeId");
//鼠标点击treePanel的item，然后触发tabPanel新增tab，所以必须首先获取tabPanel的对象
var tab = Ext.getCmp("centerPanelId");
//判断被点击的treePanel的item的类型，是否为leaf
if (record.get('leaf')) {
//获取treePanel的item的id(也就是菜单的唯一标识)
var id = record.get('id');
var text = record.get('text');
if (Ext.getCmp(id)){
//如果这个tab已经被添加过一次就不再添加第二次
//Ext.Msg.alert("已经有");
tab.setActiveTab(id);
}else{
//如果只是第一次被添加，那就把新的panel添加到tabPanel中去
var newTab = null;
newTab = Ext.create("Ext.panel.Panel",{
id:id,
autoDestroy:true,
title:text,
closable:true
});
//Ext.Msg.alert("Note","没有这个tab ++ ");
var rTab = tab.add(newTab);
//Ext.Msg.alert("Note","rTab.id "+rTab.getId()+" rTab.title "+rTab.title+" tab.id "+tab.getId()+" tab.title "+tab.title);
tab.setActiveTab(rTab);
}
}
}
});然后是store的代码
Ext.define('MyApp.store.LeftAgentStore', {
extend: 'Ext.data.TreeStore',
requires: [
'Ext.data.Field'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'LeftAgentStore',
root: {
text: '代理店',
id: 'agent-root',
expanded: true,
children: [
{
text: '北京代理店',
id: 'agent-bj',
expanded: true,
children: [
{
text: '详细信息',
id: 'detailInfo-bj',
leaf: true
},
{
text: '团队',
id: 'groupInfo-bj',
leaf: true
},
{
text: '文件夹',
id: 'folderInfo-bj',
leaf: true
}
]
},
{
text: '上海代理店',
id: 'agent-sh',
expanded: true,
children: [
{
text: '详细信息',
id: 'detailInfo-sh',
leaf: true
},
{
text: '团队',
id: 'groupInfo-sh',
leaf: true
},
{
text: '文件夹',
id: 'folderInfo-sh',
leaf: true
}
]
}
]
},
fields: [
{
name: 'text'
}
]
}, cfg)]);
}
});下面我们对上述代码进行完善，效果如下图所示：
也就是说，当我们点击不同的treePanel的leaf的时候，在center位置显示不同结构的panel
首先创建不同的view，也就是panel，如下图所示
分别对应显示详细信息、团队、文件夹这三部分信息
那么怎么在viewport中调用这三个panel呢？
也就是在主页面中调用其它页面，加载进来呢？
首先我们刚刚创建的三个panel要先起一个alias也就是别名
这样方便我们在viewport中使用js代码去创建它
然后
我们查看viewport中的代码，毕竟只是前端代码，数据就造假了
var tab = Ext.getCmp("centerPanelId");
//判断被点击的treePanel的item的类型，是否为leaf
if (record.get('leaf')) {
//获取treePanel的item的id(也就是菜单的唯一标识)
var id = record.get('id');
var text = record.get('text');
if (Ext.getCmp(id)){
//如果这个tab已经被添加过一次就不再添加第二次
//Ext.Msg.alert("已经有");
tab.setActiveTab(id);
}else{
//如果只是第一次被添加，那就把新的panel添加到tabPanel中去
var newTab = null;
if(id==="detailInfo-bj"){
newTab = Ext.create("widget.bjdetailpanel");
}else if(id==="groupInfo-bj"){
newTab = Ext.create("widget.bjgrouppanel");
}else if(id==="folderInfo-bj"){
newTab = Ext.create("widget.bjfolderpanel");
}
var rTab = tab.add(newTab);
tab.setActiveTab(rTab);
}我们依据treePanel的item的id进行判断，如果是第一次遇到这个tree叶子的被点击，我们创建对应内容的component
Ext.create("别名");
于是我们将所有代码改变一下
Ext.define('MyApp.view.MainVP', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainvp',
requires: [
'Ext.tree.Panel',
'Ext.tree.View',
'Ext.tab.Panel',
'Ext.tab.Tab',
'Ext.grid.Panel',
'Ext.grid.column.CheckColumn',
'Ext.grid.column.Boolean',
'Ext.grid.column.Date',
'Ext.grid.View',
'Ext.toolbar.Paging'
],
layout: 'border',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'north',
height: 103,
itemId: 'topPanel',
title: 'PWST服务系统',
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
itemId: 'topToolBar',
items: [
{
xtype: 'button',
itemId: 'agentBTN',
text: '代理店'
},
{
xtype: 'button',
itemId: 'orgBTN',
text: '组织'
}
]
}
]
},
{
xtype: 'treepanel',
region: 'west',
split: false,
frame: true,
id: 'leftAgentTreeId',
itemId: 'leftAgentTree',
width: 180,
collapsed: false,
collapsible: true,
title: '导航栏',
store: 'LeftAgentStore',
viewConfig: {
itemId: 'leftAgentTreeView'
},
listeners: {
itemclick: {
fn: me.agentTreeItemClick,
scope: me
}
}
},
{
xtype: 'treepanel',
region: 'west',
split: false,
frame: true,
hidden: true,
itemId: 'leftOrgTree',
width: 180,
collapsed: false,
collapsible: true,
title: 'PWST组织',
store: 'LeftOrgStore',
viewConfig: {
itemId: 'leftOrgTreeView'
}
},
{
xtype: 'tabpanel',
region: 'center',
split: false,
id: 'centerPanelId',
itemId: 'centerPanel',
activeTab: 0,
items: [
{
xtype: 'panel',
id: 'myTaskId',
itemId: 'myTask',
margin: 2,
autoScroll: true,
collapsible: true,
title: '任务',
items: [
{
xtype: 'panel',
frame: true,
height: 826,
margin: '',
width: 1650,
collapsible: true,
title: '我的任务',
items: [
{
xtype: 'gridpanel',
height: 790,
margin: 1,
title: '列表',
store: 'MyTaskStore',
columns: [
{
xtype: 'checkcolumn',
width: 70,
dataIndex: 'checkId',
text: ''
},
{
xtype: 'booleancolumn',
width: 74,
dataIndex: 'bSign',
text: '标识'
},
{
xtype: 'gridcolumn',
dataIndex: 'activityName',
text: '名称'
},
{
xtype: 'gridcolumn',
width: 301,
dataIndex: 'objName',
text: '主题'
},
{
xtype: 'gridcolumn',
dataIndex: 'workflowState',
text: '工作流状态'
},
{
xtype: 'gridcolumn',
dataIndex: 'activityState',
text: '任务状况'
},
{
xtype: 'datecolumn',
height: '',
dataIndex: 'fDate',
text: '日期'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
store: 'MyTaskStore'
}
]
}
]
}
]
}
]
}
]
});
me.callParent(arguments);
},
agentTreeItemClick: function(dataview, record, item, index, e, eOpts) {
/*
var rid = "uselessStr";
rid = record.raw.id;
if (rid.indexOf("agent") != -1){
//包含agent字符串，所以什么也不做
//Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text);
}else{
//不包含agent字符串，所以显示
Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text+" record.raw.leaf:"+record.raw.leaf);
}
// dataview.getItemId()显示treePanel拥有的view的itemid
*/
/*
下面是比较好一点的代码
var bsign = record.raw.leaf;
if(bsign===true){
var n = Ext.getCmp("barneyId").getItemId();
//var n = true;
Ext.Msg.alert("测试leaf","record.raw.id:"+record.raw.id+" record.raw.text:"+record.raw.text+" record.raw.leaf:"+record.raw.leaf+"++"+n);
}
*/
//下面这句很显然写错了因为leftAgentTreeId是treePanel的id，而不是我们应该获取的tabPanel的id
//var tab = Ext.getCmp("leftAgentTreeId");
//鼠标点击treePanel的item，然后触发tabPanel新增tab，所以必须首先获取tabPanel的对象
var tab = Ext.getCmp("centerPanelId");
//判断被点击的treePanel的item的类型，是否为leaf
if (record.get('leaf')) {
//获取treePanel的item的id(也就是菜单的唯一标识)
var id = record.get('id');
var text = record.get('text');
if (Ext.getCmp(id)){
//如果这个tab已经被添加过一次就不再添加第二次
//Ext.Msg.alert("已经有");
tab.setActiveTab(id);
}else{
//如果只是第一次被添加，那就把新的panel添加到tabPanel中去
var newTab = null;
if(id==="detailInfo-bj"){
newTab = Ext.create("widget.bjdetailpanel");
}else if(id==="groupInfo-bj"){
newTab = Ext.create("widget.bjgrouppanel");
}else if(id==="folderInfo-bj"){
newTab = Ext.create("widget.bjfolderpanel");
}
//newTab = Ext.create("widget.agentdetail");
/*
newTab = Ext.create("Ext.panel.Panel",{
id:id,
autoDestroy:true,
title:text,
closable:true
});
*/
//Ext.Msg.alert("Note","没有这个tab ++ ");
var rTab = tab.add(newTab);
//Ext.Msg.alert("Note","rTab.id "+rTab.getId()+" rTab.title "+rTab.title+" tab.id "+tab.getId()+" tab.title "+tab.title);
tab.setActiveTab(rTab);
}
}
}
});第一个tab分页
Ext.define('MyApp.view.BJAgentDetailPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.bjdetailpanel',
requires: [
'Ext.panel.Panel'
],
frame: true,
height: 513,
id: 'detailInfo-bj',
margin: '',
width: 776,
closable: true,
title: '北京代理店详细信息',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
frame: true,
height: 181,
margin: 2,
title: '业务属性'
},
{
xtype: 'panel',
frame: true,
height: 282,
margin: 2,
title: '系统属性'
}
]
});
me.callParent(arguments);
}
});第二个tab分页
Ext.define('MyApp.view.BJFolderPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.bjfolderpanel',
requires: [
'Ext.tree.Panel',
'Ext.tree.View',
'Ext.grid.Panel',
'Ext.grid.column.Number',
'Ext.grid.column.Date',
'Ext.grid.column.Boolean',
'Ext.grid.View'
],
height: 504,
id: 'folderInfo-bj',
margin: 2,
width: 866,
layout: 'border',
closable: true,
title: '北京代理店文件夹',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
margins: '',
region: 'west',
margin: 2,
width: 150,
collapsible: true,
title: '文件夹',
viewConfig: {
}
},
{
xtype: 'gridpanel',
region: 'center',
margin: 2,
title: '文件夹内容',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
]
}
]
});
me.callParent(arguments);
}
});第三个tab分页
Ext.define('MyApp.view.BJGroupPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.bjgrouppanel',
height: 250,
id: 'groupInfo-bj',
width: 400,
closable: true,
title: '北京代理店服务团队',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});然后补充一个题外话，就是viewport中center位置的tab实际上是一个gridPanel
我们添加了一个store为它提供案例数据
store的代码如下
Ext.define('MyApp.store.MyTaskStore', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.Field'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyTaskStore',
data: [
{
checkId: 0,
bSign: false,
activityName: '编制',
objName: '服务流程-FD18100001',
workflowState: '正在工作',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 1,
bSign: true,
activityName: '批准',
objName: '服务流程-FD18100002',
workflowState: '审阅中',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: true,
activityName: '作成',
objName: '服务流程-FD18100003',
workflowState: '已发布',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 1,
bSign: true,
activityName: '编制',
objName: '服务流程-FD18100004',
workflowState: '报价',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: true,
activityName: '问题处理',
objName: '服务流程-FD18100005',
workflowState: '实施',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: false,
activityName: '编制',
objName: '服务流程-FD18100006',
workflowState: '正在工作',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 1,
bSign: true,
activityName: '批准',
objName: '服务流程-FD18100007',
workflowState: '审阅中',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: true,
activityName: '作成',
objName: '服务流程-FD18100008',
workflowState: '已发布',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 1,
bSign: true,
activityName: '编制',
objName: '服务流程-FD18100009',
workflowState: '报价',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: true,
activityName: '问题处理',
objName: '服务流程-FD18100010',
workflowState: '实施',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: false,
activityName: '编制',
objName: '服务流程-FD18100011',
workflowState: '正在工作',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 1,
bSign: true,
activityName: '批准',
objName: '服务流程-FD18100012',
workflowState: '审阅中',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: true,
activityName: '作成',
objName: '服务流程-FD18100013',
workflowState: '已发布',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 1,
bSign: true,
activityName: '编制',
objName: '服务流程-FD18100014',
workflowState: '报价',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: true,
activityName: '问题处理',
objName: '服务流程-FD18100015',
workflowState: '实施',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: false,
activityName: '编制',
objName: '服务流程-FD18100016',
workflowState: '正在工作',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 1,
bSign: true,
activityName: '批准',
objName: '服务流程-FD18100017',
workflowState: '审阅中',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: true,
activityName: '作成',
objName: '服务流程-FD18100018',
workflowState: '已发布',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 1,
bSign: true,
activityName: '编制',
objName: '服务流程-FD18100019',
workflowState: '报价',
activityState: '已完成',
fDate: '10/12/2018'
},
{
checkId: 0,
bSign: true,
activityName: '问题处理',
objName: '服务流程-FD18100020',
workflowState: '实施',
activityState: '已完成',
fDate: '10/12/2018'
}
],
fields: [
{
name: 'checkId'
},
{
name: 'bSign'
},
{
name: 'activityName'
},
{
name: 'objName'
},
{
name: 'workflowState'
},
{
name: 'activityState'
},
{
name: 'fDate'
}
]
}, cfg)]);
}
});