Ext学习笔记(3):Button学习Demo

最新推荐文章于 2017-10-17 21:35:12 发布

洛枫偃月

最新推荐文章于 2017-10-17 21:35:12 发布

阅读量768

点赞数

分类专栏： Js/Jquery

本文链接：https://blog.csdn.net/zgs_shmily/article/details/10573611

版权

Js/Jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<html>
<head>
<!-- Ext按钮Demo -->
<script src="js/ext-all.js"></script>
<link href="css/ext-theme-gray-all.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
	Ext.onReady(function() {
		Ext.create('Ext.Button', {
			text : 'Click me',
			arrowAlign : 'right',/*menu显示的按钮位置(bottom/right)  */
			renderTo : Ext.DomQuery.selectNode("div[@id='as']"),
			handler : function() {/* 单击后的处理事件 */
				if (this.clickCount) {
					this.clickCount++;
					// alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
				} else {
					this.clickCount = 1;
					// alert('You just clicked the button for the first time!\n\nTry pressing it again..');
				}
			},
			enableToggle : true,/*点击会改变按钮显示状态（类似于开关）  */
			menu : [/* 单击后展开的菜单 */
			{//按钮菜单
				text : 'Item 1',
				href : 'http://www.baidu.com',
				hrefTarget : '_blank'
			}, {
				text : 'Item 2'
			}, {
				text : 'Item 3'
			}, {
				text : 'Item 4'
			} ],
			listeners : {/*监听触发事件并处理  */
				click : function() {
					// this == the button
					this.setText('I was clicked!');
				},
				mouseover : function() {
					// set a new config which says we moused over, if not already set
					if (!this.mousedOver) {
						this.mousedOver = true;
						// alert('You moused over a button!\n\nI wont do this again.');
					}
				}

			}
		});
		Ext.create('Ext.Button', {
			text : 'Load',
			renderTo : Ext.DomQuery.selectNode("div[@id='load']"),
			menu : [//类型菜单
			{
				xtype : 'textfield',
				fieldLabel : 'Foo'
			}, {
				xtype : 'textfield',
				fieldLabel : 'Bar'
			}, {
				xtype : 'numberfield',
				fieldLabel : 'Num'
			} ]
		});
		Ext.create('Ext.button.Cycle', {//循环菜单
			showText : true,
			prependText : 'View as ',
			renderTo :  Ext.DomQuery.selectNode("div[@id='Cycle']"),
			menu : {
				id : 'view-type-menu',
				items : [ {
					text : 'Java',
					iconCls : 'view-text',
					checked : true
				}, {
					text : 'C#',
					iconCls : 'view-html'
				}, {
					text : 'Object C',
					iconCls : 'view-html'
				}]
			},
			changeHandler : function(cycleBtn, activeItem) {
				Ext.Msg.alert('Change View', activeItem.text);
			}
		});
		
	});
</script>
</head>
<body>
	<div id="as" style="margin-left: 100px;"></div>
	<br>
	<div id="load" style="margin-left: 100px;"></div>
	<br>
	<div id="Cycle" style="margin-left: 100px;"></div>
	
</body>
</html>

洛枫偃月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext学习笔记(3):Button学习Demo

Ext.onReady(function() { Ext.create('Ext.Button', { text : 'Click me', arrowAlign : 'right',/*menu显示的按钮位置(bottom/right) */ renderTo : Ext.DomQuery.selectNode("div[@id='as']"), handler :
复制链接

扫一扫