Ext学习之6_组件_Button

Ext.namespace("com.deng");
/**
 * 按钮
 * 按钮控件使用Ext.Button来表示，有三种类型：提交(submit)、重置(reset)和普通按钮(button)
 */
/**
 * 按照OOP的习惯，我们会这样定义
 */
/**
Ext.onReady(function(){
	var btn = new Ext.Button();
	btn.setText("确定");
	btn.type = "submit";
	btn.setHandler(function(){
		Ext.Msg.alert("按钮","按钮测试，效果真好");
	});
	btn.render(Ext.getBody());//将按钮放在(渲染/呈现)什么位置
});
*/
/**
 * Extjs更推崇下面的做法，完全通过配置来实现
 * 构建Button时，传递一个json对象，renderTo是一个经常被使用到的属性，用于指定当前组件渲染在什么位置，
 * 一般作为指定对象的子节点，本例中的Ext.getBody()方法返回document.body对象，所以btn按钮是body的子节点
 * 对应的方法是render()。而handler属性则对应setHandler()方法，用来定义按钮被单击之后的处理函数
 */
Ext.onReady(function(){
	var btn = new Ext.Button({
		renderTo: Ext.getBody(),
		text:"确定",
	    type: "submit",
	    handler: function(){
	    	Ext.Msg.alert("按钮","按钮测试，效果真好");
	    }
	    
	});
});
/**
 * 第2种方法更常见
 * 在Ext.Button的源码中，发现有这样一句话,Ext.reg('button',Ext.Button),第一个参数
 * "button"是控件的xtype属性值，简单来说是Ext.Button类的另外一个名字，很多场合，通过xtype
 * 可以简化属性的配置
 * 下面的另外一些配置能增强按钮的效果
 * pressed: true    使按妞处于按下状态
 * disabled:true    使按妞禁用按下状态
 * minWidth:100     设置按钮的最小宽度
 * icon: "../imgs/133.gif"  设置按钮的背景图片，属性值是图片名称
 * iconCls: "bk"     同上，属性值是类选择器的名称 
 */