ExtJs4 笔记(5) Ext.Button 按钮

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

 

从本篇开始讲基础控件,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‘}]
        }]
    });

[转载]ExtJs4 笔记(5) Ext.Button 按钮,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。