快崩溃了！extjs的grid动态列的问题

Question

最近在做一个extjs+SSH的项目，有个需求要用到grid动态生成列。
其中action中方法代码如下：
public String getPoqutityGridByPoId(){
PoqutityGridForm pf = purchaseOrderService.getPoqutityByPoIdgrid(detailPoId);
if(pf==null){
this.setJsonString("{result:[],totalRecord:0}");
return "fail";
}
List columnList = pf.getColNames();
List dataList = pf.getColValues();
JSONArray column = JSONArray.fromObject(columnList);
JSONArray data = JSONArray.fromObject(dataList);
String message ="{column:" +column.toString()+", data:"+data.toString()+"}";
this.setMessage(message);
this.setJsonString("{success:true, msg:'"
+ this.getMessage().toString() + "'}");
return this.SUCCESS;
}
在js中这样获得数据：
var cm;
var ds;
Ext.ajax.request({
url:'getPoqutityGridByPoId.do?detailPoId='+poId,
method:'post',
success:
function(response,options){
 alert(response.responseText);
 var json = Ext.util.JSON.decode(response.responseText);
 var realjson = Ext.util.JSON.decode(json.msg);
 cm = new Ext.grid.ColumnModel(realjson.column);
 ds = new Ext.data.JsonStore({
data:realjson.data,
fields:['color','col1','col2','col3','col4','col5','col6','col7','col8','col9','col10','total']
 });
},
failure:
function (){
}
}); 
后面生成grid
var podetailgrid = new Ext.grid.GridPanel({
title:"",
cm:cm,
ds:ds,
viewConfig: {
      forceFit:true
        },
       frame:true,
       collapsible: true,
       animCollapse: false,
       iconCls: 'icon-grid'
});最后显示grid
var pnl = new Ext.Viewport({
     layout: 'border',
items: [ 
     {
region : 'north',
autoScroll : true,
border:false,
height: 720,
items: basePanel
},
{
region : 'center',
autoScroll : true,
border:false,
layout: 'fit',
items: podetailgrid
},
{
region : 'south',
autoScroll : true,
border:false,
height: 300,
                minSize: 300,
                maxSize: 600,
items: grid
}
]
});
在获取数据阶段我alert过，数据是有的，但是在生成grid的时候报出q is undefined的错误，请问到底应该怎么做啊？尝试了网上的好几个方法，快崩溃啦，求大侠们帮忙想想办法~~

Answer 1

你这些代码顺序就是这样的吗？
有可能会是你用ajax请求了数据，但是ajax请求还没返回的时候，底下的代码已经执行了，那肯定不对了

Answer 2

可能是异步的问题，异步加载数据的时候。后面的代码不会等待签名的ajax执行完了才执行的。
你将异步设为同步看看
success:
function(response,options){
alert(response.responseText);
var json = Ext.util.JSON.decode(response.responseText);
var realjson = Ext.util.JSON.decode(json.msg);//确定这里的object中可以拿到column并且是一个object就没有问题了
cm = new Ext.grid.ColumnModel(realjson.column);
ds = new Ext.data.JsonStore({
data:realjson.data,
fields:['color','col1','col2','col3','col4','col5','col6','col7','col8','col9','col10','total']
});
},

Answer 3

这个地方我alert过，确实是object，但是后面还是会报q is undefined的错误啊？

Answer 4

2种方法
1、下载官方提供的ext-basex.js里面封装了Ext.Ajax.request的同步参数设置
参考：http://www.cnblogs.com/fengmiaosen/archive/2010/06/23/1763484.html2、直接用ext-base.js中的方法，但是需要重写
具体参考：URL很长

Answer 5

可以把生成grid放在ajax请求的回调方法success中,
这样能保证请求的数据已经返回
试下看.

Answer 6

动态列生成 不需要人工发ajax 再生成列，这样会造成要等request返回才能生成界面， 好的做法是先生成grid， 然后load时候动态生成列
参考API上 JsonReader，开头有个metaData的例子，就是用来动态生成列的
API上漏了一个最重要的属性
{
    metaData: {
        "idProperty": "id",
        "root": "rows",
        "totalProperty": "results"
        "successProperty": "success",
colModel:[{dataIndex:'col1', header: 'Column 1'}, ...], // API漏了这个
        "fields": [
            {"name": "name"},
            {"name": "job", "mapping": "occupation"}
        ],

Answer 7

试过放在回调方法success中生成grid
但是这样在这个方法外就不能用到grid了，怎么把这个grid布局到viewport中?

Answer 8

var cm;
var ds;
Ext.ajax.request({
    url: 'getPoqutityGridByPoId.do?detailPoId=' + poId,
    method: 'post',
    success: function(response, options) {
        alert(response.responseText);
        var json = Ext.util.JSON.decode(response.responseText);
        var realjson = Ext.util.JSON.decode(json.msg);
        cm = new Ext.grid.ColumnModel(realjson.column);
        ds = new Ext.data.JsonStore({
            data: realjson.data,
            fields: ['color', 'col1', 'col2', 'col3', 'col4', 'col5', 'col6', 'col7', 'col8', 'col9', 'col10', 'total']
        });
        //将grid写在这里，有关异步的操作
        var podetailgrid = new Ext.grid.GridPanel({
            title: "",
            cm: cm,
            ds: ds,
            viewConfig: {
                forceFit: true
            },
            frame: true,
            collapsible: true,
            animCollapse: false,
            iconCls: 'icon-grid'
        });        最后显示grid
        var pnl = new Ext.Viewport({
            layout: 'border',
            items: [{
                region: 'north',
                autoScroll: true,
                border: false,
                height: 720,
                items: basePanel
            },
            {
                region: 'center',
                autoScroll: true,
                border: false,
                layout: 'fit',
                items: podetailgrid
            },
            {
                region: 'south',
                autoScroll: true,
                border: false,
                height: 300,
                minSize: 300,
                maxSize: 600,
                items: grid
            }]
        });
    },
    failure: function() {}
});

Answer 9

按照你的说法，真的解决了，太感谢啦，我想问一下，为什么这个地方要把viewport放在ajax.request里面才可以呢？按理来说，我把request设成同步的话viewport放在后面不也可以获得数据了吗？

Answer 10

是的，因为异步的时候数据没有获取，才导致错误的。如果用同步就不用改了
也可以用setTimeout延时获取
用异步放在回调函数中即可
设置同步参考7#

Answer 11

可是我用同步的时候还是会q is undefined啊?只有放在request里面的才成功了。同步的我是这样写的,是不是写法还是不对？：
Ext.Ajax.request({
url:'getPoqutityGridByPoId.do?detailPoId='+poId,
method:'post',
async:false,
success:
function(response,options){
 alert(response.responseText);
 var json = Ext.util.JSON.decode(response.responseText);
 var realjson = Ext.util.JSON.decode(json.msg);
 cm = new Ext.grid.ColumnModel(realjson.column);
 ds = new Ext.data.JsonStore({
data:realjson.data,
fields:['color','col1','col2','col3','col4','col5','col6','col7','col8','col9','col10','total']
 });
},
failure:
function (){
//results="";
}
}); 
var podetailgrid = new Ext.grid.GridPanel({
title:"",
cm:cm,
ds:ds,
viewConfig: {
      forceFit:true
        },
       frame:true,
       collapsible: true,
       animCollapse: false,
       iconCls: 'icon-grid'
});

 var pnl = new Ext.Viewport({
     layout: 'border',
items: [ 
     {
region : 'north',
autoScroll : true,
border:false,
height: 720,
items: basePanel
},
{
region : 'center',
autoScroll : true,
border:false,
layout: 'fit',
items: podetailgrid
},
{
region : 'south',
autoScroll : true,
border:false,
height: 300,
                minSize: 300,
                maxSize: 600,
items: historygrid
}
]
});

Answer 12

哦，你给的那个链接我没看仔细，漏了下载的文件，hoojo不好意思啊~还是谢谢啦~