CODEWITHSUNDEEP
extjsextjs4.1
DeLe
DeLe

Reputation: 2480

How to get position (order) items in Extjs 4.1

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

Upvotes: 0

Views: 2358

Answers (2)

Xelt
Xelt

Reputation: 396

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])
                 );
            }
...

Upvotes: 2

kuldarim
kuldarim

Reputation: 1106

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

Upvotes: 0

Related Questions