PDA

View Full Version : 'afterlayout' event



SamuraiJack1
28 Nov 2011, 2:39 AM
Hello,

Is there an analog of "afterlayout" event in ST2? I need to update the internals of my component when the size of container gets changed. For that I need to make some calculations, based on the current width and height of the container.

What will be a recommended way to do that?

mitchellsimoens
28 Nov 2011, 8:01 AM
There are heightchange and widthchange events. I know they are trying to create a standard for events but ones that we have relied upon for a long time now are still useful.

rdougan
28 Nov 2011, 11:21 AM
Backwards compatibility for this will be added in before GA.

You can, however, use the 'painted' event.

mitchellsimoens
28 Nov 2011, 1:11 PM
Will 'painted' get called after a layout or a resize happens?

Brendan Carroll
28 Nov 2011, 1:38 PM
It doesn't look like painted is complete yet in PR2. Source code has placeholder but that's about it.

rdougan
28 Nov 2011, 1:53 PM
Sorry, I miss read the question.

We cannot add backwards compatibility for `afterlayout`.

Sencha Touch 2 now uses CSS, completely, for our layout system. This means we do not know when any sizes change. In most cases, you should not be listening to size change events anyway, as all the styling of your component should be doing using CSS, and should be flexible.

If you really need to do this (which we really do not recommend because of the performance issues), you should look at the Ext.util.SizeMonitor class. There is no documentation for this class right now, but if you search the source code, you can find some examples of this.

SamuraiJack1
28 Nov 2011, 10:40 PM
Using CSS for layout is a very good approach, very performant etc, I guess its ideal for iPhones, where the interfaces are usually simple. But complex widgets (targeting iPad and tablets in general) sometimes requires the knowledge about the current sizing of the component. This seems like a big limitation for me. Any plans to add support for old-style layouts to ST2?

rdougan
28 Nov 2011, 10:43 PM
As I say, if you want to know when the size changes, you can use a SizeMonitor to know when that happens. We use this throughout the framework when it is needed, for example, when a container needs to be scrollable.

Using this approach means we get the performance of using only CSS in most situations, and then we fallback to the SizeMonitor when we need it, which is obviously not as performant.

SamuraiJack1
29 Nov 2011, 6:41 AM
Am I correct, that SizeMonitor should be added to the element, only after the 'painted' event? In the posted test case - see that only monitors 2, 3 actually works.

Also, I thought, that "painted" event should be fired only once in this example?


Ext.setup({

onReady: function () {

var container = new Ext.Container({
xtype : 'Ext.Container',

listeners : {
painted : function () {

console.log('painted')

var sizeMonitor3 = new Ext.util.SizeMonitor({
element : container.innerElement,
callback : function () {
console.log('size change from 3')
}
})
}
}
});

var sizeMonitor1 = new Ext.util.SizeMonitor({
element : container.innerElement,
callback : function () {
console.log('size change from 1')
}
})

Ext.Viewport.add(container)

var sizeMonitor2 = new Ext.util.SizeMonitor({
element : container.innerElement,
callback : function () {
console.log('size change from 2')
}
})
}
});



I'm using st2.0.0-pr2

rdougan
29 Nov 2011, 10:54 AM
Here is a simple example of a SizeMonitor:


//Simple view which has a sizemonitor
Ext.define('MyView', {
extend: 'Ext.Container',

//require the sizemonitor
requires: ['Ext.util.SizeMonitor'],

config: {
//set the default html configuration
html: 'This has a SizeMonitor. Resize the window to see it in action!<br />',

//make this container scrollable
scrollable: true
},

//initialize is called once, when the component is initialized, and by the point, the
//components this.element exists
initialize: function() {
//listen to the painted event
this.on('painted', 'onPainted');

//setup the sizemonitor
this.sizeMonitor = new Ext.util.SizeMonitor({
element: this.element, //the element we want to monitor the size of
callback: this.onSizeChange, //the callback to be called when the size changes
scope: this //the scope of the callback..
});
},

//when the component is painted, we need to refresh the sizemonitor so it knows, from now on,
//if the element changes size
onPainted: function() {
this.sizeMonitor.refresh();
},

//callback for the size monitor
onSizeChange: function() {
this.setHtml(this.getHtml() + '<br />Size changed!');
}
});

Ext.application({
name: 'Sencha',

launch: function() {
this.main = Ext.create("MyView", {
fullscreen: true
});
}
});

SamuraiJack1
29 Nov 2011, 11:09 AM
So the monitor needs to be refreshed on "paint" event, ok, thanks.

What about "painted" event being fired twice? I thought its only fired when the component is moved into DOM

rdougan
29 Nov 2011, 11:13 AM
I'm not sure why that is happening. Seems to be a bug.

SamuraiJack1
29 Nov 2011, 11:18 AM
I see. Ok, thanks a lot for help! I was blocked by this sizing issue and now can move further.