ExtJS 5.1.1 Ext.tab.panel's setTitle method sets title, does not refresh layout

[bradparrott]

I searched the forum for this one, but didn't find any similar topics.

Issue:
Ext.tab.panel's setTitle method sets config of panel view but does not refresh layout. Upon creating the view, and initializing the title config, any attempts to change change this config dynamically seems to work, however the layout is not refreshed, not even after manually calling updateLayout().

Sencha Fiddle:
Have setup a sencha fiddle to demonstrate what I believe is a bug in this component.
https://fiddle.sencha.com/fiddle/nk0


Code:

Ext.application({
    name : 'Fiddle',
    launch: function() {
      Ext.create('Ext.tab.Panel', 
		{
    		referenceHolder: true,
            reference: 'tabPanel',
            items: 
            [
                {
                    title: 'General',
                    xtype: 'panel',
                    reference: 'generalTab',
                    itemId: 'generalTab'
                                    }, 
                {
                    
                    title: 'Other',
                    xtype: 'panel',
                    reference: 'otherTab',
                    itemId: 'otherTab'
                }
            ],
            listeners:
            {
                render:
                {
                    fn: function()
                    {
                        var pnl = this.lookupReference('generalTab');
                        var prvTtl = pnl.getTitle();
                        pnl.setTitle('New General Title');
                        pnl.updateLayout();
                        Ext.Msg.alert('setTitle values', 'before setTitle: ' + prvTtl + '<br/> after setTitle: ' + pnl.getTitle());
                    }
                }
            },
            renderTo: Ext.getBody()
            
      });
     
	}
});

[evant]

I would suggest you pick a different event, either beforerender or afterrender. Render of the tab panel itself means the markup the button may have been generated, but it's not yet all fully attached in the DOM (you're not listening to the render of the button).

The former is preferable since it means you won't do any extra layouts.

[bradparrott]

Thanks for the suggestion, that seemed to help in the Sencha Fiddle demo. I'll try and apply it to the application I'm working on, where it's actually being called from the ViewController in a much larger nested TabPanel, nested withing a FormPanel. Will update this thread once I test it out.

[bradparrott]

Well the result was the same, that simple changeover to a different event worked out perfectly. I went ahead with using the tabpanel's afterrender event as suggested. I had a similar issue with a different method and a different event (if I recall correctly, it might have even been the same event) then I read about the afterlayout event being the most effective as far as waiting until everything was rendered and loaded.

If I may ask you another question, which is the more preferred event for making dynamic changes to UI elements (assuming the setter functions fail to refresh the view when called). Would afterrender be best, or afterlayout? If I remember correctly, I read somewhere that the render events are only fired once when the view is first created. So I'm sure I'm answering my own question here...but would it be correct to say that afterlayout should only be used when expecting updateLayout to be called, and to use the render events when I'm only planning to update the view once? Or is updateLayout part of the rendering event string, or vice versa?

Thank you again for your help, I learned something new and you surely saved me a lot of research/debug time.