Ext2.2动态生成ColumnModel

本篇主要介绍动态生成ColumnModel,进而生成动态生成GridPanel

前台的js部分:

<form id="form1" runat="server">
    <div>
    <div id="grid_div"></div>
    <script type="text/javascript">
    //这里主要实现一个从后台获取数据列，然后动态添加到ColumnModel中，再也不用手动配置的方式
    function ready()
    {
        //声明函数变量
        var data;
        //动态添加列，这是关键代码
        var addColumn = function()
        {
            this.fields = '';
            this.columns = '';      
            this.addColumns=function(name,caption)
            {
                if(this.fields.length > 0)
                {
                    this.fields += ',';
                }
                if(this.columns.length > 0)
                {               
                    this.columns += ',';
                }           
                this.fields += '{name:"' + name + '"}';
                this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100,sortable:true}';
            };
        };
        //从服务器端获取列，然后动态添加到ColumnModel中
        Ext.Ajax.request
        ({
             url:"JsonData.aspx?param=column",
             success:function(response,option)
             {                
                 if(response.responseText=="")
                 {
                    return;
                 }                
                 data = new addColumn();
                 var res = Ext.util.JSON.decode(response.responseText);                
                 for(var i=0;i<res.length;i++)
                 {
                     for(var p in res[i])
                     {
                        data.addColumns(p,p);
                     }
                 }
                 //动态生成GridPanel
                 makeGrid();
             },
             failure:function()
             {
                Ext.Msg.alert("消息","初始化数据出错");
             }
        });
        //动态生成GridPanel
        var makeGrid = function()
        {
            var cm = new Ext.grid.ColumnModel(eval('([' + data.columns + '])'));
            cm.defaultSortable = true;
            var fields = eval('([' + data.fields + '])');
            var newStore = new Ext.data.Store
            ({
                    proxy:new Ext.data.HttpProxy({url:"JsonData.aspx?param=data"}),
                    reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:fields})
            });
           
            newStore.load({params:{start:0,limit:9}});
            var pagingBar = new Ext.PagingToolbar
            ({
                    displayInfo:true,
                    emptyMsg:"没有数据显示",
                    displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
                    store:newStore,
                    pageSize:9
            });       
            var gridPanel = new Ext.grid.GridPanel
            ({
                    title:"动态生成ColumnModel",
                    cm:cm,
                    id:"grid_panel",renderTo:"grid_div",
                    store:newStore,
                    frame:true,
                    border:true,                   
                    layout:"fit",  
                    pageSize:16,   
                    autoWidth:true,
                    height:300,
                    width:600,
                    viewConfig:{forceFit:true},
                    bbar:pagingBar
            });
        };
    }
    Ext.onReady(ready);
    </script>
    </div>
    </form>

后台的cs部分:

protected void Page_Load(object sender, EventArgs e)
        {
            #region 分页
            int pagesize = 20;
            int start = 1;
            string field, asc_desc;
            if (string.IsNullOrEmpty(Request["sort"]))
            {
                field = "ID";
                asc_desc = "desc";
            }
            else
            {
                field = Request["sort"];
                asc_desc = Request["dir"];
            }
            if (!string.IsNullOrEmpty(Request["limit"]))
            {
                pagesize = int.Parse(Request["limit"]);
                start = int.Parse(Request["start"]);
            }
            start = start / pagesize;
            start += 1;
            #endregion
            string param = Request["Param"];
            switch (param)
            {
                case "data":
                    Response.Write(Select(field, asc_desc, pagesize, start));
                    break;
                case "column":
                    Response.Write(GetDataColumn());
                    break;
                case "data_column":
                    Response.Write(GetDataAndColumn(field, asc_desc, pagesize, start));
                    break;
                default:
                    break;
            }
        }

        string GetDataAndColumn(string field, string asc_desc, int pagesize, int start)
        {
            string data = Select(field, asc_desc, pagesize, start);
            string column = GetDataColumn();

            List<Hashtable> htList = new List<Hashtable>();
            Hashtable ht = new Hashtable();
            ht.Add("data", data);
            ht.Add("column", column);
            htList.Add(ht);
            string json = JavaScriptConvert.SerializeObject(htList);
            return json;

        }

        string Select(string field, string asc_desc, int pagesize, int start)
        {
            string json = "";
            try
            {
                DataSet ds = CommonUtil.PaginationByTableName(field, asc_desc, pagesize, start, "TypeTable");
                if (ds != null && ds.Tables[0].Rows.Count > 0)
                {
                    json = CommonUtil.GetJsonString(ds);
                    int count = CommonUtil.GetCountByTableName("TypeTable");
                    json = "{totalPorperty:" + count + ",root:" + json + "}";
                }
            }
            catch (Exception ee)
            {
                string error = ee.Message;
            }
            return json;
        }

这里留个大家一个思考:

细心的读者可能够已经注意到了,

这个程序向服务器请求了2次,

第一次是获取数据列,

第二次是获取分页的数据,

那么如何做到只向服务器请求一次就能够实现这个功能呢?

期待大家的讨论.

 

欢迎访问Ext技术博客

评论

1 楼 xiaohewoai 2010-03-30  

直接一个 json 格式全部传过来啊