CODEWITHSUNDEEP
extjssencha-touch-2
Robertas Setkus
Robertas Setkus

Reputation: 3161

Sencha Touch 2. Empty list

Stores object is loaded dynamically via ajax request. While debugging in console I can see that Store object is filled with records but List is empty.

Code:

Viewport view

Ext.define('sample.views.Viewport', {
    extend: 'Ext.tab.Panel',

    title:   'Hello world!',

    xtype: 'viewport',

    config: {
        fullscreen: true,

        tabBar: {
            docked: 'bottom',
        },

        items: [
            { xclass: 'sample.views.wares.lists.Popular' },
        ]
    }
});

NavigationView view

Ext.define('sample.view.wares.lists.Popular', {
    extend: 'Ext.NavigationView',

    xtype: 'Popular',

    config: {       
        iconCls: 'home',
        title: 'Pop. prekės',

        items: [
            {
                xtype: 'wares',                                                         
            }
        ]   
    }
});

List view

Ext.define('sample.views.wares.lists.List', {
    extend: 'Ext.List',

    xtype: 'wares',

    config: {
        store: 'Wares', 
        itemTpl: '{Name}'
    },

    initialize: function () {
        this.config.title = sample.app.title;
    }
});

Store object of records which was dynamically loaded via Ajax request.

Ext.define('sample.store.Wares', {
    extend: 'Ext.data.Store',

    config: {
        model: "sample.models.WaresListItem"
    }
});

Result in Ripple emulator

Upvotes: 0

Views: 1027

Answers (3)

ThinkFloyd
ThinkFloyd

Reputation: 5021

initialize: function () {
    this.config.title = sample.app.title;
    this.callParent();
}

"this.callParent()" is important if you have initialize function, because it calls parent ('Ext.dataview.List' in your case) and ask it to do certain default things which are must for a List to construct. This is similar to calling super from constructor in java.

If you can move this to declaration block

this.config.title = sample.app.title;

and do it like this

config: {
    store: 'Wares', 
    itemTpl: '{Name}',
    title: sample.app.title
},

you would not need initialize block altogether

Upvotes: 1

Robertas Setkus
Robertas Setkus

Reputation: 3161

Several times reviewed sample application in official documentation and problem was solved by calling callParent function in initialize function. Don't know why yet.

initialize: function () {
    this.config.title = sample.app.title;
    this.callParent();
}

Upvotes: 0

Titouan de Bailleul
Titouan de Bailleul

Reputation: 12959

Most of time when you don't see an inner component it's because you haven't defined its container's layout.

Try to add a layout to your navigation view's config like below :

config: {       
    iconCls: 'home',
    title: 'Pop. prekės',
    layout: 'fit',
    items: [
        {
            xtype: 'wares',                                                         
        }
    ]   
}

Hope this helps

Also see : RDougan's answer here: How do I make a dataview.list visible in Sencha Touch 2?

Upvotes: 2

Related Questions