ExtJS初级UI设计进阶教程(1)-Ext.Button

取自dojochina视频教程PPT

 

 

了解Ext.Button

说明：该组件代替了传统submit,reset,button HTML控件。

构造参数：

 text:按钮上的名称

 属性：

  -text:获得当前按钮上的名称

  -minWidth:按钮的最小宽度

 方法：

  -setText:设置按钮上的名称

 事件：

   -click：当点击按钮时触发

 

 -renderTo:将当前对象所生成的HTML对象存放进指定的对象中

 构造参数：

  -handler:指定一个函数句柄，在默认事件触发时调用，此时的默认时间为click

  -listeners:这个是在对象初始化之前，就将一系列时间进行定义的手段，在进行组件化编程时特别有用

 

  <script type="text/javascript">
		
		Ext.onReady(function(){
			
			var _button = new Ext.Button({
				renderTo:document.body,
				text:"确定",
				minWidth:100,
				handler:function(){
					alert("欢迎学习ExtJS");
				},
				listeners:{
					"click":function(){
						alert("第二种"); //推荐
					}
				}
			});
			_button.setText('取消');
			alert(_button.text);

			_button.on("click",function(){
				alert("第三种");   //传统写法，不推荐
			});
		});

		
  </script>