ExtJS两个tbar常见问题探讨

ExtJS 面板工具栏与查询条件分开摆放的巧妙实现

使用 ExtJS 的开发者都知道，每个 Panel 都自带 tbar（顶部工具栏）和 bbar（底部工具栏）。在开发查询页面时，通常需要展示数据表格，再添加操作按钮（如“添加”按钮），并增加查询条件以快速定位数据。使用 Java 或普通 HTML 实现这一功能很简单，三个 table 或三个 div 即可完成。那么，使用 ExtJS 如何实现？其实同样简单——用 Grid 组件显示数据，用 Button 组件放置操作按钮，查询条件也可以直接放入同一个 toolbar 中。功能虽能实现，但用户体验是否理想？

客户至上的原则下，最朴素的做法是将用户视为“傻瓜”：操作越简单越好。就像傻瓜相机、一键装系统一样，越简单越受欢迎。为了追求“信达雅”，如何将操作按钮与查询搜索条件分别放置在两个不同的工具栏上？网上有些代码可以在 Grid 中添加两个 tbar，但对于项目紧急上线的初学者来说，有一种更简便的方法，同样能达到“信达雅”的效果：利用 listeners 监听器。

具体实现思路分为三个步骤：

• 第一步：将执行按钮（如“添加”按钮）放置在 Panel 自带的 tbar 上。
• 第二步：自定义一个工具栏，用于放置查询搜索条件。
• 第三步：让自定义工具栏监听 Panel 自带的 tbar——简单来说，就是自定义工具栏将自己渲染到自带工具栏上。

核心代码仅两行关键逻辑：

tbar: new Ext.Toolbar({items:['-']}),
// 把查询工具栏写在按钮工具栏下面
listeners: {
    render: function(){
        queryBar.render(this.tbar);
    }
}

以下是项目中的实际代码片段，供直接参考：

mnguser.panel = new Ext.Panel({
    id :'mngmenuDiv',
    title : '用户管理',
    region : 'center',
    layout : 'fit',
    style : 'padding:3px;',
    bodyBorder : true,
    border : true,
    items : _grid,
    tbar:new Ext.Toolbar({items:['-']}),
    // 把查询工具栏写在按钮工具栏下面
    listeners: {
        render: function(){
            queryBar.render(this.tbar);
        }
    }
});

mnguser.body = Ext.extend(Ext.Viewport, {
    layout : 'border',
    initComponent : function() {
        this.content = mnguser.panel;
        menuOpt(this.content); // 在自带tbar上添加执行按钮
        Ext.apply(this, {
            items : [this.content]
        });
        mnguser.body.superclass.initComponent.call(this);
    }
});

最终效果如下图所示：