CODEWITHSUNDEEP
extjs
Oleg
Oleg

Reputation: 11

Extjs 4 MVC TabPanel - bad rendering tab

Please, help me. I am creating a TabPanel using the MVC. At the time of rendering panel add tab. Here is the code of the two views and controller. The result is a distorted picture. The title of the tab is drawn twice: at the top and bottom (stretched to full screen). When I change in the controller function addNewTab() the line "tp.add({xtype: 'mytab'}).show();" to the other "tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show();", then everything is rendered properly. I will be grateful for the help.

Views:
Ext.define('MY.view.Tab', {
    extend: 'Ext.tab.Tab',
    alias: 'widget.mytab',
    initComponent: function() {
        this.title = 'new Tab';
        this.html = 'MVC New Tab Example';
        this.callParent(arguments);
    }
});

Ext.define('MY.view.TabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mytabpanel',
    initComponent: function() {
        this.id = 'MYTabPanel';
        this.callParent(arguments);
    }
});


Controller:
Ext.define('MY.controller.TabPanel', {
    extend: 'Ext.app.Controller',
    requires: ['MY.view.Tab'],
    init: function() {
        this.control({
            '#MYTabPanel': {
                render: this.addNewTab
            }
        });
    },
    addNewTab: function(tp) {
        tp.add({xtype: 'mytab'}).show();  //it work bad
        //tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show();  //it work good
    }   
});

Upvotes: 0

Views: 1075

Answers (1)

wantok
wantok

Reputation: 995

Your mytab class extends Ext.tab.Tab. That means that this code tp.add({xtype: 'mytab'}); is adding a Tab as a main view for the TabPanel. A tab is created automatically for every panel or container you add to the tab panel and consists of just the button-like component at the top of the view.

That means that when you call the code above, a Tab is created and pushed into the TabPanel as a view, then the TabPanel creates another another Tab using the same title and attaches it to the top of the Tab you just added.

This code tp.add({title: 'new Tab', html: 'MVC New Tab Example'})' works because you are actually adding a panel (The default xtype used by Ext is panel) and the TabPanel is creating the tab for you using the title you've provided.

To fix: make MY.view.Tab extend Panel instead of Tab. If you're trying to customize just the tab for a particular view, dig into the source for Ext.tab.Panel and check out the undocumented tagConfig property that you can add to TabPanel items.

Upvotes: 1

Related Questions