用过Efs框架的人应该都知道,数据显示的时候用到了Grid这个控件,Grid的数据源是store,方法的思路就是先建立选中的数据源的表头,先建立足够多的列并统一让每一列隐藏,然后根据事先设定好的表头把需要显示的表头显示出来就行了,接着就要指定需要加载的数据,通过动态改变store的属性以及方法的URL,最后调用Ext中store的load()方法就可加载数据。
该程序中用到的部分主要代码如下:
1、首先在页面里调用控件,生成页面,数据源的选择用到了字典,所有要事先建立一个查询内容的字典
<?xml version="1.0" encoding="UTF-8"?>
<data>
<row DIC_CODE="1" DIC_TEXT="数据源1" />
<row DIC_CODE="2" DIC_TEXT="数据源2" />
</data>
当选择了数据源1后,传到页面里的是对应的DIC_CODE:“1”,页面结构代码如下
<div iconCls="icon-panel" region="north" height="60" title="Efs下动态加载数据源" border="false">
<form id="frmQry" method="post">
<TABLE class="formAreaTop" width="100%" height="100%" cellpadding="0" cellspacing="0" id="oTable">
<tr>
<td> </td>
<td width="40">内容</td>
<!--“DIC_ShuJu”为事先建立的查询内容自动-->
<td width="75"><input type="text" kind="dic" src="DIC_ShuJu" id="shuju" "></td>
<td><input iconCls="icon-qry" id="Qry" type="button" value="查 询" onEfsClick="loadData()"></td>
</tr>
</TABLE>
</form>
</div>
<!--声明一个数据源store,方法地址URL里的方法是框架里的映射文件baseRef文件中的映射方法在这里为空,动态构造的查询条件文件txtXML也是动态设置-->
<div id="mgGrid" region="center" xtype="grid" pagingBar="true" pageSize="20">
<div id="mgList" xtype="store" autoLoad="false" url="" txtXML="">
<div xtype="xmlreader" record="ROW" totalRecords="QUERYINFO@records">
</div>
</div>
<div xtype="colmodel">
<!--默认先构造出足够多的列,并预先隐藏 menuDisabled="true" 属性表示不让出现列的下拉菜单-->
<div header="1"sortable="true" menuDisabled="true" dataIndex="" hidden="true"></div>
<div header="1"sortable="true" menuDisabled="true" dataIndex="" hidden="true"></div>
<div header="1"sortable="true" menuDisabled="true" dataIndex="" hidden="true"></div>
<div header="1"sortable="true" menuDisabled="true" dataIndex="" hidden="true"></div>
<div header="1"sortable="true" menuDisabled="true" dataIndex="" hidden="true"></div>
<div header="1"sortable="true" menuDisabled="true" dataIndex="" hidden="true"></div>
<div header="1"sortable="true" menuDisabled="true" dataIndex="" hidden="true"></div>
</div>
</div>
在这里没有设置更多的查询条件,需要的话可以自己进行设置,框架会将查询条件封装到txtXML里面传到后天去。在构造好了页面之后,就可以编写加载数据用到的JavaScript代码了,主要代码如下,在此之前需要加载框架必须的js文件和css文件,否则无法运行。
<HEAD>
<TITLE>Efs下动态加载Grid中的数据</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--首先要根据自己建立的文件位置加载必要的文件-->
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<link rel="stylesheet" type="text/css" href="efs-all.css" />
<script type="text/javascript" src="efs-all.js"></script>
<script type="text/javascript" language="javascript">
// nodeAry 对应节点数组,和后台的sql语句中的字段对应
// headerAry 对应列表头数组
// colmWidAry 对应没列宽数组
function createGrid(nodeAry,headerAry,colmWidAry)
{
// 设置XmlReader读取模式
var m_reader = new Ext.data.XmlReader(
{ record: 'ROW' ,totalRecords:"QUERYINFO@records"},
nodeAry);
Efs.getExt("mgGrid").getStore().reader = m_reader;
// 获得grid的列模式
var colModel = Efs.getExt("mgGrid").getColumnModel();
// 先隐藏所有
for(var i=0;i< colModel.getColumnCount()-1;i++)
{
colModel.setHidden(i+1,true);
}
//根据传进来的表头把需要显示的内容显示出来
for(var i=0;i<headerAry.length;i++)
{
colModel.setColumnHeader(i+1,headerAry[i]);
colModel.setDataIndex(i+1,nodeAry[i]);
colModel.setColumnWidth(i+1,colmWidAry[i]);
colModel.setHidden(i+1,false);
}
}
//动态加载grid里的数据
function loadData()
{
//获取页面上的DIC控件
var shuju = Efs.getDom("shuju");
var nodeAry;
var headerAry;
var sUrl;
//在这里判断传进来的DIC_CODE值,以设置处理方法
if(shuju.code != "")
{
Efs.getDom("mgList").txtXML = Efs.Common.getQryXml(Efs.getExt("frmQry"));
if(shuju.code == "1")
{
nodeAry = ["NAME","SEX","DEPART"];
headerAry = ["姓名","性别","部门"];
colmWidAry = [100,100,100];
sUrl= "http://www.cnblogs.com/sysadmin/baseRefWeb.aspx?method=GetDepart";
}
else if(shuju.code == "2")
{
nodeAry = ["CLASS","GRADE","SCHOOL"];
headerAry = ["班级","年级","学校"];
colmWidAry = [80,80,40];
sUrl= "http://www.cnblogs.com/sysadmin/baseRefWeb.aspx?method=GetClass";
}
//以上的GetDepart和GetClass为后台获取数据源的代码,可以参考Efs框架下的学生管理的例子
//将设置的URL赋予store
Efs.getExt("mgGrid").store.proxy = new Ext.data.HttpProxy({url: sUrl});
//创建grid
createGrid(nodeAry,headerAry,colmWidAry);
//加载数据
Efs.getExt("mgGrid").store.load();
}
else
{
Efs.Msg.alert("提示","请选择要查看的项目!");
}
}
</script>
</HEAD>