CODEWITHSUNDEEP
javascriptextjslayout
nasuf
nasuf

Reputation: 309

about Extjs afterLayout

I added a listener in the code like: 

listen: {
    afterLayout: function(){
        doSomething...
    }
}

the function is to render the html tags. But it does not work when the page loaded. I need to force rendering the page like change the size of browser will it work. I wanna know why. "afterLayout" should work automatically after the page loaded right? Or do I miss something?

Upvotes: 0

Views: 1620

Answers (3)

Tyr
Tyr

Reputation: 2810

You are using a wrong config. Instead of listen: { use listeners: {

Here is an example for you: https://fiddle.sencha.com/#fiddle/16gu

Ext.application({
    name : 'afterRender Test',

    launch : function() {
        Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            listeners: {
                afterRender: function() {
                    this.update('<div style="width:300px; background-color:red; padding:10px;">Added via afterRender listener</div>');
                }
            }
        });
    }
});

Upvotes: 1

LightNight
LightNight

Reputation: 851

I think your problem can solve viewport. wrap your application in this component. viewport will listen to window size change and automatically re size it's child elements (your application)

Upvotes: 0

LellisMoon
LellisMoon

Reputation: 5020

I think the event your searching is afterrender. Afterlayout only fires when the window size change and not on the load. afterrender event match after the layout of the interested component is loaded. so you should try with this:

listen: {
    afterrender: function(){
        doSomething...
    }
}

If you must call the same function in all the cases call it on afterrender and on afterlayout

Upvotes: 0

Related Questions