Ext Button的使用

2019独角兽企业重金招聘Python工程师标准>>>

ext的button的简单用法：

/**
			 * BUTTON
			 */
			var myButton=new Ext.Button({
				renderTo:Ext.getBody(),
				text:"我的按钮",
				allowDepress:false,
				arrowAlign:"left",
				enableToggle:false,
				repeat:false,
				pressed:false,
				iconAlign:"left",
				scale:"medium",
				tooltip:"按钮提示",
				tooltipType:"title",
				clickEvent: "mousedown",
				handler:function(){
					Ext.Msg.alert(123);
				}
			});

效果如图显示：

再复杂一些的例子和属性参考这里

http://www.cnblogs.com/linpengfeixgu/articles/1298739.html

button的属性可以参考这个

http://wjt276.iteye.com/blog/466633

另外button绑定事件的方法可以参考这个

http://maidini.blog.163.com/blog/static/377627042008111061844345/

一下是button的一些高级用法

/**
			 * 有菜单的按钮
			 */
			function onItemCheck(item){
			        Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));
			    }
			var menu = new Ext.menu.Menu({
			    id: 'mainMenu',
			    items: [
			        {
			            text: 'menu1',
			            handler: onItemCheck
			        },
			        {
			            text: 'menu2',
			            handler: onItemCheck
			        }]
			});
			var button=new Ext.Button({
			    renderTo:Ext.getBody(),
			    text:'按我',
			    menu:'mainMenu'
			});
			//有状态的探钮
			var button2=new Ext.Button({
			    renderTo:Ext.getBody(),
			    text:'toggle button ',
			    enableToggle:true
			});
			//分组的有状态按钮
			var button3 =new Ext.Button({
			    renderTo:Ext.getBody(),
			    text:'toggle button 1',
			    enableToggle:true,
			    toggleGroup:'toggleGroup',
			    handler: onItemCheck
			});
			var button4 =new Ext.Button({
			    renderTo:Ext.getBody(),
			    text:'toggle button 2',
			    enableToggle:true,
			    toggleGroup:'toggleGroup',
			    handler: onItemCheck
			});
			/**
			 * spitButton
			 */
			function onItemCheck(item){
				Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));
			}
			function showMenu(obj){
				Ext.MessageBox.alert("点击下拉",obj.getXTypes() )
			}
			Ext.QuickTips.init();
			var buttonSpitButton=new Ext.SplitButton({
			    renderTo:Ext.getBody(),
			    arrowHandler : showMenu,
			    arrowTooltip : "更多",
			    handler: onItemCheck,
			    text:'按我',
			    menu:'mainMenu'
			});
			/**
			 * cycleButton
			 */
			var buttonCyleButton=new Ext.CycleButton({
			    renderTo:Ext.getBody(),
			    showText: true,
			    prependText: 'View as ',
			    items: [{
			        text:'text only',
			        iconCls:'view-text',
			        checked:true
			    },{
			        text:'HTML',
			        iconCls:'view-html'
			    },{
			        text:'XML',
			        iconCls:'view-html'
			    }
			    ],
			    changeHandler:function(btn, item){
			        Ext.MessageBox.alert('Change View', item.text);
			    }
			});

总结一下，button是EXT中比较简单的一个组件，主要是熟悉他的属性，方法，另外知道有menu的button，splitbutton及cyclebutton。

转载于:https://my.oschina.net/zimingforever/blog/64843