1. #1
    Sencha User rohdef's Avatar
    Join Date
    Mar 2010
    Location
    Aarhus, Denmark
    Posts
    67
    Vote Rating
    3
    rohdef is on a distinguished road

      0  

    Default How to listen for rendering done?

    How to listen for rendering done?


    I have some code that adjusts layout based on the rendered html, thing is that I don't know how to listen for it. I have something along the lines of:

    Code:
    Ext.define('Project.Utilities', {
      scaleFonts: function(container, cssClass, maxHeight, minSize) {
         // loop the elements and if it's height > maxHeight then it rescales till either heigt <= maxHeight or minSize is reached
      }
    });
    Then what I'm looking for is something like an after render, to listen for. I have tried painted, but it's called too early, since it doesn't necessarily have a height when added to the dom:

    Code:
    Ext.define('Project.view.SomeList', {
      extend: 'Ext.List',
      xtype: 'someList',
      store: 'Whatever',
     
      config: {
        itemTpl: '<p class="foo">{somePropertyThatMightBeTooLong}</p>',
    
        listeners: {
          painted: 'fixFonts'
        }
      },
    
      fixFonts: function(container, opts) {
         Coupons.Utilities.scaleFonts(container, '.foo', 18, '70%')
      }
    });
    Only way I've managed to solve this is by setTimeouts, but I would say that this is a really ugly solution. Is there some kind of afterRender, doneRendering or similar hidden event that I can look for? If not is it possible that it will come?

    Tested in 2.0 and 2.1.
    Developer/Alien Technologies at Mobile Ambitions Aps, Denmark.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can listen for the first call of the show event. painted will happen right before it's actually inserted into the DOM
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User rohdef's Avatar
    Join Date
    Mar 2010
    Location
    Aarhus, Denmark
    Posts
    67
    Vote Rating
    3
    rohdef is on a distinguished road

      0  

    Default


    Show is fired before painted in my tests, I did something along the lines of:

    Code:
    Ext.define('Project.view.SomeList', {  extend: 'Ext.List',  xtype: 'someList',  store: 'Whatever',   config: {    itemTpl: '<p class="foo">{somePropertyThatMightBeTooLong}</p>',    listeners: {      show: 'show',      painted: 'paint'    }  },  paint: function() {    Ext.Logger.verbose('Painted');  }  show: function() {    Ext.Logger.verbose('Show');  }});
    And my log outputs show before painted.
    Developer/Alien Technologies at Mobile Ambitions Aps, Denmark.

Thread Participants: 1