ExtFrame里的查询页面

查询页面时进入一个模块的主界面

查询页面一般由三部分组成：操作栏工具条、查询参数窗口、查询结果列表

其实查询功能已基本在Grid封装章描述清楚了，这里就简单些

操作栏工具条和新增、修改界面没什么不同，在panel第一次显示时通过CommandButtonBuilder创建就可以了

查询参数窗口采用FormPanel构造，这样在GridPanel的read方法里可以直接调用FormPanel.getValues()方法获取参数，也可以不使用

查询的GridPanel使用QueryGrid（或其它封装），只需要声明grid的名字就可以自动加载格式和数据

以角色的查询页面为例，总计代码如下：

var roletoolbar = new Ext.Toolbar({ items: [new Ext.Toolbar.Button({ text: '   ' })] });

var rolegrid = new QueryAllGrid({
    title: '查询结果',
    frame: true,
    moniker: 'Role',
    gridName: 'role',
    width: '100%',
    height: 450
});

var rolequerypanel = new Ext.Panel({
    width: '100%',
    height: 800,
    items: [rolegrid]
});

var rolepanel = new Ext.Panel({
    tbar: roletoolbar,
    title: '角色管理',
    width: '100%',
    height: 800,
    items: [rolequerypanel],
    listeners: {
        beforerender: function() {
            CommonButtonBuilder.buildToolbar(roletoolbar, 'rolepanel');
        }
    }
});

 

30行不到脚本就可以构造出这个查询页面了（角色没有使用查询参数Panel，使用的不分页的Grid）

如果Grid带有额外预定查询条件，有以下几种模式解决：

1、继承QueryGrid，提供额外参数

2、在参数Panel里增加隐藏字段

3、在后台代码里重载DataHandler的Query方法处理

4、QueryGrid初始化时设置baseParams参数

根据条件不同采用不同模式，一般推荐采用baseParams参数，这个参数会在QueryGrid的store的load方法里合并到store的baseParams里