在基于Ext的Efs框架下动态加载数据列表Grid

本文介绍了在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”,页面结构代码如下

<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>&nbsp;</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>

 

复制代码
  
1、 完善的Web表现层开发包:为企业Web表现层开发人员提供的一套完整、高效、美观的B/S结构设计表现层解决方案,简单易学。 a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计,让繁琐的页面开发简单易行; b) 极大提高企业的项目Web表现层的开发效率; c) 统一企业的项目UI设计,统一的框架结构,能迅速规范企业的Web表现层代码设计规范,最大限度的减轻企业后期的项目管理、维护、升级成本; d) 减少企业Web表现层开发人员的培训投入; 2、 完善的组件开发包:为企业组件开发人员提供的一套完整、稳定、高效的B/S结构设计业务逻辑层解决方案。 a) 极大提高企业的项目业务逻辑层组件开发效率; b) 统一的接口规范,能迅速规范企业的业务逻辑层组件代码设计规范,最大限度的减轻企业后期项目管理、维护升级成本; c) 减少企业业务逻辑层组件开发人员的培训投入; 3、 分层结构设计:Efs框架严格按照MVC模式设计开发。 a) 能帮助企业迅速发挥团队开发优势,合理分工协作(能迅速将Web表现层开发,业务逻辑组件开发,系统设计合理分离)。 b) 标准的三层结构模型,为系统的稳定、高效运行打下坚实基础。 4、 完善的基础数据库设计: a) 完整的事务、事件管理、用户、单位、角色、权限管理设计,能快速帮助企业在不同的项目中快速完成用户、单位、角色、权限的分配,迅速投入到项目本身的业务系统开发中。 b) 完整的字典管理功能,能方便的对业务系统的全部字典文件进行维护。 c) 标准通用分页查询存储过程设计,为业务系统开发过程中的分页查询提升效率。 d) 灵活稳定的编码分配设计,只需要通过配置即可快速实现可满足各种要求的唯一编码。 e) 健全的汉字拼音管理,收录了常用的3万多汉字的全拼与简拼,能迅速完成对汉字的全拼与简拼的翻译处理。
EfsFrame是一套整体的企业级php开发框架解决方案,整个框架体系中包含了Web表现层开发包,组件开发包,基础数据库设计一整套完整的基于B/S架构应用程序设计开发的完整解决方案。Efs框架从研发到时间,历时近10年,积累了大量实战软件工程专家、数学专家的心血不断完善而成,已应用的大大小小的项目几十个,从小项目的开发管理维护设计到大项目的负载均衡设计,Efs逐渐形成了一整套完整的基于B/S架构的设计解决方案。 EfsFrame(开发框架) 2.2 升级内容: 1、bug修正 a)修正 firefox环境下的快捷键好像不太支持的问题; b)修正 firefox环境下的menuDisabled  属性无效    store的 remoteSort 属性无效; c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应关系为: Kind为 int、float时  datatype默认为 “1” Kind 为 data时 datatype默认为”3” Kind 为 datatime时 datatype默认为”4” Kind为其他时 datatype默认为”0” 2、新的扩展 a)扩展对select的应用,默认将select对象渲染为ext的combobox对象,     详细说明见相关文档 b)扩展对多文件、单文件上传的封装(详细说明见相关文档)。 c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、掌握两种) •语言支持:Java、.Net、PHP、Asp •数据库支持:Oracle、SqlServer、MySQL 强大灵活,接口简单实用的表现层(2天学会Extjs开发) •懂Html、简单Js即可快速上手Extjs开发 •无需美工、代码简单,提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可轻松上手 •Java、.Net、PHP模型互通,学会一种、掌握两种,最大限度为用户节省跨平台成本 •支持Oracle、SqlServer、MySQL数据库模型,轻松解决跨数据库难题 完善的企业级框架模型,能轻松搭建任何B/S应用底层管理模型 •事务事件管理、单位管理、用户管理、角色权限分配管理 •字典管理、唯一编码分配管理、错误日志追踪管理 EfsFrame框架设计目标: l、整体提升企业的项目管理水平; 2、整体提升企业的研发人员的研发水平; 3、整体提升企业的项目研发效率; 4、整体提升企业的项目研发的健壮性; 5、最大限度减少企业的项目维护成本;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值