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'
		});
		
	});