Question

extjs中的工具栏里面可以编写树状动态菜单吗?

如果可以，能不能举个简单的例子。

Answer 1

Ext.onReady(function() {
var userInfoLabel = Ext.create('Ext.form.Label', {
id : 'userInfo',
text : '张三'
});
Ext.apply(Ext.form.VTypes, {
password : function(val, field) {
if (field.confirmTo) {
var pwd = Ext.getCmp(field.confirmTo);
if (val == pwd.getValue())
return true;
return false;
}
}
});
var updatePasswordForm = Ext.create('Ext.form.Panel', {
baseCls : 'x-plain',
layout : 'anchor',
defaults : {
anchor : '100%'
},
autoShow : false,
bodyPadding : 5,
defaultType : 'textfield',
items : [{
fieldLabel : 'code',
labelWidth : 80,
labelAlign : 'right',
name : 'code',
id : 'empId',
readOnly : true,
value : '10008888',
allowBlank : false
}, {
fieldLabel : '姓名',
labelWidth : 80,
labelAlign : 'right',
id : 'empName',
value : '',
allowBlank : false
}, {
fieldLabel : '原始密码',
labelWidth : 80,
labelAlign : 'right',
id : 'olePassword',
inputType : 'password',
allowBlank : false
}, {
fieldLabel : '新密码',
labelWidth : 80,
labelAlign : 'right',
id : 'newPassword',
inputType : 'password',
minLength : 6,
maxLength : 20,
vtype : 'alphanum',
vtypeText : "含非法字符！",
allowBlank : false
}, {
fieldLabel : '重复密码',
labelWidth : 80,
labelAlign : 'right',
id : 'confirmPassword',
inputType : 'password',
minLength : 6,
maxLength : 20,
vtype : 'password',
vtypeText : "两次密码不一致",
confirmTo : 'newPassword',
allowBlank : false
}],
buttons : [{
text : '确认修改',
formBind : true,
handler : function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert("系统信息", "修改密码");
}
}
}]
});
var pwdWindow = Ext.create('Ext.window.Window', {
title : '修改密码',
height : 220,
width : 300,
buttonAlign : 'center',
closeAction : 'hide',
plain : true,
modal : true,
bodyStyle : 'padding: 5px;',
items : updatePasswordForm
});
var chgPwdBtn = Ext.create('Ext.button.Button', {
text : '修改密码',
handler : function() {
pwdWindow.show();
}
});
var logoutBtn = Ext.create('Ext.button.Button', {
text : '退出',
handler : function() {
Ext.Msg.alert("系统信息", "退出系统");
}
});
var topBar = Ext.create('Ext.toolbar.Toolbar', {
dock : 'top',
items : [{
xtype : 'label',
text : 'System',
style : {
fontSize : '18px'
}
}, {
xtype : 'tbfill'
}, userInfoLabel, chgPwdBtn, logoutBtn]
});
Ext.define('Menu', {
extend : 'Ext.data.Model',
fields : [{
name : 'id',
type : 'string'
}, {
name : 'text',
type : 'string'
}, {
name : 'page',
type : 'string'
}]
});
var store = Ext.create('Ext.data.TreeStore', {
model : 'Menu',
root : {
expanded : true,
children : [{
text : '测试菜单AA',
expanded : true,
children : [{
text : '应用管理',
id : 'appManage',
page : '../html/template.html',
leaf : true
}]
}, {
text : '测试菜单BB',
expanded : true,
children : [{
text : '菜单管理',
id : 'pageManage',
page : '../html/template.html',
leaf : true
}, {
text : ' 角色管理',
id : 'roleManage',
page : '../html/template.html',
leaf : true
}]
}]
}
});
var menuTreePanel = Ext.create('Ext.tree.Panel', {
id : 'tree-panel',
title : '菜单',
region : 'west',
collapsible : true,
split : true,
height : 360,
width : 170,
rootVisible : false,
store : store
});
function createPanel(src) {
var panel = Ext.create('Ext.panel.Panel', {
layout : 'fit',
height : '100%',
border : false,
frame : false,
html : "<iframe width=100% height=100% frameborder='no' border='0' marginwidth='0' marginheight='0' src='"
+ src + "'/>"
});
return panel;
}
var contentTabs = Ext.create('Ext.tab.Panel', {
region : 'center'
});
var tabMap = new Ext.util.HashMap();
menuTreePanel.on('itemclick',
function(view, record, item, index, e, eOpts) {
if (record.get('leaf')) {
var id = record.getId();
var text = record.get('text');
var page = record.get('page');
var hasTab = tabMap.get(id);
if (!hasTab) {
var t;
t = contentTabs.add({
id : id,
title : text,
closable : true,
items : [createPanel(page)]
});
t.on('close', function(tab, eps) {
tabMap.removeAtKey(tab.getId());
})
tabMap.add(id, t);
}
contentTabs.setActiveTab(id);
}
});
var bottomBar = Ext.create('Ext.toolbar.Toolbar', {
dock : 'bottom',
border : true,
style : {
// background : '#B1F4FC'
},
//margin : '0 0 5 0',
items : [{
xtype : 'tbfill'
}, {
xtype : 'label',
text : 'COPYRIGHT(c) 2014 ALL RIGHTS RESERVED'
}, {
xtype : 'tbfill'
}]
});
var mainPanel = Ext.create('Ext.panel.Panel', {
region : 'north',
layout : 'border',
width : '100%',
height : '100%',
border : false,
dockedItems : [topBar, bottomBar],
items : [menuTreePanel, contentTabs]
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
style : {
background : '#ECF2FB'
},
//padding : '0 2 0 2',
items : [mainPanel]
});
});

自己写的一个模板，但不是动态的。

追问

能不能详细解释一下每一块的具体含义，初学者，还不太熟悉。如果数据存储在xml中，如何获取到，并且把它编辑到树的节点上呢？

追答

我这不可能一步步教你，起码你自己先研究一段时间，有问题再问倒是可以。