1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    9
    Vote Rating
    0
    milosz0010 is on a distinguished road

      0  

    Default Answered: Few Components in Panel

    Answered: Few Components in Panel


    Hi,

    I am new to sencha and i have no idea how to add a few components into my Panel. I can't find any informations about that, so I think that is really easy to implement, and I really don't know how to begin. I like the design which is shown here: http://dev.sencha.com/deploy/touch/e...oduction/kiva/ , but after getting started tutorial, i can't copy this project even in the design way. Please, guys, help me how to handle this...

    For example, if I have my main view(Main.js) looking like this:
    Code:
    Ext.define("GS.view.Main", {    extend: 'Ext.tab.Panel',
        requires: ['Ext.TitleBar'],
        
        config: {
            tabBarPosition: 'top',
            cetner: true,
            
            items: [
                {
                    xtype: 'profile'
                },
                {
                    xtype: 'map'        
                },
            ]
        }
    });
    and Position:
    Code:
    Ext.define('GS.view.Position', {    extend: 'Ext.Map',
        
        xtype: 'map',
        
        config: {
            title: 'Position',
            iconCls: 'time',
            useCurrentLocation: true,
            mapOptions: {
                zoom: 19
            },
            listeners: {
                maprender : function(comp, map){
                    new google.maps.Marker({
                        position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
                        map: map
                    });    
                    
    
    
                }
    
    
            }
        }
    });
    How to add some additional components into my Position View?

    Thanks
    Miłosz

  2. Instead of

    Code:
                {
                    xtype: 'map'        
                },
    do

    Code:
                {
                    xtype: 'container',
                    layout : {
                        type : 'hbox',
                        align : 'stretch'
                    },
                    items : [
                        {
                            xtype : 'map',
                            flex : 1
                        },
                        {
                            xtype : 'list',
                            flex : 1,
                            itemTpl : '....',
                            store : someStore
                        }
                    ]
                },
    of course change the itemTpl and store configs of the list but this should have them side by side taking up 50% of the width each.

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


    GS.view.Position extends Ext.Map which will not accept any child items. GS.view.Main extends Ext.tab.Panel and you can add more items 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 User
    Join Date
    Mar 2012
    Posts
    9
    Vote Rating
    0
    milosz0010 is on a distinguished road

      0  

    Default


    Ok... So can you tell me, how to implement for example dataview.list next to Google Map in the same Panel Tab?

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


    Instead of

    Code:
                {
                    xtype: 'map'        
                },
    do

    Code:
                {
                    xtype: 'container',
                    layout : {
                        type : 'hbox',
                        align : 'stretch'
                    },
                    items : [
                        {
                            xtype : 'map',
                            flex : 1
                        },
                        {
                            xtype : 'list',
                            flex : 1,
                            itemTpl : '....',
                            store : someStore
                        }
                    ]
                },
    of course change the itemTpl and store configs of the list but this should have them side by side taking up 50% of the width each.
    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.

Thread Participants: 1