CODEWITHSUNDEEP
extjsextjs4extjs4.1
pohchen
pohchen

Reputation: 1823

Insert Component into the Tabpanel's tab in ExtJS 4

I want to make a tabpanel in ExtJS 4 with big tab that include my own Component (or XTemplete), is there some way to implement? thanks

UPDATE : can change the custom tab's height by this link

Change the Height of an ExtJS 4 Tab

Upvotes: 2

Views: 3761

Answers (1)

mistaecko
mistaecko

Reputation: 2685

Check out Ext.tab.Bar and Ext.tab.Tab. You can pass in a tab bar configuration to the panel via the Ext.tab.Panel#tabBar config property.

var tabpanel = {
    xtype: 'tabpanel',
    tabBar: {
        defaultType: 'xxx'        
    }
}​

You then create a custom component class with alias: 'widget.xxx. The default Ext.tab.Tab is a subclass of Ext.button.Button with custom styling.

Replacing it with a component that is not just a subclass of Ext.tab.Tab is probably quite a bit of work. You will need to assure that the component's behavior is correct and also the CSS styling looks nice.

A faster but less flexible approach would be to subclass Ext.tab.Tab and change its appearance to match your needs.

UPDATE

Unfortunately ExtJs' Ext.tab.Panel explicitely sets the xtype for each tab that is being added/created. From Ext.tab.Panel

onAdd: function(item, index) {
    var me = this,
        cfg = item.tabConfig || {},
        defaultConfig = {
            xtype: 'tab',                // <= XXX
            card: item,
            disabled: item.disabled,
            closable: item.closable,

But as you can see it is possible to add a tabConfig on the items of a tab panel which will take precedence of the defaultConfig defined here. So a simple and straight forward approach is to define a tabConfig on every child item of your tab panel

tabConfig: {
   xtype: 'xxx'
}

Upvotes: 2

Related Questions