ExtJS 4.0.7给Grid添加多行工具栏

Ext.grid.Panel是一个比较好用的控件。我们可能经常会在Grid上面放置一些按键、一些搜索过滤条件。为了分类、也为了更好的展示，需要分行显示。比如第一行放置Button、第二行放置带Label、TextField和Button的搜索栏。

这个问题网上一搜，大部分的回复都是通过上面renderTo做的。在我现在这个版本上完全不能Work。继续找了下，找到一个方案，分享给大家。

第一步：定义自己的Ext.toolbar.Toolbar。需要多少行就定义多少个。里面的内容完全自己设定。例如：

var tbar0 = Ext.create('Ext.toolbar.Toolbar', {
    width : '100%',
    items : [{
        text : '删除',
        handler : function() {
            var grid = Ext.getCmp('grid');

            if (grid.getSelectionModel().getSelection()[0] == undefined) {
                Ext.Msg.alert("提示", "请选中要删除的内容！");
            } else {
                Ext.MessageBox.confirm('提示', '确实要删除所选的内容吗？', function(btn) {
                    if (btn == 'yes') {
                        var conn = new Ext.data.Connection();
                        conn.request({
                            url : '',
                            params : {
                                id : grid.getSelectionModel().getSelection()[0].get('id')
                            },
                            method : 'post',
                            scope : this,
                            callback : function(options, success, response) {
                                if (success) {
                                    Ext.MessageBox.alert('info', response.responseText);
                                    Ext.getCmp('msg_grid').store.load();
                                } else {
                                    Ext.MessageBox.alert("提示", "删除失败！");
                                }
                            }
                        });
                    }
                });
            }
        }
    }, '-']
});

var tbar1 = Ext.create('Ext.toolbar.Toolbar', {
    width : '100%',
    items : [{
        xtype : 'label',
        text : '请输入用户ID：'
    }, {
        xtype : 'textfield',
        id : 'id'
    }, {
        text : '搜索',
        handler : function() {
            var id = Ext.getCmp("id").getValue();
            if (id == null || id == "") {
                Ext.Msg.show({
                    title : '提示',
                    msg : '请输入搜索条件'
                });
                return;
            }
            var params = {
                id : id
            };
            store.load({
                params : params
            });
        }
    }, '-', {
        xtype : 'label',
        text : '请输入用户昵称：'
    }, {
        xtype : 'textfield',
        id : 'nickname'
    }, {
        text : '搜索',
        handler : function() {
            var nickname = Ext.getCmp("nickname").getValue();
            if (nickname == null || nickname == "") {
                Ext.Msg.show({
                    title : '提示',
                    msg : '请输入搜索条件'
                });
                return;
            }
            var params = {
                nickname : nickname
            };
            store.load({
                params : params
            });
        }
    }]
});

第二步，就是设置Grid的dockedItems属性。我们可能知道通过它可以设置分页工具显示，它还可以设置各个方位的工具栏。每个item项的dock属性指明了该工具栏应该显示在什么地方。

dockedItems : [{
            xtype : 'toolbar',
            dock : 'top',
            items : [tbar0]
        }, {
            xtype : 'toolbar',
            dock : 'top',
            items : [tbar1]
        }, {
            xtype : 'pagingtoolbar',
            store : store, // same store GridPanel is using
            dock : 'bottom',
            displayInfo : true
        }]