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'}]

        }]

    });

作者：李盼（Lipan）
出处： [Lipan] （ http://www.cnblogs.com/lipan/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。