Hybrid View

  1. #1
    Sencha User
    Join Date
    Aug 2010
    Location
    Huntsville, Alabama
    Posts
    13
    Vote Rating
    2
    jeffyt is on a distinguished road

      0  

    Default List with detail panel inside a tabpanel, is it possible?

    List with detail panel inside a tabpanel, is it possible?


    I am trying to build an application that has the following structure:

    MyTabPanel (TabPanel)
    --Players (Panel 1st Tab)
    -----playerList (List with itemtap event to display playerPreview)
    -----playerDetail (Panel)
    --LocationTab (TabPanel)
    --AboutTab(TabPanel)

    I want to put a list inside a tabpanel that can display a detail panel, is this possible?

    I have enclosed my .xda file of what I have so far. If I move the playerList to out of the tabpanel and make it initial it works.

    Any help would be appreciated. I am stuck until I get this figured out.

    app.js
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    
    Ext.application({
        models: [
            'PlayerModel'
        ],
        stores: [
            'PlayerStore'
        ],
        views: [
            'MyTabPanel'
        ],
        name: 'team',
    
    
        launch: function() {
    
    
            Ext.create('team.view.MyTabPanel', {fullscreen: true});
        }
    
    
    });
    MyTabPanel.js
    Code:
    /*
     * File: app/view/MyTabPanel.js
     *
     * This file was generated by Sencha Architect version 2.0.0.
     * http://www.sencha.com/products/architect/
     *
     * This file requires use of the Sencha Touch 2.0.x library, under independent license.
     * License of Sencha Architect does not include license for Sencha Touch 2.0.x. For more
     * details see http://www.sencha.com/license or contact license@sencha.com.
     *
     * This file will be auto-generated each and everytime you save your project.
     *
     * Do NOT hand edit this file.
     */
    
    
    Ext.define('team.view.MyTabPanel', {
        extend: 'Ext.tab.Panel',
    
    
        config: {
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'card'
                    },
                    title: 'Players',
                    iconCls: 'team',
                    items: [
                        {
                            xtype: 'list',
                            itemId: 'playerList',
                            itemTpl: [
                                '<div>{lName}, {fName}</div>'
                            ],
                            store: 'PlayerStore',
                            grouped: true,
                            indexBar: true
                        },
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            title: 'Players',
                            items: [
                                {
                                    xtype: 'button',
                                    hidden: true,
                                    itemId: 'Back',
                                    ui: 'back',
                                    text: 'Back'
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            id: 'playerPreview',
                            itemId: 'playerPreview',
                            padding: '10px',
                            tpl: [
                                '<div><b>Personal Details</b></div>',
                                '<div>{lName}, {fName}</div>',
                                '<div>{addr1}</div>',
                                '<div>{addr2}</div>',
                                '<div>{city} {state}, {zip}</div>',
                                '</br>',
                                '<div><b>Positions</b></div>',
                                '<div>Primary: {mainPosition}</div>',
                                '<div>Secondary: {secPosition}</div>'
                            ],
                            scrollable: true
                        }
                    ]
                },
                {
                    xtype: 'container',
                    itemId: 'LocationTab',
                    layout: {
                        type: 'fit'
                    },
                    title: 'Locations',
                    iconCls: 'maps',
                    items: [
                        {
                            xtype: 'map',
                            style: '',
                            useCurrentLocation: true
                        }
                    ]
                },
                {
                    xtype: 'container',
                    itemId: 'AboutTab',
                    title: 'About',
                    iconCls: 'info'
                }
            ],
            tabBar: {
                docked: 'bottom'
            },
            listeners: [
                {
                    fn: 'onPlayerListItemTap',
                    event: 'itemtap',
                    delegate: '#playerList'
                },
                {
                    fn: 'onBackTap',
                    event: 'tap',
                    delegate: '#Back'
                }
            ]
        },
    
    
        onPlayerListItemTap: function(dataview, index, target, record, e, options) {
    
    
            this.setActiveItem(1);
    
    
            this.down("#Back").show();
    
    
            this.down("#playerPreview").setData(record.data);
    
    
        },
    
    
        onBackTap: function(button, e, options) {
    
    
    
    
            button.hide();
    
    
            this.setActiveItem(0);
    
    
            this.down("#playerList").deselectAll();
    
    
        }
    
    
    });
    PlayerStore.js
    Code:
    /*
     * File: app/store/PlayerStore.js
     *
     * This file was generated by Sencha Architect version 2.0.0.
     * http://www.sencha.com/products/architect/
     *
     * This file requires use of the Sencha Touch 2.0.x library, under independent license.
     * License of Sencha Architect does not include license for Sencha Touch 2.0.x. For more
     * details see http://www.sencha.com/license or contact license@sencha.com.
     *
     * This file will be auto-generated each and everytime you save your project.
     *
     * Do NOT hand edit this file.
     */
    
    
    Ext.define('team.store.PlayerStore', {
        extend: 'Ext.data.Store',
        requires: [
            'team.model.PlayerModel'
        ],
    
    
        config: {
            autoLoad: true,
            model: 'team.model.PlayerModel',
            storeId: 'PlayerStore',
            proxy: {
                type: 'jsonp',
                url: 'http://localhost:8888/listdetail/users.json',
                reader: {
                    type: 'json'
                }
            },
            grouper: {
                groupFn: function(record) {
                    return record.get('lName')[0];
    
    
                }
            }
        }
    });
    PlayerModel.js
    Code:
    /*
     * File: app/model/PlayerModel.js
     *
     * This file was generated by Sencha Architect version 2.0.0.
     * http://www.sencha.com/products/architect/
     *
     * This file requires use of the Sencha Touch 2.0.x library, under independent license.
     * License of Sencha Architect does not include license for Sencha Touch 2.0.x. For more
     * details see http://www.sencha.com/license or contact license@sencha.com.
     *
     * This file will be auto-generated each and everytime you save your project.
     *
     * Do NOT hand edit this file.
     */
    
    
    Ext.define('team.model.PlayerModel', {
        extend: 'Ext.data.Model',
        config: {
            idProperty: 'playermodel',
            fields: [
                {
                    name: 'lName'
                },
                {
                    name: 'fName'
                },
                {
                    name: 'addr1'
                },
                {
                    name: 'addr2'
                },
                {
                    name: 'city'
                },
                {
                    name: 'state'
                },
                {
                    name: 'zip'
                },
                {
                    name: 'playerid'
                },
                {
                    name: 'mainPosition'
                },
                {
                    name: 'secPosition'
                }
            ]
        }
    });
    Attached Files

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    3
    MichelleWong is on a distinguished road

      0  

    Default


    I am also looking for this and can't figure it out.
    Can anyone help?

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    3
    MichelleWong is on a distinguished road

      0  

    Default


    @jeffyt, your listdetail.xds is empty?

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by MichelleWong View Post
    @jeffyt, your listdetail.xds is empty?
    The .xds file is just an entry point to your project. You will want to create a full archive of the project via File -> Archive Project and then upload the archived .xda file.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    52
    Vote Rating
    11
    celticboyone will become famous soon enough

      0  

    Default


    Absolutely you can, here's one way:

    Views
    ---TabPanel
    ------First tab
    ---------Navigation View
    ------------Container (this allows the below List and Panel on the same page)
    ---------------Panel
    ---------------List
    ------Second tab
    ------Third tab
    Detail Panel (push this onto the Navigation view for details)

    Using the above you can have a list and panel on the same page, or, if you want to just slide to a new detail panel when you click an entry in the list then simply push the "Detail Panel" onto the Navigation View (see the CityBars example on how to do this), the Naviagtion View will automatically give you a "Back' button to get back to the list. When you create the components make sure they size correctly so that you can see what is inside them (he Navigation View for example - set "height" at 100%). Use the Design view and you will see the sizes.

    Hope this helps.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    3
    MichelleWong is on a distinguished road

      0  

    Default


    hi celticboyone, first thank for your reply.
    hi Celticboyone, first thanks for your reply. I should try the example you provided.
    Last week I have tried a whole week to makes my example works. But it didn't

    Actually, I just wanted the same thing like the example of sencha touch 2 oreilly.

    A view with segmentedbutton, directly loaded when the application starts.
    Then when pressed on the listview, you'll get a detailview with data.

    Maybe you know how to do this or much better to provide me an example so that I can compare with it?

    this is what I wanted:

    View:
    - Toolbar
    -- Segmentedbutton
    ---Button1
    ---Button2
    ---Button3
    - List 1 (dataviewList (for button1))
    - detailview (after pressed on an item of list 1)
    - List 2 (dataviewList for button 2)
    - detailview (after pressed on an item of list 2)

    Do I need a navigationview to make this work for example? Or do I have to use tabpanel to make this work?

    Please help me out.

    thanks in advanced.

    Michelle

  7. #7
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    52
    Vote Rating
    11
    celticboyone will become famous soon enough

      0  

    Default


    You don't need a Tab Panel to do what you wish as all the lists and their click-through details operate independently of the Tab Panel, but you could put them all on the first tab. I think the first thing you need is to get the structure of your project correct. Have you been able to do that? Maybe like this:
    1. Create a new Touch project and start with a Tab Panel under “Views”
    2. In the first Tab add a Navigation View as a child
    3. Add a Container to the Navigation View
    4. Place your Segmented buttons and List inside that container
    5. Add some data so that you can see it in the list

    You should now have the main structure in place and looking like this:
    Screenshot.png

    Here is the code:
    Code:
    Ext.define('MyApp.view.MyTabPanel', {
        extend: 'Ext.tab.Panel',
        config: {
            items: [
                {
                    xtype: 'container',
                    layout: {
                        type: 'fit'
                    },
                    title: 'Tab 1',
                    iconCls: 'info',
                    items: [
                        {
                            xtype: 'navigationview',
                            height: '100%',
                            items: [
                                {
                                    xtype: 'container',
                                    layout: {
                                        type: 'vbox'
                                    },
                                    title: 'My Title',
                                    items: [
                                        {
                                            xtype: 'toolbar',
                                            docked: 'top',
                                            layout: {
                                                pack: 'center',
                                                type: 'hbox'
                                            },
                                            items: [
                                                {
                                                    xtype: 'segmentedbutton',
                                                    items: [
                                                        {
                                                            xtype: 'button',
                                                            text: 'MyButton'
                                                        },
                                                        {
                                                            xtype: 'button',
                                                            text: 'MyButton1'
                                                        }
                                                    ]
                                                }
                                            ]
                                        },
                                        {
                                            xtype: 'list',
                                            itemTpl: [
                                                '<div>List Item {string}</div>'
                                            ],
                                            flex: 1
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'container',
                    title: 'Tab 2',
                    iconCls: 'info'
                },
                {
                    xtype: 'container',
                    title: 'Tab 3',
                    iconCls: 'info'
                }
            ],
            tabBar: {
                docked: 'bottom'
            }
        }
    });
    Create a totally separate new Panel under Views, this will be the Detail panel when you click a list item, add something into the HTML property so you will see it when it slides into view.
    Now you will add a new Controller, and in that you will trap an itemTap on the list, when you get that then push the Deatil Panel onto the Navigation view – this will cause the details to slide into view and you automatcially gte a "Back" button. If you need help at this let me know.

    Switching the data in the list to give a sepatate list when different buttons are pressed can be done by changing the underlying data for each button tap, but you should get the above working first so you know it is good for the detail panel slideing in when you click an item in the list.

    Hope this helps you.