给ExtJS的Grid增加两行tbar
按照需要，我们一般在Grid的上方放置一个toolbar，再在上面放一些输入控件做查询用，但是同时我们也需要在上面添加一些其他按钮，比如“新增”，“删除”，“修改”，“导出”等，但是这些按钮要是放置查询的那个tbar上的话，感觉不太好，最好将分成两排。
我们先看看截图：
图片看不清楚？请点击这里查看原图（大图）。
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
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 }
|