工具条（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"
	});
});

 

 

评论

1 楼 widecase2012 2013-07-22  

themeMenu.get("default"),我用这个方法的时候怎么提示没有该方法