CODEWITHSUNDEEP
extjs
pravat
pravat

Reputation: 475

Creating Accordion layout items from datastore in extjs

I have a Panel whose layout is accordin. I have a datastore which gets the data from server in json format and maps to a model. The data I get is a list of that model. Now in my view, I need to access the store and get all the records, and for each record I need to create a Panel and add it to the parent Panel.

My Store

Ext.define('NOS.store.ResultGroupsStore', {
    extend: 'Ext.data.Store',
    requires : ['NOS.model.ResultGroup'], 
    model: 'NOS.model.ResultGroup',
    fields:['groupName'],
    alias: 'widget.resultStore',
//  autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'showResult.nos',
        reader: {
            type: 'json'
        }
    }
});

My View

Ext.require('Ext.panel.Panel');
Ext.define('NOS.view.ResultView' ,{
    extend: 'Ext.panel.Panel',
    alias:'widget.results',
    title: 'My title',
    layout:'accordion',
    items:null,
    initComponent : function() {
        console.log("reached in view initialise");
        results = Ext.create('NOS.store.ResultGroupsStore');
        results.load();
        results.each(function(aResultGroup, index) {
            console.log('Record ' + index);
        });
        console.log("End in view initialise");
        this.callParent(arguments);
    },
});

But it never enters the loop above. I am sure the data is loaded properly to the store because when I use a grid.Panel and map the columns it renders the data.

Please help!!

Upvotes: 0

Views: 1025

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

Store loading is asynchronous, when you you're iterating over the store, it hasn't loaded yet so the store is empty. You need to do it in the store callback.

Ext.require('Ext.panel.Panel');
Ext.define('NOS.view.ResultView' ,{
    extend: 'Ext.panel.Panel',
    alias:'widget.results',
    title: 'My title',
    layout:'accordion',
    items:null,
    initComponent : function() {
        var results = this.results = Ext.create('NOS.store.ResultGroupsStore');
        results.on('load', this.onStoreLoad, this, {
            single: true
        });
        results.load();
        this.callParent(arguments);
    },

    onStoreLoad: function() {
        this.store.each(function(rec){

        });
    }
});

Upvotes: 1

Related Questions