1. 26 Aug 2012 4:59 PM #1
    yencarnacion
    yencarnacion is offline
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    0
    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');
//                    }
                }
            }
        ]
    }
});
    Reply With Quote Reply With Quote
  2. Best Answer Posted by yencarnacion

    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. 28 Aug 2012 4:47 AM #2
    mitchellsimoens
    mitchellsimoens is online now
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,665
    Vote Rating
    435
    Answers
    3109
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      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
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    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 almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  4. 28 Aug 2012 5:21 AM #3
    yencarnacion
    yencarnacion is offline
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    0
    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               |
------------------------------------
    Reply With Quote Reply With Quote
  5. 28 Aug 2012 5:46 AM #4
    mitchellsimoens
    mitchellsimoens is online now
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,665
    Vote Rating
    435
    Answers
    3109
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      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
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    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 almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  6. 29 Aug 2012 7:36 PM #5
    yencarnacion
    yencarnacion is offline
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    0
    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');
//                    }
                }
            }
        ]
    }
});
    Reply With Quote Reply With Quote
  7. 30 Aug 2012 3:41 AM #6
    mitchellsimoens
    mitchellsimoens is online now
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,665
    Vote Rating
    435
    Answers
    3109
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      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
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    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 almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  8. 30 Aug 2012 7:58 AM #7
    yencarnacion
    yencarnacion is offline
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    0
    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
    Reply With Quote Reply With Quote
  9. 30 Aug 2012 1:16 PM #8
    yencarnacion
    yencarnacion is offline
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    0
    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
    Reply With Quote Reply With Quote
  10. 30 Aug 2012 3:44 PM #9
    yencarnacion
    yencarnacion is offline
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    0
    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.
    Reply With Quote Reply With Quote
  11. 31 Aug 2012 6:09 PM #10
    yencarnacion
    yencarnacion is offline
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    San Juan, PR
    Posts
    27
    Vote Rating
    0
    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'
        }
    }


});
    Reply With Quote Reply With Quote