Problem with collapsible panel when setTitle

[Pramma]

These are the steps i performed.

1. Initial collapsible panel title set to 'Scope' and it is shown in horizontal title and vertical title (when colapsed)
2. set the title to 'Scope: 1' having the panel expanded and it is shown in horizontal title fine. But when you collapse vertical title is blank
3. set the title to 'Scope: 2' having the panel expanded and it is shown in horizontal title fine. But But when you collapse vertical title is blank

This issue is not generic to collapsible panel. It is working fine with normal collapsible panel.
It is even working with collapsible panel in north or south region of a border layout
But it is not working with collapsible panel in east or west region of a border layout !!

[mitchellsimoens]

Using this code I cannot reproduce:

new Ext.container.Viewport({
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Flex panel',
        flex: 1
    },{
        xtype: 'grid',
        title: 'Grid',
        width: 200,
        collapsible: true,
        //collapsed: true,
        collapseDirection: 'right',
        animCollapse: false,
        columns: [
            { header: 'Test', width: 220 }
        ],
        dockedItems : [
            {
                xtype : 'toolbar',
                dock  : 'bottom',
                items : [
                    {
                        text    : 'Change Title',
                        handler : function(btn) {
                            var grid = btn.up('gridpanel');

                            grid.setTitle('Grid 1');
                        }
                    }
                ]
            }
        ]
    }]
});

[Pramma]

Thanks
mitchellsimoens for the response.

The problem only comes in collapsible panel in east or west region of a border layout...

[dotnetwise]

I can confirm the bug too!

[wemerson.januario]

this bug is back in 4.1.1rc2.

[evant]

Using this code, how can I reproduce it?

Ext.require('*');
Ext.onReady(function() {
    var title = 'Foo';
    new Ext.container.Viewport({
        layout: 'border',
        renderTo: document.body,
        items: [{
            region: 'center',
            items: {
                xtype: 'button',
                text: 'Change Title',
                handler: function(btn) {
                    if (title == 'Foo') {
                        title = 'Bar'
                    } else {
                        title = 'Foo';
                    }
                    Ext.getCmp('foo').setTitle(title);
                }
            }
        }, {
            region: 'east',
            id: 'foo',
            title: title,
            width: 200,
            collapsible: true,
            animCollapse: false,
            collapsed: true
        }]
    });
});

[wemerson.januario]

Using this code, how can I reproduce it?

Ext.require('*');
Ext.onReady(function() {
    var title = 'Foo';
    new Ext.container.Viewport({
        layout: 'border',
        renderTo: document.body,
        items: [{
            region: 'center',
            items: {
                xtype: 'button',
                text: 'Change Title',
                handler: function(btn) {
                    if (title == 'Foo') {
                        title = 'Bar'
                    } else {
                        title = 'Foo';
                    }
                    Ext.getCmp('foo').setTitle(title);
                }
            }
        }, {
            region: 'east',
            id: 'foo',
            title: title,
            width: 200,
            collapsible: true,
            animCollapse: false,
            collapsed: true
        }]
    });
});

@evant, you code works properly, but when we call setTitle inside initComponent() after callParent you can reproduce the error.
please run this code, then you will see the west panel collpase tool disappear. This code works in 4.1.0 but not in 4.1.1

Ext.require('*');Ext.onReady(function() {
    var title = 'Foo';
    Ext.define('Viewport',{
    extend: 'Ext.container.Viewport',
    layout: 'border',
        renderTo: document.body,
    initComponent: function(){
    var me = this;
    Ext.apply(me, {
    items: [{
            region: 'center',
            items: {
                xtype: 'button',
                text: 'Change Title',
                handler: function(btn) {
                    if (title == 'Foo') {
                        title = 'It works'
                    } else {
                        title = 'It also works';
                    }
                    Ext.getCmp('foo').setTitle(title);
                }
            }
        }, {
            region: 'west',
            id: 'foo',
            title: title,
            width: 200,
            collapsible: true,
           // animCollapse: false,
            collapsed: false
        }]
    });
    me.callParent();
    if(1 === 1){
    me.down('panel[id=foo]').setTitle('Helloooooooooooooo');
    }
    }
    
    });
    Ext.create('Viewport');
});

[ss_nkl]

Hi All,

I am also having the same issue (EXTJS 4.0.7). Can anybody help me to fix Please?

Thanks in advance.

Regards,
SS_NKL