Ext 几种按钮样式效果

最近在使用Ext按钮样式的风格，发现其提供了几种按钮样式的写法，显示效果也会有一定的差别，下面记录下来，方便之后的查看。

1、创建按钮 – button

Ext 可以直接创建单个的按钮对象，设置按钮的名称，大小，宽度等属性，属性的参数直接写在大括号中即可。

var confirm = Ext.create("Ext.Button", {
	text : "确定",
	width : 60,
	bodyStyle : "padding-bottom: 60px;",
	margin : 5,
	handler : Ext.bind(me.Confirm, me)
});

handler 绑定按钮的事件，点击调用的js方法。按钮的样式如下图所示。字体与边框的间隔适中，看着比较美观。

2、创建按钮 – toolbar

定义一个Toolbar，将其放到 dockedItems 中可以在border布局的上方显示横条的工具条。多个按钮的信息，写在 items 属性中，如符号：’->’ 表示靠右对齐，cls 属性可以引用css定义的样式效果。

var toolbar = Ext.create("Ext.Toolbar", {
	border : true,
	items : ['->',{
		text : "确定",
		cls : "myself-toolbarbtn",
		handler : Ext.bind(this.Confirm, this)
	},{
		text : "取消",
		cls : "myself-toolbarbtn",
		handler : Ext.bind(this.Cancel, this)
	}]
});
// 将工具栏放入布局
this.dockedItems = [toolbar2];

如果想将其放到下方的工具条，可以使用 this.bbar 来，类型样式使用container

// 将工具栏放入布局
this.bbar = {
	xtype: 'container',
	margin : "5 10 5 10",
	items : [toolbar]
};

按钮在页面的下方显示，按钮的效果如下图所示。

注意：用bbar来显示按钮，自动会在按钮上方显示一条横线。

3、创建按钮 – buttons

如果想创建按钮的集合，要怎么做呢，可以用到 this.buttons 来设置按钮的属性

this.buttons = [{
	itemId : "Confirm",
	xtype : "button",
	scale : "medium",
	text : "确定",
	handler : Ext.bind(this.Confirm, this)
}, {
	itemId : "cancel",
	xtype : "button",
	scale : "medium",
	text : "取消",
	handler : Ext.bind(this.Cancel, this)
}]

scale 属性可以设置为 large、medium等，调整按钮的大小，对text 也可以添加样式，改变字体的颜色。