CODEWITHSUNDEEP
javascriptcssextjsextjs5
Raymond Yeh
Raymond Yeh

Reputation: 285

ExtJS remove text and add items into header after the panel collapsed

I use Ext5 and I have a question. Is it possible to remove text and add items into panel header after the panel collapsed?

Belows the code, the east panel is collapsible. I want to remove text and add items into header after it collapsed. 

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

UPDATE

In this case, I add buttons into header but when the panel is collapsed the button disappeared. Is there any way to show or add components into header when panel is collapsed?

{        
    region: 'east',        
    title: 'East Panel',        
    collapsible: true,        
    split: true,        
    width: 150,
    header: {
         items: [{
            xtype: 'button'
        }, {
            xtype: 'button'
        }]
    }
}

here is the fiddle

Thanks

Upvotes: 1

Views: 2058

Answers (2)

Deepak P
Deepak P

Reputation: 367

Please refer to "placeholder" related configs in Ext.panel.Panel class. Below is your code from fiddle modified.

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        collapseMode:'placeholder',// set collapseMode to placeholder
        split: true,
        width: 300,
        placeholder:{ // Try different components and layout configs
            width:100,
            items:[{
                xtype:'button',
                text:'Button 1'
            }]
        }
        /*header: {
            items: [{
                xtype: 'button'
            }, {
                xtype: 'button'
            }]
        }*/
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

Upvotes: 3

Elias Medeiros
Elias Medeiros

Reputation: 395

The header you see collapsed is actually another instance of Ext.panel.Header created just for this purpose. I tried to find some configs to customize it, but the Ext.panel.Panel was not created having it in mind.

So you'll have to override the method which creates this reader, which I found out is called createReExpander. It's a big method hard to override without having to rewrite a lot of stuff, but it can be done.

I tried adding buttons to the header and the result was not visually nice, but at least they were created! So I would suggest you use tools instead of buttons if you don't need text on them.

Upvotes: 0

Related Questions