Buttons and Toolbars

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cexo425/article/details/52448274

在本章，你将学习到如何创建buttons和toolbars, 以及如何处理事件，使用户可以跟Ext JS UI进行交互

Event-driven development

在我们学习组件之前，我们需要明白背后的event和listeners是如何工作的。首先你要学习什么是观察者模式(observable pattern).

简单来讲，观察者模式是允许实体或者对像，彼此使用事件进行通信。当某个行为发生在一个对像或者组件上，这个对像应该广播这个事件给它的监听者。

举例来说，当一个button被点击后，它触发一个click事件。当grid的一行被点击，grid触发itemclick事件。所有的组件都定义了事件，它们在一个行为出现时触发。

触发事件的组件并不知道谁监听了它的消息，它的职责只是让别人知道发生了什么。然后，其它组件才做出相应的处理，或者什么也不做

Ext.util.Obserable，这个基础类允许我们从一个指定的对像或者组件中，添加，触发，监听事件。并且当事件发生时，执行相应的行为。

Ext JS library中的所有widget 都混合了Ext.util.Observable类，因此所有的widgets，都可以触发和监听事件

通过Ext.util.Observable, 我们可以在自定义组件上，定义和 触发一个新的事件。如下所示

Ext.define('Myapp.sample.Employee',{
    mixins: {observable: 'Ext.util.Observable'},
    Code.....
    constructor: function( config ){
        Code.....
        this.mixins.observable.constructor.call( this, config );
    },
    quitJob: function(){
        this.fireEvent('quit', this.getName(), new Date(), 2,
            1, 'more params...' );
    }
});

在上面的代码中，Employee类包含了mixin -Ext.util.Observable类。因此，在constructor函数中，可以通过this.mixins.observable.constructor.call(this, config)进行初始化。这就意味着，Ext.util.Observable将能够注意在employee类中任何时候发生的任何事件。

了解更多mixins，可以查看http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Mixin

当quitJob函数被调用时，它将触发一个quit事件，并且传递this.getName(), new Date, 2, 1, ‘more params’参数.

在之前的Ext JS版本中，我们通过addEvent（…)方法创建或者定义这个类的事件。如果你从版本4升级过来，你需要注意这个改变。Version 5 具有更好的灵活性。

现在我们需要监听’quit’事件。在Ext JS 中，我们有一个 listeners属性，它就是用于这个目的(listen/handle events).

var patricia = Ext.create('Myapp.sample.Employee', {
   name:'Patricia',
   lastName:'Diaz',
   age:21,
   isOld:false,
   listeners:{
       'quit':function(EmployeeName, quitDate, param, paramb, paramc){
           console.log('Event quit launched');
           console.log('Employee:' + EmployeeName);
           console.log('Date:'+ Ext.util.Format.date(
                           quitDate,'Y-m-d H:i'));
           console.log('Param :' + param);
           console.log('Param B:' + paramb);
           console.log('Param C:' + paramc);
       }
   }
});
console.log(Myapp.CompanyConstants.welcomeEmployee(patricia));
    patricia.quitJob();
});

另一个常用的方法是使用on方法来监听事件，它是addListener 缩写

patricia.on({
    'quit':function(EmployeeName, quitDate, param, paramb, paramc){
        console.log('Event quit launched');
        console.log('Employee:' + EmployeeName);
        console.log('Date:' + Ext.util.Format.date(quitDate,
        'Y-m-d H:i'));
        console.log('Param :' + param);
        console.log('Param B:' + paramb);
        console.log('Param C:' + paramc);
    }
});
patricia.quitJob();

非常重要的一点是监听器要在期望执行的方法之前添加. 在我们上面的例子中，Employee类在调用quitJob方法时，只负责广播事件。这个类自己不关心谁监听了quit事件。但在这个类之外，定义了一个对像，它监听了这个事件。

在Ext JS中可以添加，触发，监听自定义事件是它非常强大的一个特性

Creating a simple button

现在你基本知道如何处理事件，现在我们开始使用component和widgets. 我们从button开始讲起。为了创建按纽，我们将需要使用Ext.button.Button类。让我们创建第一个button.

var myButton = Ext.create('Ext.button.Button', {
    text:'My first button',
    tooltip:'Click me...!',
    renderTo:Ext.getBody()
});

在这段代码中，我们创建了一个Button类的实例，并且传递了一些配置给它。通常一个button有许多的配置。
text属性用于设置button渲染在document时，显示的文本(DOM).
renderTo属性允许我们设置按钮在DOM中渲染的位置

默认情况下，button有一个scale属性的值为small. 我们可以将它设置为medium和large. scale属性使得我们可以定义按钮的大小。

var myButton = Ext.create('Ext.button.Button', {
    text:'My first small button',
    scale:'small',
    renderTo:Ext.getBody()
});
var myButtonB = Ext.create('Ext.button.Button', {
    text:'My first medium button',
    scale:'medium',
    renderTo:Ext.getBody()
});
var myButtonC = Ext.create('Ext.button.Button', {
    text:'My first large button',
    scale:'large',
    renderTo:Ext.getBody()
});

Setting icons on buttons

我们在应用程序中经常看到，使用不同的icons来区分按纽。为了设置icon(images)，我们将使用iconCls属性来设置css样式，它将以背景的形式，添加图片。在上面的代码中，我们讨论过scale属性，它分别对应以下的icon size

Scale	Size
Small	16 x 16 pixels
Medium	24 x 24 pixels
Large	32 x 32 pixels

接下来，我们在html中创建以下css样式

.addicon-16{
    background:transparent url('images/add_16x16.png') center 0
    no-repeat !important;
}
.addicon-24{
    background:transparent url('images/add_24x24.png') center 0
    no-repeat !important;
}
.addicon-32{
    background:transparent url('images/add_32x32.png') center 0
    no-repeat !important;
}

JS代码

var myButton = Ext.create('Ext.button.Button', {
    text:'My first small button',
    iconCls:'addicon-16',
    scale:'small',
    renderTo:Ext.getBody()
});
var myButtonB = Ext.create('Ext.button.Button', {
    text:'My first medium button',
    iconCls:'addicon-24',
    scale:'medium',
    renderTo:Ext.getBody()
});
var myButtonC = Ext.create('Ext.button.Button',{
    text:'My first large button',
    iconCls:'addicon-32',
    scale:'large',
    renderTo:Ext.getBody()
});

Icon alignment on buttons

默认情况下, icon是左边对齐的。但我们可以设置它的位置为top, buttom, 和右侧对齐。如下所示

var myButtonA = Ext.create('Ext.button.Button',{
    text:'left icon',
    iconCls:'addicon-16',
    iconAlign:'left',
    renderTo:Ext.getBody()
});
var myButtonB = Ext.create('Ext.button.Button',{
    text:'top icon',
    iconCls:'addicon-16',
    iconAlign:'top',
    renderTo:Ext.getBody()
});
var myButtonC = Ext.create('Ext.button.Button',{
    text:'right icon',
    iconCls:'addicon-16',
    iconAlign:'right',
    renderTo:Ext.getBody()
});
var myButtonD = Ext.create('Ext.button.Button',{
    text:'bottom icon',
    iconCls:'addicon-16',
    iconAlign:'bottom',
    renderTo:Ext.getBody()
});

Handling button events

创建完一个按钮后，我们想要在点击时，添加一些行为。在以后的章节中，我们将看到如何在MVVM模式中，监听事件。对于现在，我们可以直接监听 button上的事件。

Button通过mixin使用了Observable类，我们可以使用addListener方法监听事件

每一个组件有许多已经定义好的事件。你可以查看document了解定义了哪些事件，事件何时触发的描述，以及监听器会接受到的参数。在这里，Button类包含了一个click event, 它在button被点击时触发。我们可以使用on（addListener方法的简写)来监听事件.

myButtonA.on('click', function(){
    Ext.Msg.alert("Click event", "You clicked left icon button..!");
});

我们还有更多的事件可以监听，比如show,hide,enable, disable等等，更多的事件名称，可以参考Ext JS文档

我们可以为相同的事件，定义任意多的监听器，当事件触发时，所有的监听器都将被执行.

Segmented buttons

在Ext JS 5添加了一个 segemented buttons. 可以对组件进行分组。实际上，它是一个特殊的容器，包含多个按钮。为此，我们需要使用Ext.button.Segmented类，它的用法跟任何其它container的使用类似。

var mySegmentedbuttons = Ext.create('Ext.button.Segmented',{
    renderTo:'segmentedbuttons',
    vertical:false,
    items:[{
        xtype: 'button', text:'1st button', iconCls:'addicon-16'
    },{
        text:'2nd button', iconCls:'addicon-16'
    },{
        text:'3th button', iconCls:'addicon-16'
    },{
        text:'4th button', iconCls:'addicon-16'
    }]
});

你会注意到，上图中的第二行按钮是以segmented button容器的形式渲染的，它比第一行看起来更美观，对比于第一行的按钮，第二行的按钮只有第一个和最后一个带圆角。

我们也可以设置vertical为true, 效果如下

默认情况下，Ext.button.Segmented类将它每一个项(item)视为一个按钮。在上面的代码中，我们设置为第一个按钮设置了xtype属性，其它三个按钮则没有这个属性。Ext JS依然将每一个项作为button进行配置。

Adding menus

我们可以为button添加menu履性，创建菜单，使用户可以选择不同的选项。

var myButton = Ext.create('Ext.button.Button',{
    text:'Add payment method...',
    iconCls:'addicon-32',
    iconAlign:'left',
    scale:'large',
    renderTo:'normalbuttons',
    menu:[
        {text:'Master Card'},
        {text:'Visa'},
        {text:'PayPal'},
        {text:'Other...'}
    ]
});

在上面的代码中, menu属性接收一个对像数组。这个数组用于创建Ext.menu.Menu类的实例。Ext.menu.Menu类负责管理和显示菜单。

在上面的代码中，我们是直接使用对像常量创建我们的菜单。如果你想使用构告函数，而不是直接量(literals), 我们应该创建Ext.menu.Menu和Ext.menu.Item的实例，如下所示

//Step 1
var menuItemA = Ext.create('Ext.menu.Item',{text:'Master card'});
//Step 2
var menu = Ext.create('Ext.menu.Menu',{
    items : [ //Step 3
        menuItemA, // Variable
        Ext.create('Ext.menu.Item',{text:'Visa'}), // constructor
        {text:'Paypal'} //object config
    ]
});
var myButton = Ext.create('Ext.button.Button',{
    text:'Add payment method...',
    iconCls:'addicon-32',
    iconAlign:'left',
    scale:'large',
    renderTo:'normalbuttons',
    menu:menu
});

当我们创建完menu, 我们将它赋值给button的menu属性。当这个按钮创建时，它会发现menu属性不是一个数组，而是一个Menu类的实例。

接下来，我们可以为每一个菜单项添加监听器，查看Ext.menu.Item类的文档，我们可以知道，它有一个click 事件, 在这里我们有很多的方法来添加监听器.

var myButton = Ext.create('Ext.button.Button',{
    text:'Add payment method...',
    iconCls:'addicon-32',
    iconAlign:'left',
    scale:'large',
    renderTo:'normalbuttons',
    menu:[{
        text:'Master Card',
        listeners:{ // Option 1
            click:function(){
                Ext.Msg.alert("Click event", "You selected Master Card..!");
            }
        }
    },{
        text:'Visa', //Option 2
        handler: onMenuItemClick
    },{
        text:'PayPal',
        listeners:{ //Option 3
            'click':{fn: onMenuItemClick , single:true}
        }
    },{
        text:'Other...',
        handler: onMenuItemClick
    }]
});
function onMenuItemClick (itemBtn, Event){
    var optionString = itemBtn.text;
    Ext.Msg.alert("Click event","You selected " + optionString +
            " ..!");
}

1. Option 1, 我们添加了一个listeners属性
2. Option 2, 我们使用hander属性，这个属性将click event绑定到onMenuItemClick
3. Option 3, 我们在次使用listeners属性，但对于click event.我们传递了一个配置对像，它有两个属性:fn 和 single。fn属性用于指定处理函数。single用于指定处理函数只执行一次，在第一次执行完后，Ext JS将删除这个处理函数

Toolbars

我们已经学习了基础的button和menus后，接下来可以学习下一个组件，toolbar. 工具栏在我们的应用程序中非常普遍，它用来访问应用程序的modules, windows等等。toolbar组件实际上是一个容器，可以按照我们需要的方法排列我们的按钮。

从Ext JS 4开始，我们可以在容器的任一方向(north, south, east and west)上定义toolbar. 也可以在container的每边上都定义一个toolbar.

接下来我们创建一个简单的例子，toolbar位于panel的top位置。

var myPanel = Ext.create( 'Ext.panel.Panel' ,{
    title: 'My first toolbar...',
    width: 450,
    height: 200,
    dockedItems: [{ //Step 1
        xtype : 'toolbar',
        dock: 'top', //Step 2
        items: [
            {text: 'New record'},
            {text: 'Edit record'},
            {text: 'Remove record'}
        ]
    }],
    renderTo:Ext.getBody()
});

1. 在第一步，我们定义了dockedItems属性。在这个属性里，我们可以定义一个组件数组。任何的组件可以固定（placed) or 停靠(docked) 在panel的四个边上(left, top, right, button).
2. 在第二步，我们定义了toolbar在哪停靠(docked). 在这里，它的值为top. 如果dock属性没有定义，默认为top.

docked items通常为toolbars, 但我们也可以定义其它组件，比如grids, panels, 和forms. 在toolbar属性中的items数组中，默认的组件为button. 这也是为什么我们没有明确设置xtype的原因。

我们也可以添加其它的组件到toolbar, 比如textfield, combo box, 和 radiobutton

接下来，我们添加更多带图标的按纽

items:[
    {text:'New', iconCls:'addicon-16'},
    {text:'Edit', iconCls:'editicon-16'},
    {text:'Remove', iconCls:'deleteicon-16'},
    {text:'Export', iconCls:'export-16'},
    {text:'Print', iconCls:'print-16'},
    {text:'Help', iconCls:'help-16'}
]

css

.addicon-16{ background:transparent url('../images/add_16x16.png')
center 0 no-repeat !important; }
.deleteicon-16{ background:transparent url('../images/delete.png')
center 0 no-repeat !important; }
.editicon-16{ background:transparent url('../images/pencil.png')
center 0 no-repeat !important; }
.help-16{ background:transparent url('../images/help.png') center 0
no-repeat !important; }
.print-16{ background:transparent url('../images/printer.png') center
0 no-repeat !important; }
.export-16{ background:transparent url('../images/page_go.png') center
0 no-repeat !important; }

Toolbar button groups

我们可以使用Ext.container.ButtonGroup类我们可以toolbar中的buttons进行分组。Ext.container.ButtonGroup是Ext.panel.Panel的一个子类。

var myPanel = Ext.create('Ext.panel.Panel',{
    title:'My first toolbar...',
    width:600,
    height:200,
    dockedItems:[{ //Step 1
        xtype : 'toolbar',
        dock: 'top', //Step 2
        items:[
            { xtype:'buttongroup',
                title:'Actions',
                items:[
                    {text: 'New', iconCls: 'addicon-16'},
                    {text: 'Edit', iconCls: 'editicon-16'},
                    {text: 'Remove', iconCls: 'deleteicon-16'}
                ]
            },{
                xtype: 'buttongroup',
                title: 'Print / Export & Help',
                items:[
                    {text: 'Export', iconCls: 'export-16'},
                    {text: 'Print', iconCls: 'print-16'},
                    {text: 'Help', iconCls: 'help-16'}
                ]
            }
        ]
    }],
    renderTo:Ext.getBody()
});

我们在这里添加了两个按钮组，而不是直接将按钮添加到toolbar， 如下所示

默认情况下， buttongroup以水平排列按钮(每个组有3列). 我们可以通过columns属性改变它的列的大小

var myPanel = Ext.create('Ext.panel.Panel',{
    title:'My first toolbar...',
    width:600,
    height:200,
    dockedItems:[{ //Step 1
        xtype : 'toolbar',
        dock: 'top', //Step 2
        items:[
            { xtype:'buttongroup',
                title:'Actions',
                columns:2,
                items:[
                    {text:'New', iconCls:'addicon-32', scale:'large',
                        rowspan:2, iconAlign:'top' },
                    {text:'Edit', iconCls:'editicon-16'},
                    {text:'Remove', iconCls:'deleteicon-16'}
                ]
            },{
                xtype:'buttongroup', title:'Print / Export & Help',
                defaults:{scale:'large', iconAlign:'top'},
                items:[
                    {text:'Export', iconCls:'export-32'},
                    {text:'Print', iconCls:'print-32'}
                ]
            },{
                xtype:'buttongroup', title:'Help',
                items:[
                    {text:'Help', iconCls:'help-32', scale:'large',
                        iconAlign:'bottom' }
                ]
            }
        ]
    }],
    renderTo:Ext.getBody()
});

在上面的代码中，我们设置了columns属性为2。这意味着在这个组中的按钮被组织成两列。在这里有一个非常重要的是新按钮的rowspan属性。它的值为2，这表示新按钮使用两行

The breadcrumb bar

Ext JS 5新添加了breadcrumb bar. 它用于显示一个分展的数据 TreeStore.

Ext.define('Myapp.sample.store.mainMenu', {
    extend: 'Ext.data.TreeStore',
    root: {
        text: 'My app',
        expanded: true,
        children: [{
            text: 'Modules',
            expanded: true,
            children: [
                {leaf: true, text: 'Employees'},
                {leaf: true, text: 'Customers'},
                {leaf: true, text: 'Products'}
            ]
        },{
            text: 'Market',
            expanded: true,
            children: [
                {leaf: true, text: 'Sales'},
                {leaf: true, text: 'Budgets'},
                {leaf: true, text: 'SEO'},
                {leaf: true, text: 'Statistics'}
            ]
        },{
            text: 'Support',
            iconCls:'help-16',
            children: [
                {leaf: true, text: 'Submit a ticket'},
                {leaf: true, text: 'Forum'},
                {leaf: true, text: 'Visit our web site'}
            ]
        },
            {leaf: true, text: 'Reports'},
            {leaf: true, text: 'Charts'}
        ]
    }
});

• 新的Myapp.sample.store.mainMenu扩展于Ext.data.TreeStore类
• store类中的root属性为TreeStore将要包含初始化的node/data model以及它的子节点/data model, 它们可以为node数组，也可以是data models.

你会注意到, 在root属性中的数据的结构类似于树的结构。它将被breadcrumb bar解析，用来创建按钮，menus, submenus。

var myMenuStore = Ext.create('Myapp.sample.store.mainMenu',{});
var myPanel = Ext.create('Ext.panel.Panel',{
    title:'My first breadcrumb bar...',
    width:600,
    height:200,
    dockedItems:[{ //Step 2
        xtype : 'breadcrumb',
        dock: 'top',
        store: myMenuStore,
        showIcons: true,
        selection: myMenuStore.getRoot().childNodes[2].childNodes[0]
    }],
    renderTo:Ext.getBody()
});

第一步，创建一个Myapp.sample.store.mainMenu的实例， 然后我们接着创建一个myPanel容器。

类似于使用toolbar, 现在我们设置xtype为breadcrumb. 它有以下的属性

• store: myMenuStore属性用来指示breadcrumb从哪里获取数据，然后创建相应的组件(buttons, menus)
• showIcons: true属性将用来控制是否在buttons中显示图标
• selection属性用来设置初步选定的node/data model. 我们可以使用root，将它设置为store中的第一个元素，或者像我们一样，设置为myMenuStore.getRoot().childNodes[2].childNodes[0]， 它表示”Submit a ticket” 节点

Handling selections in the breadcrumb bar

我们现在已经创建完了breadcrumb, 但我们需要在它的选择做相应的事件监听。它有一个selectionchange事件，它每次在我们点击按钮或者菜单项时触发

dockedItems:[{
    xtype : 'breadcrumb',
    dock: 'top',
    store: myMenuStore,
    showIcons: true,
    selection: myMenuStore.getRoot().childNodes[2].childNodes[0],
    listeners:{
        'selectionchange':{
            fn:function(mybreadcrumb, node, eOpts){
                var panel = mybreadcrumb.up('panel');
                panel.update( 'This is the zone for:<b>' + node.data.text +
                        '</b>' );
            },
            delay:200
        }
    }
}],

处理函数将按受三个参数，第一个是mybreadcrumb实例，第二个是选择的节点(data model), 第三个参数是一个可选的对像，它将传递给Ext.util.Obserable.addListener监听器。

The main menu for our application

在接下来，我们将创建一个应用程序的主菜单。如下图所示

如截图所示，我们创建了一个toolbar，停靠在top位置。别一个toolbar停靠在bottom位置。 第一个toolbar将包含两个按钮(每一个按钮有自己的菜单)以及一个用来显示用户名的text item, Ext.toolbar.TextItem. 第二个toolbar有一个text item和一个help button.

为了练习，我们需要将整个组件占居整个浏览器。目前为此，我们都是使用panel作为容器，但现在，我们将使用Viewport.

Ext.container.Viewport组件将占用所有可用的空间，并且监听resize事件。

Ext.define('MyApp.view.Viewport',{
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    initComponent: function(){
        var me = this;
        me.items = [{
            xtype: 'panel',
        }];
        me.callParent();
    }
});

Viewport类继承于container组件，所以我们也可以使用layout进行布局，在这里，我们使用的是fit layout. 因为我们想要将viewport的子元素最大化为浏览器。

我们之前提到过，如果我们想要依靠一个组件到四个边中的一边，我们需要使用一个panel. 下面的代码将添加一个空的panel到Viewport.

me.items = [{
    xtype: 'panel',
}];

然后为这个空 panel，指定docked items

dockedItems: [{
    xtype: 'toolbar', docked:'top',
    items: [{
        text: 'Home', iconCls: 'home-16',
        menu:[
            {text: 'Categories', iconCls: 'categories-16'},
            {text: 'Products', iconCls: 'products-16'},
            {text: 'Clients', iconCls: 'clients-16' },
            {text: 'Invoices', iconCls: 'invoices-16'}
        ]
    },{
        text: 'Help', iconCls: 'help-16',
        menu: {
            xtype: 'menu',
            items: [
                {xtype: 'menuitem', text: 'Submit a support ticket'},
                {xtype: 'menuitem', text: 'Forum'},
                {xtype: 'menuitem', text: 'About...'}
            ]
        }
    },
        {xtype: 'tbfill'},
        {xtype: 'tbtext', text: 'User: Brett Fravre'}
    ]
}]

在上面的toolbar中，我们添加了两个新的元素

• tbfill or Ext.toolbar.Fill: 它是一个占位符元素，会强制将接下来的元素渲染到最右侧
• tbtext or Ext.toolbar.TextItem: 渲染一个文本或者html元素

接下来，创建这个Viewport实例

Ext.onReady(function(){
    Ext.create("MyApp.view.Viewport");
});

在Viewport中我们不需要renderTo属性。因为它会自动获取document body.

接下来，我们创建bottom toolbar

dockedItems : [{
    xtype : 'toolbar', docked:'top',
//your code here…
},
    {
        xtype : 'toolbar', dock:'bottom',
        items : [
            {xtype: 'tbtext', text: '<b>Status :</b>Connected'},
            {xtype: 'tbfill' },
            {text:'', iconCls: 'help-16'}
        ]
    }]

Example

自定义一个button基础类

/**
 * Created by robin on 2016/9/6.
 * 自定义Button基础类
 * btnStyle的值可以为blue, grey, green, red, orange，用于设置按纽的颜色, 默认为default
 * htmlEncode 是否对按钮的文字进行html编码，默认为true
 * @cfg {number} indent:  setFormItemIndent使用，调整button的缩进
 */
Ext.define('Cms.ux.Button', {
    extend: 'Ext.button.Button',
    alias: 'widget.cms_button',
    btnStyle: "default", //custom configuration, 指定按钮的样式，区别于cls, 统一添加样式
    htmlEncode: true, //custom configuration  调用Ext.util.Format.htmlEncode格式化按钮文字
    requires: [
        "Cms.ux.Utils",
    ],
    constructor: function (config) {
        this.callParent(arguments); //参数必须为类数组 [config]
        this.updateButtonStyle(config);
        //如果button类型为menu
        if (this.menu) {
            this.menu.cls = this.menu.cls ? this.menu.cls + " syno-ux-button-menu" : "syno-us-button-menu";
            this.menu.shadow = false;
        }

    },
    updateButtonStyle: function (config) {
        this.addCls("cms-ux-button");
        switch (this.btnStyle) {
            case "blue":
                this.addCls("cms-ux-button-blue");
                this.minWidth = 80; //minWidth is configuration option
                break;
            case "grey":
                this.addCls("cms-ux-button-grey");
                this.minWidth = 80; //minWidth is configuration option
                break
            case "green":
                this.addCls("cms-ux-button-green");
                this.minWidth = 80; //minWidth is configuration option
                break;
            case "red":
                this.addCls("cms-ux-button-red");
                this.minWidth = 80; //minWidth is configuration option
                break;
            case "orange":
                this.addCls("cms-ux-button-orange");
                this.minWidth = 80; //minWidth is configuration option
                break;
            default:
                this.addCls("cms-ux-button-default");
        }
    },
    applyText: function (t) {
        console.log("text")
        if (this.htmlEncode) {
            t = Ext.util.Format.htmlEncode(t);
        }

        return t;
    },
    /**
     * 此方法主要在button渲染后调用， 整个方法的实现，可以查看Ext.button.Button.setText源文件
     * version 6 源代码中没有此方法, 它是config中的属性，所有自动生成setText方法
     * version 3 源代码中有这个方法
     *
     * @param {string}
     */
    /*
     setText: function (t) {
     this.text = t;
     //如果在渲染后调用onRender,afterRender
     if (this.el) {

     if (this.htmlEncode) {
     //this.btnEl返回可点击的部分(最里面的元素)，而不是整个button，然后更新文字
     //this.btnEl没有出现在Ext js 6的文档中，但是在源代码里，同时在Ext js 3.4.0也存在
     //this.btnEl是一个Ext.Element元素，所以可以调用update更新它的内容
     this.btnEl.update(Ext.util.Format.htmlEncode(t))
     } else {
     this.btnEl.update(t || ' ');
     }
     //setButtonClass是一个内部方法，所以在文档中没有这个方法, 需要查看源文件
     this.setButtonClass();
     }
     //version 6 没有此方法
     this.doAutoWidth();
     this.fireEvent("textchanged", this, t)
     }*/

    onRender: function () {
        this.callParent(arguments);
        Cms.ux.Utils.setFormItemIndent(this);
    },
    getAriaEl: function () {
        return this.btnEl;
    }

});

/**
 * Created by robin on 2016/9/7.
 * @class Cms.ux.Utils
 * 参考Ext.util.Format写法
 */
Ext.define('Cms.ux.Utils', function () {
    var me;
    return {
        singleton: true,
        constructor: function () {
            me = this;
        },
        /**
         *
         * @param element 需要缩进的元素 1级缩进30, 2级缩进30
         */
        setFormItemIndent: function (el) {
            var indent = el.indent || 0;
            var m = indent * 30;
            /* 如果元素为textfield, 则它有label属性, 获取到labelEl元素, Ext.dom.Element, version 3 为label属性*/
            if (el.labelEl && !el.hideLabel) {
                //d.ownerCt 获取这个组件的容器, 如Ext.form.field.Text labelAlign
                if (el.ownerCt && "top" === el.ownerCt.labelAlign) {
                    el.label.setStyle({
                        "margin-left": m + "px"
                    })
                } else {
                    //labelWidth是一个配置项, 整个w等于indent + labelWidth
                    var w = el.labelWidth || d.ownerCt.labelWidth || 180;

                    d.label.setStyle({
                        "margin-left": m + "px",
                        width: w - m + "px"
                    })
                }

            } else {
                if (el.wrap) {
                    el.wrap.setStyle({
                        "margin-left": m + "px"
                    })
                } else {
                    el.getEl().setStyle({
                        "margin-left": m + "px"
                    })
                }
            }
            //设置按钮的等级 
            if (el instanceof Cms.ux.Button) {
                //设置按钮最内层(可点击)元素的aria-level属性, btnEl可以查看源代码，文档中没有
                el.btnEl.set({
                    "aria-level": indent + 1
                });
                if (el.arrowBtnEl) {
                    el.arrowBtnEl.set({
                        'aria-level': indent + 1
                    })
                }
            } else {
                el.getEl().set({
                    "aria-level": indent + 1
                })
            }
            return el;
        }
    }
});