在基于Ext的Efs框架下动态加载数据列表Grid-优快云博客

本文链接：https://blog.youkuaiyun.com/linghao00/article/details/7826776

本文介绍了在Efs框架下如何动态加载数据列表Grid的方法。首先，通过字典选择数据源，然后利用JavaScript动态构造Grid的列和隐藏列。在用户触发查询时，根据选择的数据源设置不同的URL，动态生成查询条件并加载数据。示例代码展示了如何创建Grid、设置Store、构造列模型以及加载数据的详细过程。

前一段时间在项目里用到了在Efs下动态加载数据源，因为在现有版本里并没有封装该方法，故需要自己动手实现相关功能。在和框架开发者讨论下，做出了一个初步的解决方法，方法很简单，在这里和大家分享一下。

　　用过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”，页面结构代码如下

<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>

　　在这里没有设置更多的查询条件，需要的话可以自己进行设置，框架会将查询条件封装到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>