按照需要，我們一般在Grid的上方放置一個toolbar，再在上面放一些輸入控件做查詢用，但是同時我們也需要在上面添加一些其他按鈕，比如“新增”，“刪除”，“修改”，“導出”等，但是這些按鈕要是放置查詢的那個tbar上的話，感覺不太好，最好將分成兩排。
我們先看看截圖：
代碼如下：
1 //Grid其他代碼省略
2 tbar : [{
3 xtype : 'hidden',
4 id : 'action',
5 value : 'QUERY_T_SYS_USER_ACTION'
6 }, '用戶姓名: ', {
7 xtype : 'textfield',
8 id : 'description',
9 width : 120
10 }, new Ext.Toolbar.TextItem(" "),
11 '創建時間: ', {
12 id : 'itemDateFrom',
13 xtype : 'datefield',
14 format : 'Y-m-d',
15 readOnly : true
16 }, '至', {
17 id : 'itemDateTo',
18 xtype : 'datefield',
19 format : 'Y-m-d',
20 readOnly : true
21 }, '-', {
22 text : '查詢',
23 iconCls : 'query',
24 handler : function() {
25 store.load({
26 params : {
27 start : 0,
28 limit : 25,
29 USER_NAME : Ext.get('description').dom.value,
30 action : Ext.get('action').dom.value
31 }
32 })
33 }
34 }],
35 listeners : {
36 'render' : function() {
37 var tbar = new Ext.Toolbar({
38 items : [{
39 text : '新增',
40 iconCls : 'add'
41 }, {
42 text : '修改',
43 iconCls : 'modify'
44 }, {
45 text : '刪除',
46 iconCls : 'delete'
47 }, '-', {
48 text : '導出PDF',
49 iconCls : 'pdf'
50 }, {
51 text : '導出Excel',
52 iconCls : 'excel'
53 }, '-', {
54 text : '打印',
55 iconCls : 'print'
56 }]
57 });
58 tbar.render(grid.tbar);
59 }
60 }