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