extjs gridpanel动态列和数据

   本人因项目需要使用到了extjs，有个功能得使用到extjsgridpanel动态列，这个其实并不是很难，使用过extjs的都知道要定义数据源，和绑定数据。

首先咱们得定义数据源，既然extjsgridpanel是动态的 数据源定义的也应该是动态的，这时需要后台定义三个数据源，一个是分页的数据源，第二个是分页绑定数据的数据源，第三个是extjsgridpanel头部显示的数据源

分页的数据源不多说了这个用过extjs的人都知道 接下来说第二个和第三个吧

第二个数据源 是extjsgridpanel绑定数据的 ，因为是动态的，根据数据库所查的数据组成一个json   

我发一下我的json  然后解析出来的数据源

{hidden : true,name : 'id',mapping :'id'}, 
   {name : 'conametime',mapping : 'conametime'},
   {name : 'monday',mapping : 'monday'},
{name : 'tuesday',mapping : 'tuesday'}, 
{name : 'wednesday',mapping : 'wednesday'}, 
{name : 'thursday',mapping : 'thursday'}, 
{name : 'friday',mapping : 'friday'}, 
{name : 'saturday',mapping : 'saturday'}, 
{name : 'sunday',mapping : 'sunday'}

cm是第二个数据源，  cm应该是一个数组 ，    我用遍历的方式把第二个的json push到cm这个数组里面去的  

第一步应该是访问第二个数据源获取到绑定数据的数据源，然后定义extjsgridpanel数据源

代码如下   var ds_child = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : rootPath+'/tclassschedule/pageTclassschedule',
method : 'GET',
}),

reader : new Ext.data.JsonReader(
{root : 'list.list',totalProperty : 'list.totalRow',id : 'id'},cm
)
});

这时数据源读取到了 也绑定好了 这时 我们要做的就是做gridpanel的表单每列的列名，会用到第三个数据源，

第三个数据源解析出来的json如下   

  {header : 'pid',hidden : true,dataIndex : 'pid'}, 
       {header : '课次',dataIndex : 'conametime',
renderer: function(value) {
        if(value =='morningOne') { 
           return "<span>上午第一节课</span>";
        }if(value =='morningTwo' ) { 
           return "<span>上午第二节课</span>";
        }if(value =='morningThree' ) { 
           return "<span>上午第三节课</span>";
        }if(value =='morningFour' ) { 
           return "<span>上午第四节课</span>";
        }if(value =='afternoonOne' ) { 
           return "<span>下午第一节课</span>";
        }if(value =='afternoonTwo' ) { 
           return "<span>下午第二节课</span>";
        }if(value =='afternoonThree' ) { 
           return "<span>下午第三节课</span>";
        }   }},
   {header : '周一',dataIndex : 'monday'}, {
header : '周二',dataIndex : 'tuesday'}, {
header : '周三',dataIndex : 'wednesday'}, {
header : '周四',dataIndex : 'thursday'}, {
header : '周五',dataIndex : 'friday'}, {
header : '周六',dataIndex : 'saturday'}, {
header : '周日',dataIndex : 'sunday'}

然后前台也定义一个数组，遍历这个json  push到这个数组里面去

注： listt  是我前台定义的数组，接收列名用的

接着  var viewColumn = new Ext.grid.ColumnModel(listt);这样一下 列头也定义好了 

然后把这两个组件放到 gridpanel里面去就可以了

var childGrid = new Ext.grid.GridPanel({
autoWidth : true,
id:"bjkcid",
frame : false,
collapsible : true,
title : '学生成绩列表',
viewConfig : {
forceFit : true // 自动拉伸列
},
store : ds_child,
cm : viewColumn,
tbar : toolbar_child,// 附上定义的按钮
bbar : new Ext.PagingToolbar({
pageSize : 15,
store : ds_child,
displayInfo : true,
autoHeight : true,
displayMsg : '显示第 <span class="red_font">{0}</span>条到 <span class="red_font">{1}</span> 条记录，一共 <span class="red_font">{2}</span> 条',
emptyMsg : '<span class="red_font">对不起，没有查找到记录</span>'
})
});

这样一个动态的就出来了