Ext 学习(1)---ExtButtons

最新推荐文章于 2022-12-06 18:04:01 发布

原创最新推荐文章于 2022-12-06 18:04:01 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #button #menu #function #html #null

ExtJs4学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍ExtJS中常用按钮组件Button、SplitButton及CycleButton的配置属性，并通过示例展示不同配置下按钮的表现形式，包括文本、图标、禁用状态及不同尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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