首页 / 脚本样式 / ExtJS / 给ExtJS的Grid增加两行tbar

给ExtJS的Grid增加两行tbar2010-12-05 blogjava harvestfly按照需要，我们一般在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 }