extjs button初识

最新推荐文章于 2021-03-17 11:44:02 发布

xiejunna

最新推荐文章于 2021-03-17 11:44:02 发布

阅读量297

点赞数

分类专栏： extjs 文章标签： extjs

本文链接：https://blog.csdn.net/xiejunna/article/details/89404053

版权

extjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

extjs button创建与事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      	<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js"></script>
      	<script>
      		Ext.onReady(function(){
      		//创建方式一：
				Ext.create('Ext.Button', {
				    text: 'Click me',
				    renderTo: Ext.getBody(),
				    handler: function() { //事件监听
				        console.log('You clicked the button!');
				    }
				});
				
				//点击按钮弹出选项组
				Ext.create('Ext.Button', {
				    text      : 'Menu button',
				    renderTo  : Ext.getBody(),
				    arrowAlign: 'bottom',
				    menu      : [
				        {text: 'Item 1'},
				        {text: 'Item 2'},
				        {text: 'Item 3'},
				        {text: 'Item 4'}
				    ]
				});
				
				//分割按钮提供了内置的下拉箭头菜单，可以分别触发按钮不同的单击时事件 一般使用下拉菜单用于提供主按钮之外的附加选项， 并且可以实现不同的单击事件
				Ext.create('Ext.button.Split', {
				    renderTo: Ext.getBody(),
				    text: 'Options',
				    // handle a click on the button itself
				    handler: function() {
				        console.log("The button was clicked");
				    },
				    menu: new Ext.menu.Menu({
				        items: [
				            // these will render as dropdown menu items when the arrow is clicked:
				            {text: 'Item 1', handler: function(){ console.log("Item 1 clicked"); }},
				            {text: 'Item 2', handler: function(){ console.log("Item 2 clicked"); }}
				        ]
				    })
				});
				
				Ext.create('Ext.Button', {
				    text     : 'Button event',
				    renderTo : Ext.getBody(),
				    listeners: { //事件监听
				        click: function() {
				            // this == the button, as we are in the local scope
				            this.setText('I was clicked!');
				            console.log("按钮点击事件");
				        },
				        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.Container', {
					width: 1400,
					height: 900,
				    renderTo: Ext.getBody(),				   
				    items   : [
				        {
				            xtype: 'button', //创建方式二
				            text : 'My Button1',
				            scale   : 'large',//'small'、'medium'、'large'
				            handler:function(){
								console.log("button click event");
							}
				        },
				        {
				            xtype: 'button',
				            text : 'My Button2 event',
				            scale   : 'large',//按钮大小可选值： 'small'、'medium'、'large'
				            listeners: {
						        click: function() {
						            // this == the button, as we are in the local scope
						            this.setText('I was clicked!');
						            console.log("按钮点击事件");
						        },
						        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.');
						            }
						        }
						    }
				        },
				    ]
				});
				
			});
      	</script>
	</head>
	<body>
	</body>
</html>