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