1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    mrmojorisin is on a distinguished road

      0  

    Default Unanswered: Problems with displaying a list in an overlay

    Unanswered: Problems with displaying a list in an overlay


    Hello!

    This is the code I assembled from several examples and tuts, in the console I dont get any errors, but the list isnt displayed at all.

    Here's what I did:
    views/Main.js

    Code:
    Ext.define('MyApp.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: ['Ext.TitleBar','Ext.Video','Ext.Button','Ext.data.Store','Ext.data.Model','Ext.List','Ext.MessageBox','Ext.picker.Picker','Ext.picker.Date','Ext.util.Grouper'],
        config: {
            tabBarPosition: 'bottom',
            items: [{
                title: 'Start',
                iconCls: 'tv',
                styleHtmlContent: true,
                scrollable: true,
                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Startpage',
                    items: [{
                        text: 'Video',
                        xtype: 'button',
                        ui: 'normal',
                        handler: function() {
                            if (!this.overlay) {
                                this.overlay = Ext.Viewport.add({
                                    xtype: 'panel',
                                    layout : 'fit',
                                    modal: true,
                                    hideOnMaskTap: true,
                                    showAnimation: {
                                        type: 'popIn',
                                        duration: 250,
                                        easing: 'ease-out'
                                    },
                                    hideAnimation: {
                                        type: 'popOut',
                                        duration: 250,
                                        easing: 'ease-out'
                                    },
                                    centered: true,
                                    width: Ext.os.deviceType == 'Phone' ? 260 : 400,
                                    height: Ext.os.deviceType == 'Phone' ? 220 : 400,
                                    items: [
                                        {
                                            docked: 'top',
                                            xtype: 'toolbar',
                                            title: 'Select Video'
                                        },
                                        {
    
                                            xtype: 'videolist'
                                        }
    
                                    ]
                                })
                            } this.overlay.show();
                        }
                    }
                ]
            },
            {
                xtype: 'video',
                            url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                            posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
            }
            ]
            },
            {
                title: 'Textpage',
                iconCls: 'note1',
                styleHtmlContent: true,
                scrollable: true,
                items:
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Textpage'
                },
                html: [
                    "<p>Some text</p>"
                ].join("")
            }]
        }
    });
    views/VideoList.js
    Code:
    Ext.define('MyApp.view.VideoList', {
        extend: 'Ext.List',
        xtype: 'videolist',
        requires: ['MyApp.store.VideoFiles],
        config: {
            title: 'Videos',
            grouped: false,
            itemTpl: '<div><strong>{vName}</strong></div>',
            store: 'VideoFiles',
            model: 'VideoItem',
            onItemDisclosure: true
        }
    });
    store/VideoFiles.js
    Code:
    Ext.define("MyApp.store.VideoFiles", {
        extend: 'Ext.data.Store',
        config: {
            autoLoad: true,
            model: 'MyApp.model.VideoItem',
            sorters: 'qId',
            grouper: function(record) {
                return record.get('qId')[0];
            },
            data: [
                {qId: '1', qName: 'Name1',qUrl: 'url1'},
                {qId: '2', qName: 'Name2',qUrl: 'url2'},
    {qId: '3', qName: 'Name3',qUrl: 'url3'},
    }
            ]
        }
    });
    model/VideoItem.js
    Code:
    Ext.define(MyApp.model.VideoItem', {
        extend: 'Ext.data.Model',
        config: {
            proxy: {
                id: 'VideoItem',
                access: 'public'
            },
            fields: ['qId', 'qName', 'qUrl']
        }
    });
    In the app.js I just referenced the new views, stores and models, except that, it's the same than in a freshly created app...

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Answers
    41
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    have you tried giving the list an explicit height?

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3462
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just from looking at this code it looks fine. The overlay gets a height and width and uses fit layout which should size the child list properly. Two debugging this you can do is ensure the store does have data in it (looks like you do have data, you can remove autoLoad as you are specifying local data) and inspect the DOM of the overlay to see what elements are causing issues.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    28
    Vote Rating
    0
    osolano is on a distinguished road

      0  

    Default


    I am experiencing the same issue. It seems straightforward, and everything other type of object seems to work except for the list.

    Code:
    Overlay.js
    Ext.define('MyApp.view.OverlayView', {
        extend: 'Ext.Container',
    
    
        config: {
            layout: {
                type: 'vbox'
            },
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    items: [
                        {
                            xtype: 'button',
                            id: 'overlaybutton_top',
                            itemId: 'button',
                            text: 'Overlay'
                        }
                    ]
                },
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    items: [
                        {
                            xtype: 'button',
                            id: 'overlaybutton_bottom',
                            itemId: 'button',
                            text: 'Overlay'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    centered: true,
                    items: [
                        {
                            xtype: 'button',
                            id: 'overlaybutton_center',
                            itemId: 'button',
                            text: 'Click for Overlay Button to Pop Up next to button'
                        }
                    ]
                }
            ],
            listeners: [
                {
                    fn: 'onOverlaybutton_topTap',
                    event: 'tap',
                    delegate: '#overlaybutton_top'
                }
            ]
        },
    
    
        onOverlaybutton_topTap: function(button, e, eOpts) {
    
    
            var samplePanel = button.samplePanel;
            if (!samplePanel) {
                samplePanel = button.samplePanel = Ext.widget('samplepanel');
            }
            samplePanel.showBy(button);
    
    
        }
    
    
    });
    Code:
    SamplePanel.js
    
    Ext.define('MyApp.view.SamplePanel', {
        extend: 'Ext.Panel',
        alias: 'widget.samplepanel',
    
    
        config: {
            fullscreen: true,
            hideOnMaskTap: true,
            layout: {
                type: 'fit'
            },
            modal: true,
            items: [
                {
                    xtype: 'list',
                    hideOnMaskTap: false,
                    modal: true,
                    itemTpl: [
                        '<div>{name}</div>'
                    ],
                    store: 'Samples'
                }
            ]
        }
    
    
    });

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    28
    Vote Rating
    0
    osolano is on a distinguished road

      0  

    Default


    After explicitly setting the width and height of the panel and list, the overlay shows fine, but I don't think this is an elegant solution.

  6. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    5
    Vote Rating
    1
    tapancse143 is on a distinguished road

      1  

    Default Please check the basics first

    Please check the basics first


    List cannot be visible if you will not give its proper height
    Also on overlay check the modal is true or not. if it is not then nothing will show on overlay.
    If you are giving fullscreen true and then arranging lists in layout vbox pattern then you must set flex too. So check these basics first.
    If still not working, then check if the srore is providing data or not
    console.log(list)
    console.log(store)
    Find if you are accessing the right list and store . If data is there in store and list not being shown then its a height issue. Hope you get the solutions.

    Thanks and Regards
    Tapan Kumar Pati
    Sencha Developer at Mindfire Solutions (www.mindfiresolutions.com)

  7. #7
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    28
    Vote Rating
    0
    osolano is on a distinguished road

      0  

    Default


    Thanks tapancse143. I've been setting the height and width of both the panel and list for all the overlays I've been using. Also, in order for the list to fit properly in the overlay, I've been setting the panel to be +10 pixels for both height and width relative to the list height and width. For example, I set the height and width to be 510 on the panel, and then set the list to be 500.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."