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