Results 1 to 4 of 4

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

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

    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:
    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()
                
          });
         
    	}
    });

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    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.

  4. #4

    Default

    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.

Similar Threads

  1. Override setTitle method of Tab Panel
    By patrickmu in forum Ext: Q&A
    Replies: 8
    Last Post: 12 Jul 2013, 4:30 AM
  2. [CLOSED] Title of chart axis doesn't change using setTitle method
    By Baidaly in forum Ext:Bugs
    Replies: 4
    Last Post: 9 Apr 2013, 6:15 PM
  3. Replies: 2
    Last Post: 19 Apr 2011, 9:39 AM
  4. Replies: 34
    Last Post: 29 Dec 2009, 9:10 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •