Ext 学习(1)---ExtButtons

 

Ext Buttons

Ext Button经常用到的有Button、SplitButton和CycleButton

• 他们常用的配置属性如下：

• id:元素唯一的标识符
• text:按钮上的文本
• iconCls:设置按钮背景图片的类样式，定义样式时遵从 .x-btn-default-large:的格式
• iconAlign:图标和文本的对齐方式:top left right bottom
• scale:按钮的大小：small(default) medium large,分别对应图片大小(16px 24px 32px)
• disabled:是否灰显按钮:true false
• renderTo:按钮要渲染到的地方，可以是元素id或者DOM元素
• handler:按钮点击事件处理函数
• toggleHandler:当enableToggle被设置为true时的事件处理函数,function(button,state){}

要实现如下的效果：

Ext.onReady(function(){
		var genericConfig = [{
				_name:'Text Only'
			},{
				_name:'Disabled',
				disabled:true
			},{
				_name:'Icon Only',
				iconCls:'add',
				text:null
			},{
				_name:'Icon above Text',
				iconCls:'add',
				iconAlign:'top'
			}];
		menu = {
			items:[{
				text:'Menu Item 1',
				handler:function(){
					alert("you have clicked :" + this.text);
				}
			},{
				text:'Menu Item 2'
			}]
		};
		
		
		var renderButtons = function(title,configs,defaultConfig){
			//创建一个h2标签
			Ext.getBody().createChild({
				tag:'h2',
				html:title
			});
			
			//创建genericConfig.length组元素，每组包括三个button
			Ext.each(configs,function(config){
				//创建三个button
				var generateButtons = function(config){
					Ext.widget(defaultConfig.defaultType || 'button',Ext.apply({
						text:'Small',
						scale:'small'
					},config,defaultConfig));
					Ext.widget(defaultConfig.defaultType || 'button',Ext.apply({
						text:'Medium',
						scale:'medium'
					},config,defaultConfig));
					Ext.widget(defaultConfig.defaultType || 'button',Ext.apply({
						text:'Large',
						scale:'large'
					},config,defaultConfig));
				};
				
				Ext.getBody().createChild({
					tag:'h3',
					html:config._name
				});
				
				var el = Ext.getBody().createChild({});
				generateButtons(Ext.apply(config,{renderTo:el}));
			});
		};
		
		renderButtons("Normal Buttons",genericConfig,{});
		//toggle buttons 
		renderButtons("Toggle Buttons",genericConfig,{enableToggle:true});
		//menu buttons
		renderButtons("Menu Buttons",genericConfig,{enableToggle:true,menu:menu});
		//split buttons
		renderButtons("Split Buttons",genericConfig,{
			enableToggle:true,
			menu:menu,
			defaultType:'splitbutton',
			arrowAlign:'right'
		});
		
	});