ST 2.1.1 [MVC] DataView not loading into TabPanel

[riyaad]

Hi guys,

I've started developing my app using the MVC architecture. I'm having problems loading my dataview into my tabpanel. Could anyone assist regarding this?

My code is ..

Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'maintabpanel',


    requires: [
        'MyApp.view.Schedule',
        'MyApp.view.Settings',
        'MyApp.view.About',
        'MyApp.view.Welcome'
    ],


    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',
//        layout: 'fit',


        items: [
            {
                title: 'Schedule',
                iconCls: 'bookmarks',


                items: [
                    {
                        xtype: 'titlebar',
                        docked: 'top',
                        title: 'Schedule'
                    },
                    {
                        xtype: 'listSchedulePage' // xtype: 'listSchedulePage',
                    }
                ]
            },
            {
                xtype: 'settings'
            },
            {
                xtype: 'about'
            },
            {
                xtype: 'welcome'
            }
        ]
    }
});

And ..

Ext.define('MyApp.view.Schedule', {
    extend: 'Ext.dataview.DataView',
    xtype: 'listSchedulePage',


    config: {
        padding: 5,
        itemTpl: '<b>{title}</b><p>{summary}</p>',
        emptyText: 'Empty!',


        listeners: {
            itemtap: function(dataview, index, target, record, e, options) {
                console.log('itemTap: ' + record.get('summary'));
            }
        }
    }
});

When calling the view directly as

Ext.Viewport.add(Ext.create('MyApp.view.Schedule'))

the view displays correctly. However when calling the tabpanel as

Ext.Viewport.add(Ext.create('MyApp.view.Main'))

the components (titlebar & icons etc) are rendered but no dataview

Any ideas?

[digeridoopoo]

My dataview works fine using xtype how you have used it, in mine I made sure the store it uses was set with the autoload config to true.

Or you could set it up so that the dataview has an id...then add a listener for the show of the dataview and do a mystore.load (not the correct syntax, check the store load method).

Let me know if that helps...

[riyaad]

Hi there, the store loads without fail. When loading only the dataview through

Ext.Viewport.add(Ext.create('MyApp.view.Schedule'))

the data displays as it should, however doing so through the tabpanel does not.

For some reason listSchedulePage is not being fired up in the tabpanel.

[riyaad]

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',


    config: {
        refs: {
            listSchedulePage: 'listSchedulePage'
        },
        control: {
            listSchedulePage: {
                show: 'loadSchedule'
            }
        }
    },
    loadSchedule: function() {
        console.log('Loading...'); // DOES NOT DISPLAY (when in TabPanel)
        var online  = Ext.getStore('onlineStore');
        var offline = Ext.getStore('offlineStore');


        offline.load();


        if (offline.getCount() == 0) {
            console.log('localStorage is empty');
            online.on({
                load: 'onOnlineStoreLoad',
                scope: this
            });
            online.load()
        }
        else {
            console.log('localStorage has ' + offline.getCount() + ' records');
        }


        this.getListSchedulePage().setStore(offline);
    },


    onOnlineStoreLoad: function() {
        var offline = Ext.getStore('offlineStore');
        var online  = Ext.getStore('onlineStore');


        online.each(function(item) {
            offline.add(item);
        });
        offline.sync();
    }
})

[riyaad]

Any help welcome.

[digeridoopoo]

That's odd...hopefully someone else can help you.

When you inspect the DOM when its in the tabpanel you see the dataview there, is it hidden? Tried setting a height / width / layout in the dataview config? What errors if any are you seeing in the console?

[riyaad]

When inspecting the DOM, the DataView's not there at all. Seems it not fired up. This is really weird. Think I'll test this on 2.0.0 for a consistent result test. Who knows?!?

[riyaad]

New Code (none MVC)

Tested on 2.0.0, 2.1.0 & 2.1.1 - same problem!

Ext.application({
    name: 'AppTest',


    launch: function() {


        // Model


        Ext.define('Movie',{
            extend: 'Ext.data.Model',
            config: {
                idProperty: 'slotid',
                fields:[
                    'slotid',
                    'title',
                    'summary'
                ],
                proxy: {
                    type: 'localstorage',
                    id: 'AppTest-Offline'
                }
            }
        });


        // Stores


        var offline = Ext.create('Ext.data.Store', {
            storeId: 'offlineStore',
            model: 'Movie'
        });


        var online = Ext.create('Ext.data.Store', {
            storeId: 'onlineStore',
            model: 'Movie',
            autoLoad: true,
            proxy: {
                type: 'jsonp',
                timeout: 10000,
                url: 'http://next24.tv/getdata',
                extraParams: {
                    bouquet: 'toptv'
                },
                reader: {
                    type: 'json',
                    rootProperty: 'MovieSchedule'
                }
            }
        });


        // List


        var schedule =  Ext.create('Ext.DataView',{
            padding: 5,
            store: online,
            itemTpl: '<b>{title}</b><p>{summary}</p>',
            emptyText: 'Empty!',


            listeners: {


                itemtap: function(dataview, index, target, record, e, options) {
                    console.log('itemTap: ' + record.get('summary'));
                },


                show: function(list, opts) { // changing to painted ==> app then works


                    if (offline.getCount() == 0) {
                        console.log('Zero');
                    }


                }


            }
        });


        // TabPanel


        Ext.create('Ext.tab.Panel', {


            defaults: {
                layout: 'fit'
            },


            fullscreen: true,
            tabBarPosition: 'bottom',


            items: [
                {
                    title: 'Schedule',
                    iconCls: 'bookmarks',
                    items: [
                        {
                            xtype: 'titlebar',
                            docked: 'top',
                            title: 'Schedule'
                        },
                        schedule
                    ]
                },
                {
                    title: 'Settings',
                    iconCls: 'settings',
                    items:[
                        {
                            xtype: 'titlebar',
                            docked: 'top',
                            title: 'Settings'
                        }
                    ]
                }
            ]
        })




    }
})

Can anyone explain why the 'show' doesn't work???

[digeridoopoo]

I wonder if it's a bug or not....I always use the painted event.

It seems that show is best used when a panel is hidden, then you show it later (like a hidden panel for example)....then the event is called