1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    ken4ward is on a distinguished road

      0  

    Default Unanswered: How to add components to tab panels

    Unanswered: How to add components to tab panels


    A fresher in Extjs I am. I just got somethings working implemeting extjs for view with this code:

    Code:
    Ext.onReady(function(){
                Ext.create('Ext.panel.Panel', {
                        title: 'The Wealth market Application',
                        width: 1000,
                        height: 450,
                        layout: 'accordion',
                        layoutConfig: {
                            //activeOnTop: true,
                            animate: true,
                            multi: true
                        },
                        style: 'margin: 160px', // move panel off browser’s edge
                        renderTo: Ext.getBody(),
                        items: [{
                             title:'Login - kindly login here.'
                                 ,defaults:{border:false, activeTab:0}
                                 ,items:
                                     [{
                                        defaults:{layout:'fit'}
                                         ,xtype:'tabpanel'
                                         ,items:
                                             [{
                                                 title:'Member Login'
                                                 },{
                                                 title:'Franchise Login'
                                                 },{
                                                title:'Merchant login'
                                 }]
                                 }]
                        }, {
    ................ and so on.....
    In this in accordion layout tab panels are created, how do I add components like textbox, button, label, etc inside each tab. Thanks.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,995
    Answers
    464
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The same way you did it for the accordion:

    Code:
    {
        title: 'Member Login',
        items: {
            xtype: 'textfield'
        }
    }
    You can nest as deep as you need to.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    ken4ward is on a distinguished road

      0  

    Default Thanks

    Thanks


    Thanks. ...so much appreciate!

  4. #4
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    ken4ward is on a distinguished road

      0  

    Default Add multiple components to tab panel

    Add multiple components to tab panel


    Thanks. I have been able to create component in the tab panel, but I want to add multiple components in the form. I added it thus:

    Code:
    title:'Member Login',
                                                items: [
                                                         {
                                                            xtype: 'textfield',
                                                             name: 'pay',
                                                       fieldLabel: 'Pay',
                                                                size: '50',
                                                           anchor: '100%'
                                                         },
                                                        {
                                                            xtype: 'textfield',
                                                             name: 'sum',
                                                       fieldLabel: 'Sum',
                                                                size: '50',
                                                           anchor: '100%'
                                                         },
                                                        {
                                                             xtype     : 'textareafield',
                                                             grow      : true,
                                                             name      : 'sum',
                                                             fieldLabel: 'Sum',
                                                             anchor    : '100%'
                                                        },
                                                        {
                                                            xtype : 'button',
                                                             text : 'Record'
                                                        }
                                                         ]        
                                                 },{
    ...but they never show. Only the first textfield and the textareafield showed. What should i do?

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Location
    Kiama, Australia
    Posts
    25
    Answers
    2
    Vote Rating
    0
    Songle is on a distinguished road

      0  

    Default


    You called the textfield and the textarea the same name.