sencha touch accordion list not loading data

Question

I can't figure out why my data won't load to my AccordionList element from here: https://github.com/kawanoshinobu/Ext.ux.AccordionList

I'm creating it within a panel like so:

{
    xtype: 'accordionlist',
    store: Ext.create('Rks.store.Bcks'),
    flex: 1
},

It calls a store which is defined like so:

Ext.define('Rks.store.Bcks', {
    extend: 'Ext.data.TreeStore',
    requires: ['Rks.model.Bck'],
    config: {
        itemId: 'bks',
        model: 'Rks.model.Bck',
        defaultRootProperty: 'items',
        proxy: {
            type: 'ajax',
            url: 'path/to/ajax',
        },
        autoLoad: false,
        listeners:{
            load: function( me, records, successful, operation, eOpts ){
                console.log("data loaded", records);
            } 
        }
     }
});

When I call the view which contains the accordion, the console logs what appears to be a good object:

items: [{bck_id:3, author_id:1, title:test, items:[{c_id:2, bck_id:3, title:choice1, leaf:true}]}]

But nothing shows up. The panel is empty and no accordion items show.

However, when I replace the proxy with inline JSON, everything looks fine:

Ext.define('Rks.store.Bcks', {
    extend: 'Ext.data.TreeStore',
    requires: ['Rks.model.Bck'],
    config: {
        itemId: 'bks',
        model: 'Rks.model.Bck',
        defaultRootProperty: 'items',
        root: {
            items: [
                    { bck_id: 1, author_id: 1, title: 'bck1', items: [ {c_id: 1, bck_id: 1, title: 'choice1', leaf: true} ] }
                ]
        }
        autoLoad: false,
        listeners:{
            load: function( me, records, successful, operation, eOpts ){
                 console.log("data loaded", records);
            } 
        }
    }
});

Here the items show up in the accordion. I can't figure out why the second example works and the first doesn't. Is there something special I should be doing when calling the store proxy for Accordion?

UPDATE: I have managed to get the accordion list to display data, but when I change the url of the store and reload it, the store reloads but the accordion list does not update. The accordion list continues to display the data it receives from the first URL, not from reloads with modified URLS.

Thanks

Answer 1

I think I figured this out. For the accordionlist component, you need to do like so:

                var accordionlist = Ext.ComponentQuery.query('rdb #rdb1')[0];
                var brickstore = Ext.getStore('bcs');
                bcs.removeAll();
                bcs.getProxy().setUrl('newurl');
                accordionlist.setStore(bcs);
                accordionlist.load();

basically, manually remove all items, set the new url, set the store on the list, then load the list.