도구 모음(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 file Menu = 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: "button group", 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: "보기", "Clicons:"scalerge"var g2 = {xtype: "button group", title: "되돌아오기",columns: 1,defaults: {scale: "large",iconAlign: "top"},items: {text: "되돌아오기",iconCls: "back"};var g3 = {xtype: "button group", title: "클립보드",defaults: {scale: "large", iconAlign: "top"},items: [{text: "잘라내기", iconCls: "cut"}, {text: "복사", iconCls: "copy"}, {text: "붙여넣기", iconCls: "paste"}];var g4 = {xtype: "button group", 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:#FFFFFFFF;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: "button group", 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: "보기", "Clicons:"scalle}"var g2 = {xtype: "button group", title: "되돌아오기",columns: 1,defaults: {scale: "large",iconAlign: "top"},items: {text: "되돌아오기",iconCls: "back"};var g3 = {xtype:'button group', title:'클립보드', defaults: {scale:'large', iconAlign:'top'}, items: [{text:'잘라내기', iconCls:'cut'}, {text:'복제', iconCls:'copy'}, {text:'붙여넣기', iconCls:'paste'}];var g4 = {xtype: "button group", 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:#FFFFFFFF;padding:3px,",autoLoad: "messagebox.action" }); });