给ExtJS的Grid增加两行tbar

给ExtJS的Grid增加两行tbar

按照需要，我们一般在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  }