ExtJS viewport panel

Question

I have EXTJS panel inside a viewport east region,

var viewport = new Ext.Viewport({
    layout: 'border',
    id:'mainviewport',
    monitorResize:false,
    items: [{
        region: 'east',
        xtype: 'panel',
        id:'east-panel',
        header : false,
        headerAsText: false,
        title: 'east panel',
        collapsible: true,
        split: true,
        minSize: 305,
        maxSize: east_panel_width,
        margins: '53 0 0 0',
        cmargins:'53 0 0 0',
        collapsed: true,
        autoScroll: true,
        layout: 'fit',
        html:'<div id="abc" style="height:100%;overflow-x: hidden; overflow-y: auto;"></div>'
    }]
});

I dont want the title header so i gave the property header: false, headerAsText: false the title bar get hided, but i want the collapsible option for this. How can i get that collapsible function.

Is that possible to hide only the title text and the background css of that, without distrubing the collapsible panel extender option.

Thanks in advance.

Answer 1

Even with header: false, headerAsText: false you have an arrow in the middle of the splitter bar. It works as a collapsing control of the panel.