1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    8
    Vote Rating
    0
    sabhandari is on a distinguished road

      0  

    Default Unable to load json store properly

    Unable to load json store properly


    here is my EXTJS code:

    Code:
     var selectTrain = [{
                bodyStyle: 'padding:10px;',
                items:[{
                    xtype: 'multiselect',
                    fieldLabel: 'Multiselect',
                    name: 'multiselect',
                    width: 250,
                    height: 200,
                    visible: false,
                    id: 'selectTrain',
                    store: new Ext.data.JsonStore({
                        type: 'ajax',
                        url:'http://abc.com/xyz',
                        reader: 'json',
                        autoLoad:true      
                    }),
                    ddReorder: true
                }]
            }];
    When I hit that URL, I am getting the following JSON:
    Code:
    {"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"}
    But the multi-select box is still empty. By the way, I have added the above multi-select into a panel:

    Code:
            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: [reportType,selectTrain]
                    },
                ],
                buttons: [{
                    text: 'Go'
                },{
                    text: 'Reset',
                    handler: function(){
                        fp.getForm().reset();
                    }
                }]
            });
    http://abc.com/xyz is a servlet which is using JSON.jar to convert a Vector which further consists of vectors. The code for xyz servlet is:

    Code:
                   PrintWriter out = response.getWriter();
                   JSONObject jsonObj=new JSONObject();
                   for (Iterator iterator = vec.iterator(); iterator
                        .hasNext();) {
                       Vector v = (Vector) iterator.next();
                       jsonObj.put((String)v.get(0),(String)v.get(1));
    
                }
                   out.println(jsonObj);
    Please advise on how to use proper JSON so that multi-select is populated with values?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Right off the bat, you do not have your root property set, and your json does not have this value either.

    see:
    http://docs.sencha.com/ext-js/4-1/#!...ta.reader.Json

    Scott.

  3. #3
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default use root property

    use root property


    Your json should have a root property as below:

    Code:
    {
    "items": [
    { "name": "54850", "value": "5.1(1t)d1(3)" }, ....
    ]
    }
    And set root property of your store to record values:

    Code:
    new Ext.data.JsonStore({
    url: 'http://abc.com/xyz', root: 'items', fields: ['name', 'value'], autoLoad: true
    });
    Don't forget to use "name" and "value" fields in your multiselect as valueField and displayField.

    Regards.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 2

Tags for this Thread