1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    2
    Answers
    1
    yencarnacion is on a distinguished road

      0  

    Default Answered: List inside Tab Panel not rendering

    Answered: List inside Tab Panel not rendering


    I have a Ext.dataview.List inside a Ext.tab.Panel which in turn is inside a Ext.Container. I know the list is being instantiated because I have a json request in the list and I can verify that the json request is happening. However, the list is not rendering. I believe that the problem is associated with the layout property as in this http://www.sencha.com/forum/showthre...of-a-TabPanel& but I have not been able to solve my issue. Any help would be appreciated.

    Thanks.

    My Main looks like
    Code:
    Ext.define('NG.view.Main', {
        extend: 'Ext.Container',
    
        requires: [
            'Ext.TitleBar', 'NG.view.LoteriaTabs'
            ],
        config: {
            fullscreen: true
        }
    });
    This is turn is extended in a phone and tablet profile in the following manner:
    Code:
    Ext.define('NG.view.phone.Main', {
        extend: 'NG.view.Main',
        xtype: 'mainview',
    
        config: {
            fullscreen: true,
    
            items: [
                {   xtype: 'titlebar',
                    title: 'Lotería-PR'
                },
                {
                    docked: 'bottom',
                    xtype: 'loteriatabs'
                }
            ]
        }
    });
    xtype "loteriatabs" is a tab panel that looks like:
    Code:
    Ext.define('NG.view.LoteriaTabs', {
        extend: 'Ext.tab.Panel',
        xtype: 'loteriatabs',
        requires: [
            'NG.view.LoteriaElectronicaPanel',
            'NG.view.LoteriaTradicionalPanel',
            'NG.view.IvuLotoPanel'
        ],
        config: {
            tabBarPosition: 'bottom',
            items: [
                {
                    layout: 'fit',
                    xtype: 'numeroswithpicker'
                },
                {
                    xtype: 'loteriatradicionalpanel'
                },
                {
                    xtype: 'ivulotopanel'
                }
            ]
        }
    });
    the list that is not rendering is xtype "numeroswithpicker" that looks like so:
    Code:
    Ext.define('NG.view.NumerosWithPicker',{
        extend: 'Ext.dataview.List',
        xtype: 'numeroswithpicker',
    
        requires: ['NG.view.PickerBar', 'NG.store.LoteriaElectronicaStore'],
    
        config: {
            title: 'Electrónica',
            iconCls: 'home',
            layout: 'fit'
        },
        initialize: function() {
            this.callParent();
    
            this.listComponent = Ext.create('Ext.List', {
    
                itemTpl: '{gameName} {gameWinner}',
                store: {
                    autoLoad: true,
                    fields: ['gameName', 'gameWinner', 'gameDate', 'gameDraw', 'gameNapa'],
                    proxy: {
                        type: 'jsonp',
                        //url: '../../api/loteria/2012/08/17/.json',
                        url: 'http://localhost:8080/server/api/loteria/2012/08/17/.json',
                        reader: {
                            type: 'json',
                            rootProperty: 'winners.games'
                        }
                    }
                }
            });
    
            this.add([
                {
                    docked: 'top',
                    xtype: 'pickerbar',
                    height: 100
                },
                this.listComponent
            ]);
        }
    })
    finally, xtype "pickerbar" is a toolbar with a datepickerfield and a title that I want to appear on top of the list. It looks as follows:
    Code:
    Ext.define('NG.view.PickerBar', {
        extend: 'Ext.Toolbar',
        xtype : 'pickerbar',
        requires: ['Ext.field.DatePicker'],
    
        config: {
            layout : {
                type  : 'vbox',
                align : 'stretch'
            },
    
            items: [
                {
                    xtype: 'title',
                    title: 'Numeros Ganadores'
                },
                {
                    xtype: 'datepickerfield',
                    destroyPickerOnHide: true,
                    name: 'date',
                    label: 'Date',
                    value: new Date(),
                    picker: {
                        yearFrom: new Date().getFullYear() - 1
                    },
                    listeners: {
    //                    initialize: function(list, opts){
    //                        Ext.Msg.alert('buh','teste');
    //                    },
    //                    change: function(picker, date){
    //                        Ext.Msg.alert('buh2','teste2');
    //                    }
                    }
                }
            ]
        }
    });

  2. I downloaded Sencha Architect 2. With its help, I was able to try different combinations until I got the look that I wanted. I am posting the main file below in case someone else has a similar issue.

    I am probably purchasing Sencha Architect once my trial is over.

    I will probably have other questions regarding what I want to accomplish but my original question that started this thread is answered.


    Code:
    Ext.define('NG.view.LoteriaMain', {
        extend: 'Ext.tab.Panel',
    
    
        config: {
            fullscreen: false,
            items: [
                {
                    xtype: 'titlebar',
                    docked: 'top',
                    scrollable: false,
                    title: 'Lotería-PR'
                },
                {
                    xtype: 'list',
                    title: 'Eléctronica',
                    iconCls: 'info',
                    itemTpl: [
                        '{gameName}-{gameWinner}'
                    ],
                    store: 'LoteriaElectronicaStore',
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            height: 92,
                            title: '',
                            items: [
                                {
                                    xtype: 'titlebar',
                                    docked: 'top',
                                    title: 'Números Ganadores'
                                },
                                {
                                    xtype: 'datepickerfield',
                                    label: 'Field',
                                    placeHolder: 'mm/dd/yyyy'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    title: 'Tradicional',
                    iconCls: 'info'
                },
                {
                    xtype: 'panel',
                    title: 'IVU-Loto',
                    iconCls: 'info'
                }
            ],
            tabBar: {
                docked: 'bottom'
            }
        }
    
    
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    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


    I don't understand your NG.view.NumerosWithPicker component. It's a List and you are trying to add a List to it?
    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. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    2
    Answers
    1
    yencarnacion is on a distinguished road

      0  

    Default NG.view.NumerosWithPicker component

    NG.view.NumerosWithPicker component


    Mitchell,

    Thanks for the reply. In answer to you question. Yes. The NG.view.NumerosWithPicker is a list that I am trying to add a list to (with this.listComponent = Ext.Create('Ext.List...)) with a toolbar (NG.view.PickerBar). The list's toolbar has a datepickerfield and a title. The diagram below is was meant to give you an idea of what I want the app to look like.


    Code:
    ------------------------------------
    |            App Title             |
    ------------------------------------
    |             Toolbar Title        |
    |             datepickerfield      |
    ------------------------------------
    |                                  |
    |                                  |
    |                                  |
    |                                  |
    |     List with data               |
    |                                  |
    |                                  |
    |                                  | 
    |                                  |
    ------------------------------------
    |     Tab Panel Tabs               |
    ------------------------------------
    

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    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


    You shouldn't be adding a list to a list. If you want a toolbar just add the toolbar but don't add a list to a list (and remove the layout configs from the list)
    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.

  6. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    2
    Answers
    1
    yencarnacion is on a distinguished road

      0  

    Default I did as you suggested

    I did as you suggested


    Mitchell,


    I did as you suggested but I still do not see the content of the list.


    Here is what I did.


    The main now just points to list.
    Code:
    Ext.define('NG.view.phone.Main', {
       extend: 'NG.view.Main',
       xtype: 'mainview',
    
    
       config: {
            items: [
                {
                    xtype: 'numeroswithpicker'
                }
            ]
        }
    });

    The list now looks like this:
    Code:
    Ext.define('NG.view.NumerosWithPicker',{
        extend: 'Ext.dataview.List',
        xtype: 'numeroswithpicker',
    
    
        requires: ['NG.view.PickerBar'],
    
    
        config: {
            itemTpl: '{gameName} {gameWinner}',
            store: {
                autoLoad: true,
                fields: ['gameName', 'gameWinner', 'gameDate', 'gameDraw', 'gameNapa'],
    //                data: [ ['loto', '1-2-3-4-5-6', '1/1/2001', '1', '']]
                proxy: {
                    type: 'jsonp',
                    //url: '../../api/loteria/2012/08/17/.json',
                    url: 'http://localhost:8080/server/api/loteria/2012/08/17/.json',
                    reader: {
                        type: 'json',
                        rootProperty: 'winners.games'
                    }
                }
            },
            items: [
                {
                    docked: 'top',
                    xtype: 'pickerbar',
                    height: 100
                }
            ]
        }
    })

    The xtype pickerbar looks as follow:
    Code:
    Ext.define('NG.view.PickerBar', {
        extend: 'Ext.Toolbar',
        xtype : 'pickerbar',
        requires: ['Ext.field.DatePicker'],
    
    
        config: {
            layout : {
                type  : 'vbox',
                align : 'stretch'
            },
    
    
            items: [
                {
                    xtype: 'title',
                    title: 'Numeros Ganadores'
                },
                {
                    xtype: 'datepickerfield',
                    destroyPickerOnHide: true,
                    name: 'date',
                    label: 'Date',
                    value: new Date(),
                    picker: {
                        yearFrom: new Date().getFullYear() - 1
                    },
                    listeners: {
    //                    initialize: function(list, opts){
    //                        Ext.Msg.alert('buh','teste');
    //                    },
    //                    change: function(picker, date){
    //                        Ext.Msg.alert('buh2','teste2');
    //                    }
                    }
                }
            ]
        }
    });

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    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


    I see you are using jsonp proxy and loading against a json file. I'm sure the json file isn't returning valid JsonP and you are likely having an error correct?
    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.

  8. #7
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    2
    Answers
    1
    yencarnacion is on a distinguished road

      0  

    Default


    Mitchell,


    There does not appear to be an error on the jsonp request.
    Here is what is being returned on the json request:
    Code:
    Ext.data.JsonP.callback1({"winners":{"games":[{"gameName":"pega2","gameWinner":"12","gameDate":"2012-08-17T04:00:00Z","gameDraw":2534,"gameNapa":""},{"gameName":"pega3","gameWinner":"595","gameDate":"2012-08-17T04:00:00Z","gameDraw":4270,"gameNapa":""},{"gameName":"pega4","gameWinner":"5553","gameDate":"2012-08-17T04:00:00Z","gameDraw":2534,"gameNapa":""},{"gameName":"loto","gameWinner":"1-22-26-27-39-43","gameDate":"2012-08-17T04:00:00Z","gameDraw":1637,"gameNapa":""},{"gameName":"revancha","gameWinner":"8-20-22-24-40-41","gameDate":"2012-08-17T04:00:00Z","gameDraw":1637,"gameNapa":""},{"gameName":"multiplicador","gameWinner":"2","gameDate":"2012-08-17T04:00:00Z","gameDraw":1637,"gameNapa":""}]}})

    Here is what I see on the javascript console:
    Code:
    Resource interpreted as Script but transferred with MIME type text/html:
     "http://localhost:8080/server/api/loteria/2012/08/17/.json?_dc=1346337524010&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1". sencha-touch-debug.js:12440
    Ext.dom.Element.addMembers.appendChild sencha-touch-debug.js:12440
    Ext.define.loadScript JsonP.js:288
    Ext.define.request JsonP.js:163
    Ext.define.doRequest JsonP.js:197
    Ext.define.read Server.js:161
    Ext.define.load Store.js:1680
    Ext.define.updateAutoLoad Store.js:720
    Ext.apply.generateSetter.setter sencha-touch-debug.js:5196
    Base.implement.initConfig sencha-touch-debug.js:4663
    Ext.define.constructor Store.js:557
    Ext.apply.create.Class sencha-touch-debug.js:4916
    (anonymous function)
    Ext.ClassManager.instantiate sencha-touch-debug.js:6388
    Ext.apply.factory sencha-touch-debug.js:9370
    Ext.define.lookup StoreManager.js:100
    Ext.define.applyStore DataView.js:715
    Ext.apply.generateSetter.setter sencha-touch-debug.js:5189
    Base.implement.initConfig sencha-touch-debug.js:4663
    Ext.define.constructor Component.js:929
    Base.implement.callParent sencha-touch-debug.js:4521
    Ext.define.override.constructor Component.js:2478
    Base.implement.callParent sencha-touch-debug.js:4521
    Ext.define.constructor Container.js:349
    Base.implement.callParent sencha-touch-debug.js:4521
    override.constructor Container.js:1485
    Base.implement.callParent sencha-touch-debug.js:4521
    Ext.define.constructor DataView.js:436
    Base.implement.callParent sencha-touch-debug.js:4521
    Ext.define.constructor List.js:198
    Ext.apply.create.Class sencha-touch-debug.js:4916
    (anonymous function)
    Ext.ClassManager.instantiate sencha-touch-debug.js:6388
    Ext.ClassManager.instantiateByAlias sencha-touch-debug.js:6306
    Ext.apply.factory sencha-touch-debug.js:9352
    Ext.define.factoryItem Container.js:599
    Ext.define.add Container.js:671
    Base.implement.callParent sencha-touch-debug.js:4521
    override.add Container.js:1524
    Ext.define.applyItems Container.js:517
    Ext.apply.generateSetter.setter sencha-touch-debug.js:5189
    Ext.apply.generateInitGetter sencha-touch-debug.js:5222
    Ext.define.applyActiveItem Container.js:1181
    (anonymous function) Evented.js:23
    Base.implement.initConfig sencha-touch-debug.js:4663
    Ext.define.constructor Component.js:929
    Base.implement.callParent sencha-touch-debug.js:4521
    Ext.define.override.constructor Component.js:2478
    Base.implement.callParent sencha-touch-debug.js:4521
    Ext.define.constructor Container.js:349
    Base.implement.callParent sencha-touch-debug.js:4521
    override.constructor Container.js:1485
    Ext.apply.create.Class sencha-touch-debug.js:4916
    (anonymous function)
    Ext.ClassManager.instantiate sencha-touch-debug.js:6388
    (anonymous function) sencha-touch-debug.js:3195
    Ext.define.launch Tablet.js:14
    Ext.define.onDependenciesLoaded Application.js:598
    Ext.apply.require sencha-touch-debug.js:7790
    (anonymous function) sencha-touch-debug.js:3195
    Ext.define.loadControllerDependencies Application.js:567
    Ext.apply.refreshQueue sencha-touch-debug.js:7539
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.refreshQueue sencha-touch-debug.js:7540
    Ext.apply.onFileLoaded sencha-touch-debug.js:7863
    (anonymous function) sencha-touch-debug.js:3181
    Ext.apply.injectScriptElement.onLoadFn

  9. #8
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    2
    Answers
    1
    yencarnacion is on a distinguished road

      0  

    Default


    Mitchell,


    There does not appear to be an error on the jsonp request.


    However I get the following message on the javascript console
    Code:
    Resource interpreted as Script but transferred with MIME type text/html:
     "http://localhost:8080/server/api/loteria/2012/08/17/.json?_dc=1346337524010&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1".

    PS. I had posted a more detailed response but it apparently won't make it past the spam moderator

  10. #9
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    2
    Answers
    1
    yencarnacion is on a distinguished road

      0  

    Default


    I changed the server controller that generates the json response to return application/json as the mime type (I also tried application/javascript). That got rid of the message but this not solve the problem that I cannot see the returned data in the list.

  11. #10
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    2
    Answers
    1
    yencarnacion is on a distinguished road

      0  

    Default I was able to get what I wanted

    I was able to get what I wanted


    I downloaded Sencha Architect 2. With its help, I was able to try different combinations until I got the look that I wanted. I am posting the main file below in case someone else has a similar issue.

    I am probably purchasing Sencha Architect once my trial is over.

    I will probably have other questions regarding what I want to accomplish but my original question that started this thread is answered.


    Code:
    Ext.define('NG.view.LoteriaMain', {
        extend: 'Ext.tab.Panel',
    
    
        config: {
            fullscreen: false,
            items: [
                {
                    xtype: 'titlebar',
                    docked: 'top',
                    scrollable: false,
                    title: 'Lotería-PR'
                },
                {
                    xtype: 'list',
                    title: 'Eléctronica',
                    iconCls: 'info',
                    itemTpl: [
                        '{gameName}-{gameWinner}'
                    ],
                    store: 'LoteriaElectronicaStore',
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            height: 92,
                            title: '',
                            items: [
                                {
                                    xtype: 'titlebar',
                                    docked: 'top',
                                    title: 'Números Ganadores'
                                },
                                {
                                    xtype: 'datepickerfield',
                                    label: 'Field',
                                    placeHolder: 'mm/dd/yyyy'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    title: 'Tradicional',
                    iconCls: 'info'
                },
                {
                    xtype: 'panel',
                    title: 'IVU-Loto',
                    iconCls: 'info'
                }
            ],
            tabBar: {
                docked: 'bottom'
            }
        }
    
    
    });

Thread Participants: 1