工具条（Ext.Toolbar）

工具条（Ext.Toolbar）
当在工具条中同时出现Menu和Element时，会导致Menu失灵。
1、Ext.Toolbar的常用方法：
addButton()
addElement()
addField()
addFill()
addSeparator()
addText()
add()
2、普通工具条
Js代码 
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);  
}  
});  
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、分组工具条

Js代码

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"
    }); 
}); 
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"
});
});