ExtJs4 笔记（5） Ext.Button 按钮

从本篇开始讲基础控件，ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮，下拉选项式按钮和按钮组合等。我们先看看效果图:

预览

如下是用到的html：

[html]

<h1>
    三种方式实现事件：
</h1>
<div id="div1" class="content">
    <ul>
        <li id="li1"></li>
        <li id="li2"></li>
        <li id="li3"></li>
    </ul>
</div>
<h1>
    带图标菜单：
</h1>
<div id="div2" class="content">
</div>
<h1>
    带分割线的按钮</h1>
<div id="div3" class="content">
</div>
<h1>
    菜单式按钮</h1>
<div id="div4" class="content">
</div>
<h1>
    按钮组合</h1>
<div id="div5" class="content">
</div>

一、基本按钮，三种方式实现按钮事件

这里介绍了最基本的按钮生成代码，第一个按钮具备弹起和按下两种状态，三个按钮分别别设置成三种大小。每个按钮的单击事件都是通过一种新的实现方式。下面看看Js代码：

[Js]

Ext.create("Ext.Button", {
    renderTo: Ext.get("li1"),
    text: "事件实现1",
    allowDepress: true,     //是否允许按钮被按下的状态
    enableToggle: true,     //是否允许按钮在弹起和按下两种状态中切换
    handler: function () {
        Ext.Msg.alert("提示", "第一个事件");
    },
    id: "bt1"
});
 
Ext.create("Ext.Button", {
    renderTo: Ext.get("li2"),
    text: "事件实现2",
    listeners: { "click": function () {
        Ext.Msg.alert("提示", "第二个事件");
    }
    },
    id: "bt2",
    scale: 'medium'
});
 
var bt3 = Ext.create("Ext.Button", {
    renderTo: Ext.get("li3").dom,
    text: "事件实现3",
    id: "bt3",
    scale: 'large'
});
bt3.on("click", function () {
    Ext.Msg.alert("提示", "第三个事件");
});

二、带图标菜单

按钮可以带图标和菜单，我们可以在配置项里面配置：

[Js]

Ext.create("Ext.Button", {
    renderTo: Ext.get("div2"),
    id: "bt4",
    text: "带菜单带图标",
    iconCls: "add16",
    menu:
    {
        items: [
            {
                text: '选项1'
            }, {
                text: '选项2'
            }, {
                text: '选项3',
                handler: function () {
                    Ext.Msg.alert("提示", "来自菜单的消息");
                }
            }
        ]
    }
}).showMenu();
 
Ext.create("Ext.Button", {
    renderTo: Ext.get("div2"),
    id: "bt5",
    text: "上图标下菜单",
    iconCls: "add16",
    iconAlign: 'top',
    menu:
    {
        items: [
            {
                text: '选项1'
            }, {
                text: '选项2'
            }, {
                text: '选项3',
                handler: function () {
                    Ext.Msg.alert("提示", "来自菜单的消息");
                }
            }
        ]
    },
    arrowAlign: 'bottom'
 
});

三、带分割线的按钮

注意的地方：分割线的按钮来自于类Ext.SplitButton

[Js]

Ext.create("Ext.button.Split", {
    renderTo: Ext.get("div3"),
    text: "右图标下菜单",
    iconCls: "add16",
    iconAlign: 'right',
    menu:
    {
        items: [
            {
                text: '选项1'
            }, {
                text: '选项2'
            }, {
                text: '选项3',
                handler: function () {
                    Ext.Msg.alert("提示", "来自菜单的消息");
                }
            }
        ]
    },
    arrowAlign: 'bottom'
 
});

四、菜单式按钮

按钮式菜单Ext.CycleButton与下拉不同的是，它具备选中状态，当选中下拉项时，选中文本会相应变化。

[Js]

Ext.create('Ext.button.Cycle', {
    renderTo: Ext.get("div4"),
    showText: true,
    prependText: '请选择：',
    menu:
    {
        items: [{
            text: '选项1',
            checked: true
        }, {
            text: '选项2'
        }, {
            text: '选项3'
        }]
    },
    changeHandler: function (btn, item) {
        Ext.Msg.alert('修改选择', item.text);
    }
});

四、按钮组合

定义了一组按钮，并可以控制按钮排版。

[Js]

Ext.create("Ext.ButtonGroup",{
     renderTo: Ext.get("div5"),
     title: "按钮组合",
     columns: 3,
     //defaultType:'splitbutton',
     items: [{
         text: '按钮1',
         iconCls: 'add16',
         scale: 'large',
         rowspan: 2
     }, {
         text: '按钮2', iconCls: 'add16', rowspan: 2, scale: 'large'
     }, {
         text: '按钮3', iconCls: 'add16'
     }, {
         xtype: 'splitbutton', text: '分割线按钮', iconCls: 'add16', menu: [{ text: '菜单1'}]
     }]
 });