How to get position (order) items in Extjs 4.1 - extjs

Question

I have a form panel in http://jsfiddle.net/YGQxb/
var form = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Test',
labelWidth: 50,
items: [{
xtype: 'fieldcontainer',
id: 'content',
items: [{
fieldLabel: 'Date',
xtype: 'datefield',
name: 'first',
allowBlank: false
},{
xtype: 'button',
text: 'Get position',
handler: function () {
// how to get position of items
alert('position is 1 of id:content');
}
}]
}]
}],
renderTo: Ext.getBody()
});
That has 2 items (date, button). I want to get position of date item or button item of parent has id 'content'.
Is that posible? how to do that thanks

Answer 1

If you are looking for parent order, http://jsfiddle.net/YGQxb/8/ it depends on where you start... You could use .up() and .down() and count until you reach the itemId you want as root parent or leaf child.
...
itemId: 'content',
...
handler: function () {
// how to get position of items
var reachedRoot = false;
var maxHops = 10;
var parent;
var cnt = 0;
while (!reachedRoot && cnt < maxHops){
parent = this.up();
cnt+=1;
if (parent.itemId == 'content') {
reachedRoot = true;
}
}
alert("Button depth from content:" + cnt);
}
...
If you are looking for index position: jsfiddle.net/YGQxb/7/
handler: function () {
// how to get position of items
var dateField = this.previousSibling();
var button = this;
var parentContainer = this.up();
alert('dateField pos: ' + parentContainer.items.keys.indexOf(dateField.id));
alert('button pos: ' + parentContainer.items.keys.indexOf(button.id));
}
If you look for XY Position... here jsfiddle.net/YGQxb/6/
You can use .up() or .down() to query parent and children ex.: .up('#content') in your case. Then use .getPosition() to get the position.
...
handler: function () {
// how to get position of items
var parent = this.up('#content');
var parentPos = parent.getPosition();
var btnPos = this.getPosition();
alert(Ext.String.format("parent Pos:{0}x{1} Button Pos: {2}x{3}",
parentPos[0],
parentPos[1],
btnPos[0],
btnPos[1])
);
}
...

Answer 2

You can add those itemId properties to each of your items and use getPosition() method on those items you would like to get position.
example code :
var c = new Ext.panel.Panel({ //
height: 300,
renderTo: document.body,
layout: 'auto',
items: [
{
itemId: 'p1',
title: 'Panel 1',
height: 150
},
{
itemId: 'p2',
title: 'Panel 2',
height: 150
}
]
})
p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling
and to get position now you could use p1.getPosition()
Also your code could work like this fidle . OwnerCt points to fieldcontainer