PDA

View Full Version : Absolute layout in sencha touch



harrylepotter
12 Jul 2010, 6:34 PM
Hi,

I've noticed that sencha touch doesn't have an Absolute layout, unlike extJS. I'm attempting to write an app that explicitly requires absolute layouts, and have tried extending the componentLayout to lay-things out individually, but to no avail.

Has anyone had any luck with working absolute layouts in sencha touch?

Cheers,

Ben

evant
12 Jul 2010, 6:44 PM
ComponentLayout is the wrong thing to be extending. In this case you'd want to be writing a class that extends ContainerLayout.

You should be able to take most of the ideas from the Ext code. That being said, it's likely not going to scale very well from a UI perspective. I guess you're probably targetting a specific device?

harrylepotter
12 Jul 2010, 11:21 PM
Cheers for the reply. It helped muchly.
I've come up with something basic for myself that seems to do the job:



/**
* @class AbsoluteLayout
* @extends Ext.layout.ContainerLayout
* Lays out components absolutely
*/
var AbsoluteLayout = Ext.extend(Ext.layout.ContainerLayout, {
onLayout: function(owner, target) {
AbsoluteLayout.superclass.onLayout.call(this, owner, target);
this.getTarget().setX(0);
this.getTarget().setY(0);

var items = this.getLayoutItems();
var ln = items.length;

for (var i = 0; i < ln; i++) {
var item = items[i];
item.el.dom.style.setProperty('position','absolute',null);
item.setSize(item.width,item.height);
}
}
});
Ext.layout.TYPES['absolute'] = AbsoluteLayout;