Results 1 to 3 of 3

Thread: How to listen for rendering done?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User rohdef's Avatar
    Join Date
    Mar 2010
    Location
    Aarhus, Denmark
    Posts
    67
    Vote Rating
    5
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User rohdef's Avatar
    Join Date
    Mar 2010
    Location
    Aarhus, Denmark
    Posts
    67
    Vote Rating
    5
      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.

Posting Permissions

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