Results 1 to 4 of 4

Thread: Ext.tab.Panel Tools Configuration

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
      0  

    Default Ext.tab.Panel Tools Configuration

    Greetings,

    Let me preface this post by stating that it is entirely possible that I am 'doing it wrong'.

    My goal is to create a tab panel with two tabs and display a help button to the right of the tabs (inline, in the same row). It should look something like this crude diagram.

    Code:
    //Goal
     ________ ________ __________________
    |  tab 1 |  tab 2 |______________[?]_|

    I would normally accomplish this via the tools property on the definition of the Ext.panel.Panel. This is my first time working with an Ext.tab.Panel and it appears to behave differently from a basic panel with regard to how the tools are rendered. They appear in a header, above the tabs, and I am not sure why.

    The 4.1 documentation states that the TabPanel will not display tools configured on the header.

    TabPanels use their header or footer element (depending on the tabPosition configuration) to accommodate the tab selector buttons. This means that a TabPanel will not display any configured title, and will not display any configured header tools.


    When I add a configuration for the tools property to the Ext.tab.Panel, a header appears where I would not expect one to be, which causes the rendered component to appear as below.

    Code:
    //Difference in rendering behavior
     ____________________________________
    |________ _______________________[?]_|
    |  tab 1 |  tab 2 |__________________|
     
    You can try this for yourself on any of the ExtJS 4.1 documentation pages by pasting the following into one of the code editor widgets and clicking on the Live Preview button.

    Code:
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
    
        tools : [{
            type : 'help',
            handler : function(event, toolEl, panel) {
                    alert('Should I be rendered up here?');
                }
        }],
        items: [{
            title: 'Tab 1'
        }, {
            title: 'Tab 2'
        }]
    });
    By specifying the tools configuration on the Ext.tab.Panel, am I specifying a header configuration on this component? Is this a bug in 4.x or, if not, is the documentation incorrect? Am I simply misunderstanding proper usage of this component and the inheritance model (container > abstractpanel > panel > tabpanel)?

    Does anyone know of a simple workaround to accomplish the stated goal?

    Thanks in advance!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Answers
    716
    Vote Rating
    498
      1  

    Default

    You can add a button like this:

    Code:
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        items: [{
            title: 'Foo'
        }, {
            title: 'Bar',
            tabConfig: {
                title: 'Custom Title',
                tooltip: 'A button tooltip'
            }
        }],
        
        listeners: {
            afterrender: function(panel){
                var bar = panel.tabBar;
                bar.insert(2,[
                    {
                        xtype: 'component',
                        flex: 1
                    },
                    {
                        xtype: 'button',
                        text: 'button'
                    }                
                ]);
            }
        }
    });?
    Scott.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    116
      0  

    Default

    Have a look at my simple extension: Its.tab.plugin.Tool

  4. #4
    Sencha User
    Join Date
    Nov 2015
    Posts
    5
    Vote Rating
    -1
      0  

    Default

    I solved this on ExtJS 5.1.0 using also jQuery, but of course you can use plain JS.

    1. First of all I added to CSS this class:
    Code:
    .tool_in_tabpanel {
        right: 0px !important;
        left: auto !important;
        top: 3px !important;
    }

    2. For second, I created a floating hidden panel, that contains the tools:
    Code:
    {
        xtype: "panel",
        id: "dash_maxmin",
        floating: true,
        hidden: true,
        tools: [
        {
            type: "maximize",
            id: "dash_max",
            cls: "tool_in_tabpanel",
        },
        {
            type: "minimize",
            id: "dash_min",
            hidden: true,
            cls: "tool_in_tabpanel",
        },
        ],
    },
    3. Next, I forced the render of the elements. This is bad, but without this the DOM of the elements are not available, and I didn't found a cleaner solution:
    Code:
    Ext.getCmp("dash_maxmin").show();
    Ext.getCmp("dash_maxmin").hide();
    4. Last, I moved the tools to the target tabpanel, with id "dashboard":
    Code:
    var dash_inner = $("#dashboard .x-tab-bar .x-box-inner");
    dash_inner.append($("#dash_max"));
    dash_inner.append($("#dash_min"));
    NOTE: this should be done every time the tools are re-rendered. The problem is that, apparently, "render" event is not fired for floating elements, so I added these commands in a function and I launch it in every piece of code that could change the tools. Not too much hassle, for now I call it in three different points only.

    This is a very tricky solution, I admit, but it works. I'm quite disappointed only about the two tricks above, in point 3 and the one I described in the note. If you know more canonical solutions, please advice me.

Tags for this Thread

Posting Permissions

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