Question

我无法在EXTJS中的多选框中显示条目。这是我的EXTJS多选和相应面板的代码：

var selectTrain = [{
    bodyStyle: 'padding:10px;',
    items:[{
        xtype: 'multiselect',
        fieldLabel: 'Multiselect',
        name: 'multiselect',
        width: 250,
        height: 200,
        id: 'selectTrain',
        store: new Ext.data.JsonStore({
            type: 'ajax',
            url:'http://abc.com/xyz',
            reader: 'json',
            autoLoad:true      
        }),
        ddReorder: true
    }]
}];


// combine all that into one huge form
var fp = new Ext.FormPanel({
    title: '',
    frame: true,
    labelWidth: 300,
    width: 800,
    renderTo:'report',
    bodyStyle: 'padding:0 10px 0;',
    items: [
        {
            layout: 'column',
            border: false,
            // defaults are applied to all child items unless otherwise specified by child item
            defaults: {
                columnWidth: '1',
                border: false
            },            
            items: [selectTrain]
        },
    ],
    buttons: [{
        text: 'Go',
        handler: function(){}
    },{
        text: 'Reset',
        handler: function(){
            fp.getForm().reset();
        }
    }]
});

我能够点击作为servlet的URL http://abc.com/xyz并看到在Firebug控制台上编写的以下JSON：

{"54850":"5.1(1t)d1(3)","54852":"5.1(1t)a2(3)","54853":"5.1(1t)l2(1)","54841":"1.2(4)S1(1)","54789":"5.3(1)T","54849":"5.1(1t)s1(2)","54854":"5.1(1t)l2(5)","54855":"5.1(1t)s2(6)","54847":"1.1(12a)SG"}

http://abc.com/xyz的servlet代码是：

           PrintWriter out = response.getWriter();
           JSONObject jsonObj=new JSONObject();
           for (Iterator iterator = allRelInfoPools.iterator(); iterator
            .hasNext();) {
               Vector v = (Vector) iterator.next();
               jsonObj.put((String)v.get(0),(String)v.get(1));

    }
           out.println(jsonObj);

请告知，我哪里错了？

Answer 1

您可能正在尝试制作跨域AJAX请求（例如，您的应用是从http://def.com/加载的，但您尝试从http://abc.com/xyz加载JSON。不幸的是，这是不允许的。

但是，您可以执行JSONP请求而不是AJAX请求。 JSONP所做的是将一个脚本标记注入到DOM中，它将强制它下载一个将JSON数据保存在其中的JavaScript文件。然后，您应该能够检索您的数据。

幸运的是，EXTJS允许您这样做。例如，在您的代码中，只需将type的{{1}}属性从store更改为ajax。

另外，根据jsonp GET查询，使用JavaScript函数调用更改servlet代码以“填充”jsonObj变量（注意，当callback GET查询被检索时GET请求是通过如下网址进行的：http://abc.com/xyz?callback=someCallbackFunction）。

以下是您的最后一行应如何显示：

callback

out.println(callbackParam + "(" + jsonObj + ");");是您从GET查询中的callbackParam参数获得的值。

无法在EXTJS多选中加载JSON

1 个答案: