extjs4中在右侧的工具栏实现实例

[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'
            }
        ]
    });

});