LearningExtJS_new 之 ToolBar 类学习(二)

Ext.onReady(function(){
	//1.tbbutton,普通的按扭,可以增加icon属性
	//2.tbbutton 和 menu 选项会增加下接列表框,也可以用一个组和checked的boolean值来处理选择
	//3.tbsplit 也增加下拉列表框,同menu相同 只是点下接标识才显示下拉表
	//4.工具栏中的对齐 xtype=tbfill,分隔 tbseparator,和空格 tbspacer 
	//还可以用add方法增加快捷键方式,每个字符代码的类型不同如"->"代表tbfill,"-"代表tbseparator
	//5.增加icon属性增加按扭的图片.可以直接用cls:x-btn-text-icon 增加这个样式使图片居左
	//6.给按扭增加事件,可是是传递参数的和不传递参数的
	//还可以给菜单按扭增加不同的事件,可以直接定义类处理
	//7.在工个栏上存放Form的类型组件 如textfield
	//8.工具栏在window grid panel 等 地方的使用,分为tbar,bbar


	var firstToolBar = new Ext.Toolbar({
						renderTo:document.body,
						items:[{
//									xtype:"tbbutton",
									text:"按扭",
									handler:function(){
													Ext.MessageBox.alert("标题","你点击了我!");
											}
								},{
									xtype:"tbfill"

								},{
									xtype:"tbbutton",
									text:"菜单按扭->",
									menu:[{
												text:"选项一",
												checked:true,
												group:"option"
											},{
												text:"选项二",
												checked:false,
												group:"option"
											},{
												text:"选项三",
												checked:false,
												group:"option"
											}
									]
								},{
									xtype:"tbseparator"
								},{
									xtype:"tbspacer"
								},{
									xtype:"tbfill",
									text:"separator"
								},{
									xtype:"tbsplit",
									text:"分隔按扭",
									menu:[{
												text:"分隔一"
											},{
												text:"分隔二"
											},{
												text:"分隔三"
											}
									]
								},{
									cls:"x-btn-text-icon",
									icon:"../pubjs/ext/resources/images/vista/basic-dialog/close.gif",
									text:"图片按扭",
									handler:function(f){
										f.disable();
									}
								},{
									xtype:"tbsplit",
									text:"电影信息",
									menu:[{
												text:"类型",
												helpfile:"genre",
												handler:moveHandler.loadHelpfile
											},{
												text:"导演",
												helpfile:"director",
												handler:moveHandler.loadHelpfile
											},{
												text:"片名",
												helpfile:"name",
												handler:moveHandler.loadHelpfile
											}
									]
								},{
									xtype:"textfield",
									fieldLabel:"输入影片信息",
									listeners:{
										specialKey:moveHandler.showText
									}
								}
							]
					});
	//使用快捷键
	firstToolBar.add("-");




});

var moveHandler = function(){
	return {
		loadHelpfile:function(menuBtn){
//			var divHelpfile = Ext.get("divHelpfile");
//			if(!divHelpfile){
//				divHelpfile = Ext.DomHelper.append(Ext.getBody(),{
//														tag:"div",
//														id:"divHelpfile"
//													});
//			};
//			
//			moveHandler.loadText(menuBtn.helpfile);

			//显示一个窗口
			new Ext.Window({
				title:"帮助",
				id:"helpWin",
				width:300,
				height:300,
				tbar:[{
							text:"关闭",
							handler:function(f){
								Ext.getCmp("helpWin").close();
							}
						},{
							text:"失效",
							handler:function(f){
								f.disable();
							}
						}	
				],
				autoLoad:"./html/" + menuBtn.helpfile + ".txt"
			}).show();
		},
		showText:function(frm,event){
			if(event.getKey() == event.ENTER){
				moveHandler.loadText(frm.getValue());
			}
		},
		loadText:function(helpfile){
			Ext.get("divHelpfile").load({
										url:"./html/" + helpfile + ".txt"
									});
		}
	}
}();