1. #1
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    Hamburg - Germany
    Posts
    69
    Vote Rating
    1
    isaid is on a distinguished road

      0  

    Default combobox dispayFiled from a store

    combobox dispayFiled from a store


    Hallo,
    when i have a field.select from sencha touch that takes his displayFiled from a store, and then start the app, the Field.Select shows automatic the first record from the Store.
    If i do the same in ext.js 4.2 but with a Filed.comboBox, it shows an empty combobox, only if you click on it it will show you the records.
    What shall i do to let the combobox shows the first record from the store when i start the app?
    thanks
    isaid

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,982
    Vote Rating
    182
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    There's not an out of the box way to do that in ExtJS. But, it can be done. In the snippet below is a listeners config for the combo. After the combo is rendered its store's datachanged event is relayed to the combo and the store is loaded(). The datachanged event listener takes the first record in the store and sets the combo's value using that record.

    Code:
        listeners: {
            afterrender: function (field) {
                field.relayEvents(field.getStore(), ['datachanged']);
                field.getStore().load();
            }
            , datachanged: {
                fn: function (store) {
                    this.setValue(store.first().get(this.valueField));
                }
                , single: true
            }
        }

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    Hamburg - Germany
    Posts
    69
    Vote Rating
    1
    isaid is on a distinguished road

      0  

    Default


    would you pls. give more spesific example of this, cause i am working with Architect and Architect doesnot allow to edit the main files, if i add an event binding so it looks different than what you wrote:
    Code:
    listeners: {
                                    afterrender: {
                                        fn: me.onComboboxAfterRender,
                                        scope: me
                                    }
                                }
    and if i added a function to the combobox it looks different too:
    Code:
    items: [                        {
                                xtype: 'combobox',
                                afterrender: function(field) {
    
    
                                },
    and this part, do not know how to get it in Architect:
    Code:
    datachanged: {
                fn: function (store) {                this.setValue(store.first().get(this.valueField));            }            , single: true         }

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,982
    Vote Rating
    182
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    The snippet I posted works if applied to a combobox, but I'm not as practiced in Architect at this point. I'm moving the thread over to the Architect forum to allow the Architect community an opportunity to weigh in.

  5. #5
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    550
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    Haven't tested the solution to your actual problem, but I can show you how to set this up in SA in this screen-cast:
    http://screencast.com/t/qzfsqw1tTzhv

    Cheers,
    /Mattias

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    Hamburg - Germany
    Posts
    69
    Vote Rating
    1
    isaid is on a distinguished road

      0  

    Default


    thanks Mattias for replay, i did the same steps like you did in the screencast, then i get an error "Cannot call method 'indexOf' of undefined" and the the application looks broken.

  7. #7
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    550
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    As I said - no clue about what you are trying to achieve, just showing how to do it in Architect.
    I'd check all the valueFields and Store Models to make sure they match. Add debug in datachanged to make sure that you try searching for the right value, make sure the Store is loaded is another thing I'd check. Break down the chain of getting values into the ComboBox and verify each step is my advise.

    Best of luck,
    /Mattias

  8. #8
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    Hamburg - Germany
    Posts
    69
    Vote Rating
    1
    isaid is on a distinguished road

      0  

    Default


    the store works well with the model and the datafileds, because the combobox shows the data in a write way when i start the app, it is about showing the firtsdatafield when it gets renderd, it shows instead the emptytext.
    I made a test with Architect, the cobobox works well with the store, but as soon as i move the comments sign (//....) from the eventindings, it give an error.
    http://www.ing-said.de/test.zip

Thread Participants: 2