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 : "<span style='color: white'>确定</span>", handler : Ext.bind(this.Confirm, this) }, { itemId : "cancel", xtype : "button", scale : "medium", text : "<span style='color: white'>取消</span>", handler : Ext.bind(this.Cancel, this) }]

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