日期:2014-05-16  浏览次数:20432 次

关于Extjs4的grid动态列的获取~~
 
StringBuffer stringBuffer = new StringBuffer("{columModle:[{header:'地区',dataIndex:'地区'}]," +
"fieldsNames:[{name:'地区'}]," +
"data:[{'地区':'欧洲'},{'地区':'大洋洲'},{'地区':'亚洲'},{'地区':'欧洲'},{'地区':'欧洲'}," +
"{'地区':'大洋洲'},{'地区':'南美洲'},{'地区':'欧洲'},{'地区':'亚洲'},{'地区':'欧洲'},{'地区':'欧洲'}," +

"{'地区':'亚洲'},{'地区':'欧洲'}]}");



这是返回到前台的json格式,不知道前台怎么处理那个grid store,有相关的例子没?

------解决方案--------------------
我在前台这么做的:(这是个动态加载数据源的例子,你可以参考着改一下)
JScript code
var proxy=new Ext.data.HttpProxy({url:''});
var json = new Ext.util.JSON.decode(fieldDatas);//为传过来的json数据
var reader=new Ext.data.JsonReader({},json.fieldsNames); 
    var store = new Ext.data.Store({
        proxy:proxy,
    reader:reader
    });   
   store.load();
   
    // create the Grid
   var grid = new Ext.grid.GridPanel({
            width:document.body.clientWidth-10,
            height:document.body.clientHeight-25,
            region: 'center',
            split: true,
            border:false,
            store:store,
            columns:json.columModle
            });

------解决方案--------------------
var columns = [
{id:'header', header: "地区", width: 310, sortable: true, dataIndex: 'projectName'}
];//这个是列头
var mystore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'你返回json数据的页面'+new Date().getTime()
}),
reader: new Ext.data.JsonReader({}, [
{name: 'header'}//对应列头名的值,欧洲啊什么的
]),
sortInfo:{field: "projectCreatTime", direction: "DESC"}//排序,可以不使用
});

这样的话就把store数据转换到前台了.
需要注意的事,如果没有在刚才的store处理里面设置autoload的话这里在加载进入grid里面之前需要手动load一遍
mystore.load()//里面可以加参数,仍然是对象的形式{key:value, key:value};
var grid = new Ext.grid.GridPanel({
width:document.body.clientWidth-10,
height:document.body.clientHeight-25,
region: 'center',
split: true,
border:false,
store:store,
columns:columns 
});
现在就是把store数据和设定的columns加载到grid组件里面去了.

不过你的json数据看起来不那么规范 毕竟中文key我都还没试过.. 你的key名叫地区 我就不知道能否行的通了..

------解决方案--------------------
//动态store

ResStore=Ext.create("Ext.data.Store",{
fields:fieldArrp,
pageSize:PAGESIZE,
proxy:{
type:"ajax",
url:"config/list.do?sqlval="+encodeURI(sqlval)+"&t_id="+t_id,
reader:{type:"json",totalProperty:"total",root:"ptdata"}
},
autoLoad: true
});

var resultP = new Ext.grid.Panel({
id: 'jgjxsp',
closable : false,//隐藏grid的关闭按钮
store:ResStore, 
autoScroll: true,
autoRender:true,
columns:jsons.columModle,
bodyCls:"gridheader",
columnLines:true,
layout: 'fit',
------解决方案--------------------
我不大喜欢这种纯后台生成的数据列形式
你想如果你的请求发生错误 那么前台就什么也看不见 这样的体验挺差的
不如你前台绘制好页面 后台只传递数据
让显示和数据分离