ExtJS实现完美Grid(4)--增强的查询

有时我们要查看的数据可能是分级的数据，不同级别的人或者不同组织的人关心的数据不一样，他们需要把别的数据过滤掉，这样我们需要在列表旁加一个目录树。

我在《ExtJS实现完美Grid(3)》的基础上改进

1、首先我们先建一个职位目录树

var officeUrl='../server/officeserver.jsp?action=tree'
//定义树目录
var officeRoot=new Ext.tree.AsyncTreeNode({
   id:"root",
   text:"总经理",
   checked:false,
   qtip:'总经理'  
});
var findGo=new Ext.Toolbar.Button({
xtype:'button',
text:'',
iconCls:'icon_tb_BtnGo'
})
//定义职位目录树,并定义数据源
var office=new Ext.tree.TreePanel({
root:officeRoot,
checkModel:'cascade',
autoScroll:true,
loader:new Ext.tree.TreeLoader({
   dataUrl:officeUrl,
   baseAttrs: {
                uiProvider: Ext.tree.TreeCheckNodeUI //使用扩展复选框组件
        }
}),
tbar:['->',findGo]
});
//添加选中改变监听，当选中或取消选中父节点时，同时对子节点执行相同的操作
office.on('checkchange', function(node, checked) {
    node.expand();
node.attributes.checked = checked;     
    node.eachChild(function(child) {     
            child.ui.toggleCheck(checked);     
            child.attributes.checked = checked;     
            child.fireEvent('checkchange', child, checked);     
    });            
}, office);

2、然后我们把这一个职位目录树和《ExtJS实现完美Grid(3)》建的grid组织到一个panel里，用border布局

//总的Panel
var view =new Ext.Panel({
   el:'grid',
   layout:'border',
   items:[
   {
      id:'officePanel',
      title:'职位',
      region:'west',
      width:150,
      layout:'fit',
      collapsible:true,
          collapsed :true, //默认为闭合状态
          split:true,
      items:[office]
   },{
      region:'center',
      layout:'fit',
      items:[grid]
   }
   ]  
  
})
view.render();
officeRoot.expand(true);

也可仿照查询面板，在页面加一个div,然后强制控制大小显示和隐藏，请自行研究

这样我们就完成了，简单吧

来看看效果吧

闭合状态

打开状态：

到此打造完美grid已经实现，此grid基本上可以满足常见的功能需要。

因为源码太长，不能一一贴出，仅供参考!!