ExtJS UI 之 Ext.Button

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

 

构造参数：

--text：按钮上显示的文字

属性：

--text：获得当前按钮上的文字

--minWidth：按钮的最小宽度

方法：

--setText：设置按钮上的名称

事件：

--click：当点击按钮时触发

 

示例，在body对象中添加一个按钮：

Ext.onReady(function(){
	new Ext.Button({
		renderTo:Ext.getBody(),
		text:"确定"
	});
});

这里的Ext.getBody()跟document.body是不相同的，前者是Ext对象，后者是DOM对象，需要把Ext对象进行转换后才相等，参考如下等式所列：

document.body == Ext.getBody().dom

 

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

 

为按钮定义事件，默认为点击事件：

Ext.onReady(function(){
	new Ext.Button({
		renderTo:Ext.getBody(),
		text:"确定",
		handler:function(){
			alert("欢迎你学习ExtJS");
		}
	});
});

也可以按如下方法指定具体事件：

Ext.onReady(function(){
	new Ext.Button({
		renderTo:Ext.getBody(),
		text:"确定",
		listeners:{
			"click":function(){
				alert("欢迎你学习ExtJS");
			}
		}
	});
});

Ext.onReady(function(){
	var _btn = new Ext.Button({
		renderTo:Ext.getBody(),
		text:"确定"
	});
	_btn.on("click",function(){
		alert("欢迎学习ExtJs");
	});
});