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);
    }
});

最终效果如下图所示（示意）：