Harvest Fly

Java,Web,Ajax
随笔 - 8, 文章 - 5, 评论 - 15, 引用 - 0
数据加载中……

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

posted on 2009-05-21 17:47 harvestfly 阅读(3693) 评论(5)  编辑  收藏 所属分类: ExtJS

评论

# re: 给ExtJS的Grid增加两行tbar  回复  更多评论   

有源码没?
2009-05-22 01:33 | 虎啸龙吟

# re: 给ExtJS的Grid增加两行tbar  回复  更多评论   

很好,感谢
2010-02-04 17:14 | wyb_009

# re: 给ExtJS的Grid增加两行tbar[未登录]  回复  更多评论   

maybe it will help you https://www.extjs.com/forum/showthread.php?t=94762
2010-03-20 20:04 | Jet

# re: 给ExtJS的Grid增加两行tbar  回复  更多评论   

楼主能给个源码吗,谢谢了......pf520025@126.com
2010-04-26 11:27 | 321

# re: 给ExtJS的Grid增加两行tbar  回复  更多评论   

为什么我一把这段代码加进去会显示typeerror 的问题呢
2013-10-23 15:38 | 大神一步一步走

只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问