Ext动态列

在项目开发中,经常要用到动态列,一个grid就可以满足多种不同的数据显示需要。Ext.grid.GridPanel中的columnModel不允许使用变量进行替代,需要转换成object对象,这里使用Ext.util.JSON.decode将字符串转化为JSON对象,既可以赋值给grid的cm配置项,实现动态列。在store中,使用Ext.data.JsonStore中的fields,这个fields是一个数组对象,通过后台很容易返回一个字符串,再将字符串转换为数组即可满足需要。

以前请教蜡人张老师动态列的问题,他是用Response.write的方式动态输出列,这样灵活性,每次都要刷新一次页面,Ext的异步调用没有发挥出来。具体实现可以参考蜡人张的博客:http://www.cnblogs.com/waxdoll/archive/2009/04/01/ext_gridpanel_dynamic_column_demo.html。在次感谢蜡人张老师。

 

本文示例的主要代码如下:

 

 

test.htm

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="../../ext/adapter/ext/ext-base.js" type="text/javascript"> </script>
    <script src="../../ext/ext-all.js" type="text/javascript"> </script>
    <script src="../../ext/source/locale/ext-lang-zh_CN.js" type="text/javascript"> </script>
    <script src="../js/main.js" type="text/javascript"> </script>
<script type="text/javascript">
    function loadValue() {
        var typeId = document.getElementById("params").value;
        getData(typeId);
    }
</script>
</head>
<body onload="loadValue()">
<div id="container">
</div>
<div id="div_Column"></div>
<form id="form1">
<input type="text" value="1" id="params" />
<input type="button" value="更改Grid" id="btnChange" onclick="loadValue()" />
</form>
</body>
</html>


js文件

main.js

var mainStore;
function createDynamicGrid(columnInfo) {
    var myArr = columnInfo.split(",");
    var myColumns = "new Ext.grid.ColumnModel([";
    for (var i = 0; i < myArr.length; i++) {
        myColumns += "{header:'" + myArr[i] + "',width:120,dataIndex:'" + myArr[i] + "'}";
        if (i < myArr.length - 1) {
            myColumns += ",";
        }
    }
    myColumns += "])";
    return myColumns;
}

function loadGrid(obj, typeId) {
    Ext.get('container').dom.innerHTML = "";
    var myArr = obj.columns.split(",");
    var data = obj.data;
    mainStore = new Ext.data.JsonStore({
        fields: myArr,
        url: '../handlers/dataHandler.ashx?typeId=' + typeId,
        root: 'data'
    });
    var grid = new Ext.grid.GridPanel({
        renderTo: 'container',
        store: mainStore,
        enableColumnMove: false,
        cm: Ext.util.JSON.decode(createDynamicGrid(obj.columns)),
        width: 450,
        height: 200,
        loadMask:true
    });
    mainStore.load();   
}

function getData(typeId) {

    Ext.onReady(function() {

        Ext.Ajax.request({
            method: 'POST',
            url: '../handlers/dataHandler.ashx',
            success: function(request) {
            var obj = Ext.util.JSON.decode(request.responseText);
                loadGrid(obj,typeId);
            },
            failure: function() {
                Ext.Msg.alert("信息提示", "后台获取数据失败!");
            },
            params: { typeId: typeId }
        });
    });

}

 

后台操作dataHandler.ashx

<%@ WebHandler Language="C#" Class="dataHandler" %>

using System;
using System.Web;
using System.Web.SessionState;

public class dataHandler : IHttpHandler,IRequiresSessionState
{

    public void ProcessRequest(HttpContext context)
    {
        string strJson = string.Empty;
        try
        {
            context.Response.ContentType = "text/plain";
            int id=0;
            if (context.Request.QueryString["typeId"] == null)
            {
                id = int.Parse(context.Request.Form["typeId"].Trim().ToString());
            }
            else
            {
                id = int.Parse(context.Request.QueryString["typeId"].ToString());
            }
            if (id == 1)
            {
                strJson = @"{success:true,columns:'id,name',data:[{'id':'1','name':'北京'},{'id':'2','name':'上海'}]}";
            }
            else if(id==2)
            {
                strJson = @"{success:true,columns:'id,name,py',data:[{'id':'1','name':'北京','py':'beijing'},{'id':'2','name':'上海','py':'shanghai'}]}";
            }
        }
        catch (Exception ex)
        {
            strJson = @"{success:false}";
            throw ex;
        }
        context.Response.Write(strJson);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

图片不知道可以不可以浏览:

 

图一

图二

 

阅读更多

ext grid 动态列

10-11

js代码:rnExt.onReady(function() rn //声明函数变量 rn var data; rn //动态添加列,这是关键代码 rn var addColumn = function() rn rn this.fields = ''; rn this.columns = ''; rn this.addColumns=function(name,caption) rn rn if(this.fields.length > 0) rn rn this.fields += ','; rn rn if(this.columns.length > 0) rn rn this.columns += ','; rn rn this.fields += 'name:"' + name + '"'; rn this.columns += 'header:"' + caption + '",dataIndex:"' + name + '",width:80,sortable:true'; rn ; rn ; rn //从服务器端获取列,然后动态添加到ColumnModel中 rn Ext.Ajax.request rn ( rn url:"getHJTJYLB.asp", rn success:function(response) rn rn if(response.responseText=="") rn rn return; rn rn data = new addColumn(); rn var res = Ext.util.JSON.decode(response.responseText);//这句话不太明白具体返回的格式rn for(var i=0;i请打开数据库查看数据表名字是否正确"); rn rn ); rn //动态生成GridPanel rn var makeGrid = function() rn rn var cm = new Ext.grid.ColumnModel(eval('([' + data.columns + '])')); rn //new Ext.grid.RowNumberer; // 自动显示行号rn cm.defaultSortable = true; rn var fields = eval('([' + data.fields + '])'); rn var newStore = new Ext.data.Store rn ( rn proxy:new Ext.data.HttpProxy(url:"getHJTJYLB.asp"), rn reader:new Ext.data.JsonReader(totalProperty:"totalPorperty",root:"root",fields:fields) rn ); rn rn newStore.load(); rn rn var gridPanel = new Ext.grid.GridPanel rn ( rn rn align : 'center',rn width : Ext.get("UserBody").getWidth(),rn height : Ext.get("UserBody").getHeight() - 100,rn cm : cm,rn store : store,rn region : 'center',rn margins : '0 5 5 5',rn frame : true, // 表格外加边框rn columnLines : true,rn clicksToEdit : 1,rn trackMouseOver : false,rn // padding:"10px",rn /*viewConfig : rn forceFit : truern ,*/rn enableHdMenu : falsern ); rn ; rn rn rn );rn***********************************************rnrnjs 代码其中的var res = Ext.util.JSON.decode(response.responseText);rn这句话要怎么样格式返回来,不太清楚rnrn后台的代码要怎么样写,以下我写的,但是觉得不太清楚,这样写对不对,还需要指点一下rnpublic String getDYnamicColName(String szAdmDeptID,String szDeptLevel) throws Exceptionrn rn Connection DBConn = null;rn ConnPool cp = null;rn String Json="";rn tryrn rn cp = new ConnPool();rn DBConn = cp.getConnection();rn if (DBConn == null)rn rn System.out.println("Failed in getting Connection!");rn return null;rn rn String sql = "select row_number() over(order by deptid ) as rm,deptname from jnhb_dept where admdeptid='10001' and deptlevel='3' ";rn Statement statement = DBConn.createStatement();rn statement.execute(sql);rn ResultSet rs = statement.getResultSet();rn rn JSONObject str=new JSONObject();rn str.put("totalCount","1");rn rn while(rs.next())rn rn JSONArray columns = new JSONArray();rn JSONObject columnsStr=new JSONObject();rn columnsStr.put("header", rs.getString("deptname"));rn columnsStr.put("dataIndex",rs.getInt("rs"));rn columnsStr.put("width",80);rn columnsStr.put("sortable","true");rn columns.add(columnsStr);rn str.put("columns",columns);rn rn JSONArray fields = new JSONArray();rn JSONObject fieldsStr=new JSONObject();rn fieldsStr.put("name", rs.getInt("rs"));rn fields.add(fieldsStr);rn str.put("fields",fields);rn rn rs.close();rn statement.close();rn return(Json);rn rn catch (Exception e)rn rn zqLog.writeDebug("Failed in JN_NYXHAction.getDataInfo!");rn e.printStackTrace();rn return (null);rn rn finallyrn rn if (DBConn != null) cp.closeConnection();rn rn rnrn

我们爱分享----Ext经验谈(二)--动态列

09-05

我的上一篇帖子有人回复想看管理ext动态列的问题,其实我感觉我们爱分享活动我理解的应该是分享技巧,分享自己工作中累计的经验,而不是纯粹的把知识拿过来讲。我觉得一个搞开发的,学点知识还需要别人讲解,看着例子自己改才能会,这样的人我感觉可能在IT界的成就不会很高吧。分享经验,是为了让别人少走弯路,别再一个bug耗费过多的时间。但是不等于不思考,自学的精神还是需要有的。闲话就扯到这里,说的不对的地方,大家批评的时候下嘴轻点o(╯□╰)orn 好了言归正传,今天说的是ext动态列的实现和做这个例子的时候遇见的几个问题。下图是我实现的效果,例子很简单。rn[img=http://hi.csdn.net/attachment/201109/5/3638307_1315203471g6kk.jpg][/img]rn[img=http://hi.csdn.net/attachment/201109/5/3638307_13152034717XJl.jpg][/img]rnrn 例子很简单,我可以做到更复杂,可以通过dwr从后台拿来数据,在根据数据判断,生成的列的样式,和渲染等操作,但是我感觉没那个必要,至于为什么没必要我想你懂的。rn 我也没有在网上查别人的动态列是怎么写的,也不知道有没有专门的组件,反正我是一直这么用的,过时的话请批判或者无视,我的原理就是通过拼接字符串,然后用eval函数转换成js代码即可,最后调用一下reconfigure()函数就ok了。rn代码在这里有兴趣的可以下载看看我在这里就不贴出来了,感觉太占篇幅了。rnhttp://download.csdn.net/source/3576491rnrn 我遇见的问题是:我想在打开窗口之后就初始化为一列的状态,但是我加上Ext.getCmp('dynamicGridPanel').load(Ext.getCmp('dynamiccombo').getValue())这句话的时候就报错了,提示我ext-all.js 140行错误。[code=JScript] this.dynamicFormPanel = new Com.kingviker.dynamicgrid.DynamicFormPanel(rn id: 'dynamicFormPanel'rn )rn this.dynamicFormPanel.renderComBox();rn this.dynamicGridPanel = new Com.kingviker.dynamicgrid.DynamicGridPanel(rn id: 'dynamicGridPanel'rn )rn Ext.getCmp('dynamicGridPanel').load(Ext.getCmp('dynamiccombo').getValue())//添加这句后报错。rn // 初始化Windowrn Com.kingviker.dynamicgrid.DynamicWindow.superclass.constructor.call(this, Ext.applyIf(config, rn iconCls: 'icon-monitorwarnning',rn resizable: false,rn width: 470,rn height: 500,rn plain: true,rn layout: 'border',rn bodyStyle: 'padding:5px;',rn closeAction: 'hide',rn modal: true,rn defaults: rn baseCls: 'x-plain'rn ,rn items: [rn region: "north",rn border: false,rn layout: 'fit',rn height:40,rn items: [this.dynamicFormPanel]rn ,rn region: "center",rn border: false,rn layout: 'fit',rn items: [this.dynamicGridPanel]rn ],rn buttons: [rn text: '关闭',rn scope: this,rn handler: function()rn this.hide();rn rn ]rn ));rn[/code]rn 我当时郁闷的半天,不知道为什么会报错,用alert调试了半天也不知道哪里有错误,我注释掉新添加的那句代码就没错误。然后我实在没办法了,就把ext-all.js文件打开找到了140,2753个字符附近,我看到的有这么一句this.loadMask,然后我就开始思考,loadMask是需要组件渲染到dom节点上之后才能生效,不然的话你只是创建了组件,没渲染到具体的dom节点上的话,loadMask的加载阴影效果的显示位置就不能确定。但是这个又和我刚才那个报错有什么关系那?rn我又看了半天代码,发现在重构gridpanel的列的时候,也就是执行reconfigure()的时候这个函数的执行环境(恩 是执行环境)默认是gridpanel已经被渲染到具体的dom节点上了。但是我刚才放代码的地方rn this.dynamicGridPanel = new Com.kingviker.dynamicgrid.DynamicGridPanel(rn id: 'dynamicGridPanel'rn )rn Ext.getCmp('dynamicGridPanel').load(Ext.getCmp('dynamiccombo').getValue())//添加这句后报错。rn这里显然gridpanel还没有被渲染到dom节点上,是后面才把它渲染成window的子组件的。好了到此这个问题就弄明白了。我把那句代码放到window。show()之后执行就没有问题了,就可以正常显示了。rnrn 好了说完了,不知道大家有没有听明白。我感觉我讲的也不适合ext新手,说的不好或者不对的地方大家不要喷我。。。rn有问题可以回复。rn 最后喊一句我的口号:自己动手,丰衣足食。rn --就是希望大家每个人都能学会自己解决问题的能力,代码的原理都搞明白,不要只做一个ctrl+c ctrl+V的行尸走肉

没有更多推荐了,返回首页