Results 1 to 5 of 5

Thread: Picker JSON data binding

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    2

    Default Answered: Picker JSON data binding

    Is it possible to bind JSON data to a picker control? The data that is coming back from my WCF service is in the JSON format of:

    {"EffectiveDate":"11\/10\/2011","EndDate":"11\/10\/2012","Id":"51700","Number":"303349","OriginalEffectiveDate":"11\/10\/2011","RecalcA":"n","RecalcE":"n","RecalcR":"n"}

    I want to create a store and then bind the store to the picker control. How can I go about doing this?

    Here is the code I have for creating the store:
    Code:
    // Set up a model to use in our Store
    Ext.regModel('Periods', {
        fields: [
            { name: 'EffectiveDate', type: 'string' },
            { name: 'EndDate', type: 'string' },
            { name: 'Id', type: 'string' },
            { name: 'Number', type: 'string' },
            { name: 'OriginalEffectiveDate', type: 'string' },
            { name: 'RecalcA', type: 'string' },
            { name: 'RecalcE', type: 'string' },
            { name: 'RecalcN', type: 'string' }
        ]
    });
    
    
     var periodStore = Ext.create('Ext.data.Store', {
        model: 'Periods',
        proxy: {
            type: 'ajax',
            url: 'private url',
            reader: 'json'
        },
        autoLoad: true
    });
    And here is the code I have for the picker:
    Code:
                var picker = Ext.create('Ext.Picker', {
                    slots: [
                    {
                        name: 'policy_periods',
                        useTitles: true,
                        title: 'Periods',
                        store: periodStore
                    }
                ],
                listeners: {
                    change: {
                            element: 'el', //bind to the underlying el property on the panel
                            fn: function () { console.log('click el'); }
                    }
                }
                });
    I am not getting any data shown in the picker.

    Any help is appreciated.

  2. Please use [code] tags when posting code.

    As for the issue, please ensure your Store actually has data in it. You can do this by using something like this below in your browser console (after the store has had time to load):

    Code:
    periodStore.getCount()
    If it returns 0, then it has no data and there is an issue with your store/proxy/model. If it has a number, then that is not the issue.

    Next, 'Ext.picker.Slot' extends 'Ext.dataview.Dataview', so to accurately display the data, you will need to setup the 'displayField' config in your slot configuration:

    Code:
    var picker = Ext.create('Ext.Picker', {
        slots: [
            {
                name: 'policy_periods',
                useTitles: true,
                title: 'Periods',
                store: periodStore,
                displayField: 'EffectiveDate'
            }
        ],
        listeners: {
            change: function() {
                console.log('changed!');
            }
        }
    });
    (Also, you don't need the 'element' property when listening to the change event.)

    With those two issues fixed, you should be good to go.

  3. #2
    Sencha User
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93

    Default

    Please use [code] tags when posting code.

    As for the issue, please ensure your Store actually has data in it. You can do this by using something like this below in your browser console (after the store has had time to load):

    Code:
    periodStore.getCount()
    If it returns 0, then it has no data and there is an issue with your store/proxy/model. If it has a number, then that is not the issue.

    Next, 'Ext.picker.Slot' extends 'Ext.dataview.Dataview', so to accurately display the data, you will need to setup the 'displayField' config in your slot configuration:

    Code:
    var picker = Ext.create('Ext.Picker', {
        slots: [
            {
                name: 'policy_periods',
                useTitles: true,
                title: 'Periods',
                store: periodStore,
                displayField: 'EffectiveDate'
            }
        ],
        listeners: {
            change: function() {
                console.log('changed!');
            }
        }
    });
    (Also, you don't need the 'element' property when listening to the change event.)

    With those two issues fixed, you should be good to go.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    2

    Default

    Thanks for the help. I found the problem. My store was not getting populated. The REST service was working and would return values in Chrome, but when looking with Sencha, it was getting the error: XXX not allowed by Access-Control-Allow-Origin. I changed the proxy type to scripttag and that solved the problem. It is working!

    Thanks!

  5. #4
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    2

    Default Store configuration for picker slot not available in Architect

    Robert,

    How can you set the store for the slot in Architect?
    I'm not able to see the option....

    Thanks!

  6. #5
    Sencha User
    Join Date
    Mar 2013
    Location
    Ahmedabad, India
    Posts
    15
    Answers
    1

    Default

    Hi nicoalsechavarria ,

    yes you are right,

    There is no store config for picker, even we can not do anything after given store config to it. if you want then
    you have to do picker.down('dataview') & then you can assign store.

    Thanks,
    Piyush Dholariya

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •