Невозможно загрузить JSON в EXTJS multi-select

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(); 
     } 
    }] 
}); 

Я могу ударить URL http://abc.com/xyz, который сервлет и видим следующее JSON записывается на консоли Firebug:

{"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 является:

  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); 

Pls посоветуйте, где я буду неправильно?

Answer 1

Возможно, вы пытаетесь сделать запрос на междоменный AJAX (например, приложение было загружено с http://def.com/, но вы пытаетесь загрузить JSON с http://abc.com/xyz). Это, к сожалению, не допускается.

Однако вы можете выполнить запрос JSONP вместо запроса AJAX. Что JSONP делает, это вставить тег скрипта в DOM, и это заставит его загрузить файл JavaScript, в котором будут храниться ваши данные JSON. Затем вы сможете получить данные.

К счастью, EXTJS позволяет вам это делать. В ваш код, например, просто измените значение type объекта store от ajax до jsonp.

А также изменить код сервлета на «площадку» jsonObj переменной с вызовом функции JavaScript на основе запроса callback GET (обратите внимание, запрос callback GET извлекается, когда запрос GET был сделан через URL, как так: http://abc.com/xyz?callback=someCallbackFunction).

Вот как ваша последняя строка должна выглядеть так:

out.println(callbackParam + "(" + jsonObj + ");"); 

Если callbackParam это значение, которое вы получили от параметра callback из запроса GET.