Threaded 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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar