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>