【extjs4.2】extjs4中在右侧的工具栏实现实例

时间:2017-06-03  来源:extjs  阅读:

现在我们要实现放置在右侧的工具栏,这次我们直接在面板的代码里面写,代码如下:

 代码如下

[Js]
    var panel = new Ext.Panel({
        renderTo: "div1",
        width: 600,
        height: 250,
        collapsible: true,
        layout: "fit",
        title: "演示工具栏",
        items: listView,
        tbar: tbar,
        bbar: bbar,
        rbar: [{
            iconCls: "add16",
            tooltip: "按钮1"
        },
            "-",
            {
                iconCls: "add16",
                tooltip: {
                    text: "按钮2",
                    anchor: "left"
                }
            }, {
                iconCls: "add16"
            }, {
                iconCls: "add16"
            },
            "-",
            {
                iconCls: "add16"
            }
        ]
    });


预览下效果:

最后奉上完整的代码:

 代码如下

[Js]
Ext.onReady(function () {
    Ext.QuickTips.init();

    Ext.define("Datas", {
        extend: "Ext.data.Model",
        fields: [
        { name: "IntData", type: "int" },
        { name: "StringData", type: "string" },
        { name: "TimeData", type: "date" }
       ],
        proxy: {
            type: "ajax",
            url: "Toolbar1Json",
            reader: {
                type: "json",
                root: "rows"
            }
        }
    });

    var store = new Ext.data.Store({
        model: "Datas",
        sortInfo: { field: "IntData", direction: "DESC" },
        autoLoad: true
    });
    store.load();

    var listView = Ext.create("Ext.ListView", {
        store: store,
        multiSelect: true,
        emptyText: "当前没有数据展示",
        reserveScrollOffset: true,
        columns: [{
            header: "IntData",
            dataIndex: "IntData"
        }, {
            header: "StringData",
            dataIndex: "StringData"
        }, {
            header: "TimeData",
            dataIndex: "TimeData",
            align: "right",
            xtype: "datecolumn",
            format: "m-d h:i a"
        }]
    });

    var filed1 = new Ext.form.Field();

    var tbar = Ext.create("Ext.Toolbar", {
        items: ["文字", "-", {
            xtype: "splitbutton",
            text: "按钮"
        }, {
            text: "菜单",
            menu:
            {
                items: [
                    {
                        text: "选项1"
                    }, {
                        text: "选项2"
                    }, {
                        text: "选项3",
                        handler: function () {
                            Ext.Msg.alert("提示", "来自菜单的消息");
                        }
                    }
                ]
            }
        }, "->", "关键字:", filed1, {
            text: "搜索",
            handler: function () {
                store.load({ params: { keyword: filed1.getValue()} });
            }
        }
        ]
    });

    var bbar = Ext.create("Ext.toolbar.Toolbar", {
        layout: {
            overflowHandler: "Menu"
        },
        items: ["溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试",
        "溢出测试", "溢出测试",
        {
            xtype: "button",
            text: "溢出按钮",
            handler: function () {
                Ext.Msg.alert("提示", "工具栏按钮被点击");
            }
        }, { text: "溢出按钮", xtype: "splitbutton"}]
    });

    var panel = new Ext.Panel({
        renderTo: "div1",
        width: 600,
        height: 250,
        collapsible: true,
        layout: "fit",
        title: "演示工具栏",
        items: listView,
        tbar: tbar,
        bbar: bbar,
        rbar: [{
            iconCls: "add16",
            tooltip: "按钮1"
        },
            "-",
            {
                iconCls: "add16",
                tooltip: {
                    text: "按钮2",
                    anchor: "left"
                }
            }, {
                iconCls: "add16"
            }, {
                iconCls: "add16"
            },
            "-",
            {
                iconCls: "add16"
            }
        ]
    });


});

【extjs4.2】extjs4中在右侧的工具栏实现实例

http://m.bbyears.com/wangyezhizuo/33094.html

推荐访问:extjs4api
相关阅读 猜你喜欢
本类排行 本类最新