[ExtJS2.1教程-5]ToolBar(工具栏)

[b]面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext中工具栏是由Ext.Toolbar类来表示。工具栏上可以放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具，可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。[/b]

这里工具栏主要用于面板中（panel，window等）
这里我们使用toolbar.js toolbar.html来进行演示

下面我们演示一下在window中应用工具栏
我们先创建一个window

Ext.onReady(function(){
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体"
	});
	win.show();
});

[img]/upload/attachment/73376/c0faff89-0dfd-3f35-910b-8ec5b4da398a.bmp[/img]
我们可以看到右上角有一个关闭按钮 那其实就是一个头部工具栏按钮
window中有一个tools的配置选项，他的作用就是定义这个头部的工具栏，他接收的是一个数组
数组中的元素包含id，handle等一系列属性，其中id的值是通过Ext事先定义的一系列中选择填入的，handler是对应的响应事件。handler可以传递三个参数 Event，toolEl，panel

Ext.onReady(function(){
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体",
		tools:[{
			id:"toggle"
		},{
			id:"close"
		},{
			id:"help"
		}]
	});
	win.show();
});

[img]/upload/attachment/73378/549de86d-ed89-3815-9640-c5aa66e9156e.bmp[/img]
这里还有一些属性比如qtip，on这里的on很特殊，可以是我们自定义的一些事件 比如鼠标移入等等具体可以参见addListener
这里需要说明的是在使用qtip之前需要调用Ext的qtip初始化方法

Ext.onReady(function(){
	Ext.QuickTips.init();
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体",
		tools:[{
			id:"toggle",
			handler:function(e,t,p){

				},
			qtip:"hello"
		},{
			id:"close"
		},{
			id:"help"
		}]
	});
	win.show();
});

[img]/upload/attachment/73380/647c467a-5059-3942-bb39-642e0161b3ba.bmp[/img]
tbar属性是顶部工具栏，可以有数组和object
我们先来看看ToolBar类，ToolBar的构造方法可以通过object或者数组类型的配置选项进行创建

Ext.onReady(function(){
	Ext.QuickTips.init();
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体",
		tools:[{
			id:"toggle",
			handler:function(e,t,p){

				},
			qtip:"hello"
		},{
			id:"close"
		},{
			id:"help"
		}],
		tbar:new Ext.Toolbar({
			width:200,
			height:50
		})
	});
	win.show();
});

[img]/upload/attachment/73383/45debb64-8309-354b-917a-9b2462a83101.bmp[/img]

我们看到这里面得工具栏 不过我们并没有添加工具，下面我们向里面添加一些工具项。
这里我们通过add方法进行添加

Ext.onReady(function(){
	Ext.QuickTips.init();
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体",
		tools:[{
			id:"toggle",
			handler:function(e,t,p){

				},
			qtip:"hello"
		},{
			id:"close"
		},{
			id:"help"
		}],
		tbar:new Ext.Toolbar({
			width:200,
			height:50
		})
	});
	win.show();
	win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"))
});

由于只是文本item所以没有什么按钮效果
[img]/upload/attachment/73385/240dbb13-e1c4-3006-a8a5-11cd0a364ffd.bmp[/img]
我们再来加几个

Ext.onReady(function(){
	Ext.QuickTips.init();
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体",
		tools:[{
			id:"toggle",
			handler:function(e,t,p){

				},
			qtip:"hello"
		},{
			id:"close"
		},{
			id:"help"
		}],
		tbar:new Ext.Toolbar({
			width:200,
			height:50
		})
	});
	win.show();
	win.getTopToolbar().add(new Ext.Toolbar.Fill());
	win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
	win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));

});

[img]/upload/attachment/73387/0019522a-c083-3ee9-84c7-90c0413a5016.bmp[/img]
这里Fill很有意思 通过他我们可以实现对齐方式

Ext.onReady(function(){
	Ext.QuickTips.init();
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体",
		tools:[{
			id:"toggle",
			handler:function(e,t,p){

				},
			qtip:"hello"
		},{
			id:"close"
		},{
			id:"help"
		}],
		tbar:new Ext.Toolbar({
			width:200,
			height:50
		})
	});
	win.show();
	win.getTopToolbar().add(new Ext.Toolbar.Fill());
	win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
	win.getTopToolbar().add(new Ext.Toolbar.Spacer());
	win.getTopToolbar().add(new Ext.Toolbar.Separator());
	win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
	win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));

});

Spacer是空格 Separator是分隔符 add方法可以是多个参数
[img]/upload/attachment/73391/40b41144-b88d-3400-af69-03ebe14145a1.bmp[/img]
当然也可以通过配置选项的方式 不适用new

win.getTopToolbar().add(new Ext.Toolbar.Fill());
win.getTopToolbar().add({xtype:"tbfill"});

上面的两句是等效的
一般我们是不会指定toolbar的宽高，他会自适应
默认toolbar的参数是button

		tbar:new Ext.Toolbar({
			//width:200,
			//height:50
		})
	});
	win.show();
	win.getTopToolbar().add({text:"defButton"});
	win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
	win.getTopToolbar().add(new Ext.Toolbar.Spacer());
	win.getTopToolbar().add(new Ext.Toolbar.Separator());
	win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
	win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));

[img]/upload/attachment/73393/3f9ad07d-76ea-31c2-b832-87dfd44ad047.bmp[/img]
这里的Ext.ToolBar.Button中有一个pressed : Boolean
表示是否显示已按下状态
这里还有一个SplitButton 我们在里面可以看到他有一个menu的配置选项，他可以给我们呈现出下拉菜单按钮

win.getTopToolbar().add({text:"defButton",pressed:true});
	win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
	win.getTopToolbar().add(new Ext.Toolbar.Spacer());
	win.getTopToolbar().add(new Ext.Toolbar.Separator());
	win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
	win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));

	var menu = new Ext.menu.Menu({
		items:[{
			text:"first"
		},"-",{
			text:"second"
		}]
	})
	win.getTopToolbar().add(new Ext.Toolbar.SplitButton({
		text:"splitbutton",
		menu:menu
	}));

[img]/upload/attachment/73399/4cfbedbc-793b-3173-9b1c-33a8a1ba5828.bmp[/img]

这里需要注意win.getTopToolbar()必须写在win.show()方法之后，因为必须先进行渲染才能取得一些他的一些东西
当然也可以通过window中的tbar：【】进行添加toolbar中的相关信息

Ext.onReady(function(){
	Ext.QuickTips.init();
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体",
		tools:[{
			id:"toggle",
			handler:function(e,t,p){

				},
			qtip:"hello"
		},{
			id:"close"
		},{
			id:"help"
		}],
		tbar:[new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]
	});
	win.show();
});

与tbar对应的还有一个bbar只不过位置是在底部，使用上面还是一样的

Ext.onReady(function(){
	Ext.QuickTips.init();
	var win = new Ext.Window({
		width:400,
		height:300,
		title:"窗体",
		tools:[{
			id:"toggle",
			handler:function(e,t,p){

				},
			qtip:"hello"
		},{
			id:"close"
		},{
			id:"help"
		}],
		tbar:new Ext.Toolbar({
			//width:200,
			//height:50
		}),
		bbar:[new Ext.Toolbar.Button({text:"bitem"})]
	});
	win.show();

[img]/upload/attachment/73401/78222eb9-37b8-3e14-935e-7c7ff17b6d24.bmp[/img]