进入页面默认画面，如下图
点击组织按钮，左侧树形菜单被改变，如下图
再次点击代理店按钮，再次发生变化，如下图
实现的结构如下：
实现的代码如下：
ViewPort代码
Ext.define('MyApp.view.MainVP', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainvp',
requires: [
'Ext.toolbar.Toolbar',
'Ext.button.Button',
'Ext.tree.Panel',
'Ext.tree.View'
],
layout: 'border',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'north',
height: 115,
itemId: 'topPanel',
title: '网站工具栏',
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
itemId: 'topToolBar',
items: [
{
xtype: 'button',
itemId: 'agentBTN',
text: '代理店'
},
{
xtype: 'button',
itemId: 'orgBTN',
text: '组织'
}
]
}
]
},
{
xtype: 'treepanel',
region: 'west',
itemId: 'leftTreeMenu',
width: 150,
title: '导航栏',
store: 'LeftAgentStore',
viewConfig: {
}
},
{
xtype: 'treepanel',
region: 'west',
hidden: true,
itemId: 'leftOrgMenu',
width: 150,
title: '英格拉姆',
store: 'LeftOrgStore',
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});预计被另一个菜单按钮点击所弹出的window页面，这里并没有调用只是把代码罗列出来
Ext.define('MyApp.view.addNewCar', {
extend: 'Ext.window.Window',
alias: 'widget.addnewcar',
requires: [
'Ext.form.field.Text',
'Ext.panel.Panel'
],
height: 610,
itemId: 'newCar',
width: 628,
title: '新增车型',
modal: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
fieldLabel: '产品',
emptyText: 'JSB_TESTLIB'
},
{
xtype: 'panel',
frame: true,
resizable: true,
collapsible: true,
title: '属性'
}
]
});
me.callParent(arguments);
}
});第一棵树的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: '产品',
expanded: true,
children: [
{
text: 'Honda',
expanded: true,
children: [
{
text: '雅阁',
leaf: true
},
{
text: '思域',
leaf: true
}
]
},
{
text: 'Benz',
expanded: true,
children: [
{
text: 'S系列',
leaf: true
},
{
text: 'C系列',
leaf: true
}
]
}
]
},
fields: [
{
name: 'text'
}
]
}, cfg)]);
}
});第二颗树的store
Ext.define('MyApp.store.LeftOrgStore', {
extend: 'Ext.data.TreeStore',
requires: [
'Ext.data.Field'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'LeftOrgStore',
root: {
text: '组织',
expanded: true,
children: [
{
text: '用户',
leaf: true
},
{
text: '角色',
leaf: true
},
{
text: '实用程序',
leaf: true
}
]
},
fields: [
{
name: 'text'
}
]
}, cfg)]);
}
});controller
Ext.define('MyApp.controller.TopController', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'leftTreeMenuRef',
selector: 'mainvp #leftTreeMenu'
},
{
ref: 'leftOrgMenuRef',
selector: 'mainvp #leftOrgMenu'
}
],
agentBTNFunction: function(target) {
//var carabc = Ext.create("widget.addnewcar");
//carabc.show();
var leftAgent = this.getLeftTreeMenuRef(),
leftOrg = this.getLeftOrgMenuRef();
leftAgent.show();
leftOrg.hide();
},
orgBTNFunction: function(target) {
var leftAgent = this.getLeftTreeMenuRef(),
leftOrg = this.getLeftOrgMenuRef();
leftAgent.hide();
leftOrg.show();
},
init: function(application) {
this.control({
"mainvp #agentBTN": {
click: this.agentBTNFunction
},
"mainvp #orgBTN": {
click: this.orgBTNFunction
}
});
}
});
结束
