在项目开发中,经常要用到动态列,一个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 οnlοad="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" οnclick="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;
}
}
}
图片不知道可以不可以浏览: