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,413
    Vote Rating
    129
    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.

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

      0  

    Default


    Hi Celticboyone, first thank you for your detailed explanation and example.


    I have try to make it as you describe, however I missed the last steps:
    1) the push navigation didnt work, I got an error message ""
    - note: as I have seen other examples, they just use 'link' the list and navigationview, when should I do this?
    2) I don't know how to use the toggle. I can call it with an action handler, but thereafter? It should do something like fireevents to load the another list right? Do you know how to do that?


    I have upload my xda example, with a little bit more configurations.
    I have added two models (one twitter, and one customer model), and two JsonP stores, one with use of twitter api, and one with ajaxproxy to load from internal source data.


    This is just for testing purpose and is fake data. (tabExample1)
    tabExample2.pngtabExample1.png

    The idea is simple, but it's hard to figure it out without any understanding on how to use actions and controllers.....


    Yesterdaynight I have also play around and tested with tabpanels. I includes both xda files, so that you can compare the differents. (tabExample2)


    I know I'm almost there, but still missing the last view puzzles.... hope you can help me out here


    thanks,


    Michelle




    TabExample1.xdaTabExample2.xda

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

      0  

    Default


    Wow, you have done a great job here. I took your Example one and just changed the "onTwitterListTap' action to push the twitter details, like this:

    Code:
    // Slide the details panel into view and set it's data
    if (record) {
        var details = Ext.create('MyApp.view.TwitterDetail', {
        });
        details.setData(record.data);
        this.getMainNaviView().push(details);
    }
    I set the tpl of the TwitterDetail to simply show a few of the twitter detail fields. I have attached the working project here - you should be able to click a twitter feed and see the details now.

    Hope this helps a little further


    Attached Files

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

      0  

    Default


    I just looked at the O'Reilly example - I think it is a little different than what you are doing since the segmented buttons simply filter the same list. In other words, there is just one list and clicking the buttons filters by date. What you have are two different lists with two different stores. So, in place of the single List you have now you will need to replace that with something like a Panel and set it's layout of"Card" so that it can have multiple cards. Then put one list one one card and the other list on the other card. Then use the buttons to simply switch between cards - you use .setActiveItem(#) on the panel to switch between it's different cards. Try it is a small project first until you get that working. At least I think that is how I would first go about it, as always there are many different ways.

    Hope this helps too.