1. #1
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Answers
    6
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default Unanswered: ST 2.1.1 [MVC] DataView not loading into TabPanel

    Unanswered: ST 2.1.1 [MVC] DataView not loading into TabPanel


    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 ..
    Code:
    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 ..

    Code:
    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

    Code:
    Ext.Viewport.add(Ext.create('MyApp.view.Schedule'))
    the view displays correctly. However when calling the tabpanel as

    Code:
    Ext.Viewport.add(Ext.create('MyApp.view.Main'))
    the components (titlebar & icons etc) are rendered but no dataview

    Any ideas?

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    386
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default My dataview works

    My dataview works


    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...

  3. #3
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Answers
    6
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default


    Hi there, the store loads without fail. When loading only the dataview through
    Code:
    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.

  4. #4
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Answers
    6
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default I've added the controller

    I've added the controller


    Code:
    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();
        }
    })

  5. #5
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Answers
    6
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default Anyone?

    Anyone?


    Any help welcome.

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    386
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Weird...

    Weird...


    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?

  7. #7
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Answers
    6
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default


    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?!?

  8. #8
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Answers
    6
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default Looks like the show event might be broken =(

    Looks like the show event might be broken =(


    New Code (none MVC)

    Tested on 2.0.0, 2.1.0 & 2.1.1 - same problem!

    Code:
    
    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???

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    386
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Not sure if bug or not?

    Not sure if bug or not?


    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

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar