1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Answers
    3
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default Answered: Possibly stupid question... non-tab components in tabpanel?

    Answered: Possibly stupid question... non-tab components in tabpanel?


    I honestly doubt this, but I have to ask... Is there a way to display other interactable components in the tab selection bar generated by a tabpanel? Architect is showing them as very reluctant to accept other types of components as children (and when it accepts, say, a 'tool', it puts it in the title header, not the tabs bar)

    What i'm trying to do is 'dynamically' add such components, not add static things to the display (I have no doubt it's possible to make powerful but static changes by changing the way it renders... to have each tab have a subtitle under it's title for instance)

    If you want an example of why I ask... On a toolbar I can have a button dynamically replaced with a text box (Hide the button, add a field which you can use to change the text of the button) Personally, i doubt this kind of behavior can be easily replicated on the TabPanel, but if it can it might look cooler than the Msg.Prompt I'm forcing myself to use at the moment
    Last edited by mice-pace; 28 Feb 2013 at 9:24 PM. Reason: changed title for clarity

  2. The section you're referring to is known as the TabBar:

    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Bar

    Beneath all the fluff it's just a container with an hbox layout. You should be able to inject other components into it easily enough, though a bit of CSS juggling may be required to get them looking correct.

    To grab hold of the TabBar either use a component query or grab it by property:

    http://docs.sencha.com/ext-js/4-1/#!...roperty-tabBar

    You'll probably need to do the manipulation post-render to ensure everything exists.

    It wouldn't surprise me if Architect doesn't have any support for doing this.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Answers
    667
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    What type of component? You just need a container type:

    Code:
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        items: [{
            title: 'Foo'
        }, {
            xtype: 'grid',
            title: 'My Grid',
            border: false,
            columns: [{header: 'World'}],
            store: Ext.create('Ext.data.ArrayStore', {})
        }]
    });
    If you want other types, just create them in a container and create an xtype.

    Scott

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Answers
    3
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default


    Hmm. I might be wrong here, but are you talking about components that appear AS another tab you can activate? (i.e. two tabs, one called ''Foo' and one called 'My Grid') That's what I got from your code, and unless I misunderstood what it does that's not what i am talking about.

    I'm talking about having say, 'Foo', 'My Grid' and a Button called 'My Button' and/or a Text Field all allong the tab selection bar (neither of which open tabs). When i said 'interactable' I meant components that did something without selecting a tab.

    Non-tab meaning is not a tab you can activate, and does not have a tab associated with it.

    Sorry if i wasn't clear enough.

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The section you're referring to is known as the TabBar:

    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Bar

    Beneath all the fluff it's just a container with an hbox layout. You should be able to inject other components into it easily enough, though a bit of CSS juggling may be required to get them looking correct.

    To grab hold of the TabBar either use a component query or grab it by property:

    http://docs.sencha.com/ext-js/4-1/#!...roperty-tabBar

    You'll probably need to do the manipulation post-render to ensure everything exists.

    It wouldn't surprise me if Architect doesn't have any support for doing this.

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Answers
    3
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default


    Thanks Skirtle, that looks like it will point me in the right direction.

    A little more research from here, but good to know it is possible. I'll probably post whatever i code up here for future reference, in case anyone else searches for this.