Results 1 to 6 of 6

Thread: adding buttons to tabPanel dynamically: xtype-problem

  1. #1

    Default adding buttons to tabPanel dynamically: xtype-problem

    If I create the view manually, I use a tabPanel with a tabBar with n-buttons, each one linking to an xtype-property;
    everything works fine!
    BUT if I try to add the buttons dynamically, getting the values from a store, I am able to have a correct tabBar shown, only if I don't add the xtype;
    Adding the xtype seems to include the view linked by xtype-name directly in the button;
    maybe I shouldn't use the add-method?
    I would like to add buttons programatically with their own xtypes, in order to load the tabBar the "normal" way, so switching between choices is working automatically, without having to add some extra-code for listeners; would that be possible?

    working static version:

    Ext.define('xxx.view.Main',
    {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    alias: 'widget.main',
    config:
    {
    id: 'mainTabBar',
    itemId: 'mainTabBar',
    tabBar:
    {
    docked: 'bottom',
    cls: 'clsTabBar'
    },
    items:
    [
    {
    xtype: 'home',
    id: 'home',
    title: '<div class=clsTabButton>Home</div>'
    },
    {
    xtype: 'info',
    id: 'info',
    title: '<div class=clsTabButton>Info</div>'
    },
    {
    xtype: 'seek',
    id: 'seek',
    title: '<div class=clsTabButton>Mein Diamant</div>',
    },
    {
    xtype: 'offer',
    id: 'offer',
    title: '<div class=clsTabButton>Angebote</div>',
    },
    {
    xtype: 'contact',
    id: 'contact',
    title: '<div class=clsTabButton>Kontakt</div>',
    }
    ]
    }
    });

    partially working version with data from store, handled in the controller

    onMenuLoad: function(records,success,operation)
    {
    var objComponent = Ext.ComponentQuery.query("main")[0];
    var objTabBar = objComponent.getTabBar();
    var menuStore = Ext.getStore('Menu');
    menuStore.each
    (
    function(record,idx)
    {
    objTabBar.add
    (
    [
    {
    d: record.get('id'),
    title: '<div class=clsTabButton>' + record.get('text') + '</div>',
    xtype: 'contact' //this is the problem! it doesn't work!
    }
    ]
    )
    }
    )
    },

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    I just ran this test and it works for me:

    Code:
    Ext.Viewport.add({
        xtype  : 'tabpanel',
        tabBar : {
            docked : 'bottom'
        },
        items  : [
            {
                title : 'Foo',
                items : [
                    {
                        xtype   : 'button',
                        text    : 'Add Button',
                        handler : function(button) {
                            var tabpanel = button.up('tabpanel'),
                                tabbar   = tabpanel.getTabBar();
    
                            tabbar.add({
                                xtype : 'button',
                                text  : 'Test'
                            });
                        }
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3

    Default

    I didn't mean with "standard" xtype like button ...
    for example: you create a "test.js" with alias "test" and include it in the app.js;
    now you try to add a button dynamically assigning test as xtype;
    I didn't manage to make it work ...
    it seems that the xtype-content is in the button itself, and not to be visualized when I click the added button;
    what did I do wrong?
    thanks!

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    With what I was given, I am unsure what the class for the contact xtype is like. So you said button, I tested button.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #5

    Default

    as I am a newbie, maybe I don't have the correct names for all these Sencha-things;
    I try to explain a little better
    > I have a tabPanel
    > I try to add some buttons dynamically: I simply want to click on these buttons and display
    a view, keeping the tabpanelbar
    > I did it all without dynamic data, and it worked: I created a js with 4-5 buttons and assigned
    to each of them the xtype of the created views (containers/panels)
    > now I tried to make this "menu" dynamic, so I download the data from a server
    (model/store/controller ...)
    > and now I want to add them to the tabpanelbar in the tabpanel-view:
    everything works as long as I don't set the xtype-attribute;
    If I do this, it seems that Sencha wants to create a button with the content of the view linked
    and not a simple button linked to the xtype-view;
    this is what I surely did wrong ... but how is this expected to be done??
    thanks!

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    So the issue is if you set the xtype config when adding a component. Is the class the xtype is bound to loaded?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •