Ext.Toolbar

当在工具条中同时出现Menu和Element时，会导致Menu失灵。



1、Ext.Toolbar的常用方法：
addButton()
addElement()
addField()
addFill()
addSeparator()
addText()
add()



2、普通工具条

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
Ext.QuickTips.init();

var currnetItem = null;

//菜单工具条
var fileMenu = new Ext.menu.Menu({
shadow: "sides",
items: [
{text:"新建", menu:[
{text:"Word文档", handler:onMenuItem},
{text:"Excel文档"},
{text:"文本文件"}
]},
{text:"打开", handler:onMenuItem},
"-",
{text:"关闭", handler:onMenuItem}
]
});

var editMenu = new Ext.menu.Menu({
items: [
{text:"剪切", handler:onMenuItem},
{text:"复制", handler:onMenuItem},
{text:"粘贴", handler:onMenuItem}
]
});

var themeMenu = new Ext.menu.Menu({
items: [
{id:"default", text:"默认", checked:true, group:"theme", checkHandler:onItemCheck},
{id:"red", text:"红色", checked:false, group:"theme", checkHandler:onItemCheck},
{id:"green", text:"绿色", checked:false, group:"theme", checkHandler:onItemCheck},
{id:"gray", text:"灰色", checked:false, group:"theme", checkHandler:onItemCheck},
"-",
{text:"禁用", checked:false, checkHandler:onCheckboxItem}
]
});

var scrollMenu = new Ext.menu.Menu({
maxHeight: 200,
showSeparator: false
});
for (var i = 0; i < 50; ++i){
scrollMenu.add({
text: 'Item ' + (i + 1)
});
}

var t3 = new Ext.Toolbar({
items:[
{text:"文件", menu:fileMenu},
{text:"编辑", menu:editMenu},
{text:"主题", menu:themeMenu},
"-",
{id:"add", text:"新建", iconCls:"add", enableToggle:true, toggleHandler:onToggleHandler},
{id:"save", text:"保存", iconCls:"save", handler:onToolbarButton},
{id:"delete", text:"删除", iconCls:"delete", handler:onToolbarButton},
{icon:"../images/toolbar/help.gif", tooltip:"帮助文档"},
{xtype:"splitbutton", text:"滚动菜单", menu:scrollMenu},
"-",
{xtype:"textfield", width:100},
"->",
{
text:"enabled",
handler: function(){
if(currnetItem!=null && currnetItem.enable){
currnetItem.setDisabled(false);
currnetItem = null;
alert(currnetItem);
}
}
},
"-",
"工具条"
]
});

new Ext.Panel({
title: "普通工具条",
renderTo: "div1",
frame: true,
width: 700,
tbar: t3,
bodyStyle: "background-color:#FFFFFF; height:50; padding:3px;",
html: "当在工具条中同时出现Menu和Element时，会导致Menu失灵。"
});

//单击工具条上的按钮时触发该函数
function onToolbarButton(btn){
alert(btn.id);
}

//单击菜单项时触发该函数
function onMenuItem(item){
alert(item.text);
//item.setDisabled(true);
//currnetItem = item;
}

//checked的值变化时触发该函数
function onItemCheck(item, checked){
if(checked) alert(item.text);
}

function onCheckboxItem(item){
themeMenu.get("default").setDisabled(item.checked);
themeMenu.get("red").setDisabled(item.checked);
themeMenu.get("green").setDisabled(item.checked);
themeMenu.get("gray").setDisabled(item.checked);
}

function onToggleHandler(item, pressed){
alert(pressed);
}
});
3、分组工具条

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";

//菜单工具条
var fileMenu = new Ext.menu.Menu({
shadow: "sides",
items: [{text:"新建"}, {text:"打开"}, "-", {text:"关闭"}]
});

var editMenu = new Ext.menu.Menu({
items: [{text:"剪切", iconCls:"cut"}, {text:"复制", iconCls:"copy"}, {text:"粘贴", iconCls:"paste"}]
});

var g1 = {
xtype: "buttongroup",
title: "菜单",
columns: 3,
defaults: {
scale: "small", //small, medium, large
iconAlign: "top"
},
items: [
{xtype:"splitbutton", text:"文件", menu:fileMenu, iconCls:"add", rowspan:1, arrowAlign:"bottom"},
{xtype:"splitbutton", text:"编辑", menu:editMenu, iconCls:"save", rowspan:1, arrowAlign:"bottom"},
{text:"查看", iconCls:"search", scale: "large"}
]
};

var g2 = {
xtype: "buttongroup",
title: "返回",
columns: 1,
defaults: {
scale: "large",
iconAlign: "top"
},
items: {text:"返回", iconCls:"back"}
};

var g3 = {
xtype: "buttongroup",
title: "剪贴板",
defaults: {
scale: "large",
iconAlign: "top"
},
items: [
{text:"剪切", iconCls:"cut"},
{text:"复制", iconCls:"copy"},
{text:"粘贴", iconCls:"paste"}
]
};

var g4 = {
xtype: "buttongroup",
title: "帮助",
defaults: {
scale: "small"
},
height: 80,
items: [
{xtype:"splitbutton", text: "帮助", iconCls:"help"}
]
};

var panel = new Ext.Panel({
title: "分组工具条",
renderTo: "div1",
frame: true,
width: 600,
height: 300,
autoScroll: true,
tbar: [g1, g3, g2, g4],
bodyStyle: "background-color:#FFFFFF; padding:3px;",
autoLoad: "messagebox.action"
});
});