Ext动态列

来源：互联网发布：痔疮根治方法知乎编辑：程序博客网时间：2024/05/16 05:58

在项目开发中，经常要用到动态列，一个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;
        }
    }

}

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