zoukankan      html  css  js  c++  java
  • 【转】给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 }

  • 相关阅读:
    P6665 [清华集训2016] Alice 和 Bob 又在玩游戏
    模板库
    CSP-S2021 游记
    CSP-S2021 SD迷惑行为大赏
    博弈论总结
    LOJ6033「雅礼集训 2017 Day2」棋盘游戏(二分图最大匹配必经点)
    LOJ6065「2017 山东一轮集训 Day3」第一题
    LOJ6059「2017 山东一轮集训 Day1」Sum
    LOJ6102「2017 山东二轮集训 Day1」第三题
    python笔记:字符编码
  • 原文地址:https://www.cnblogs.com/fireicesion/p/1788762.html
Copyright © 2011-2022 走看看