Question

中有一个表单面板

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()
});

有2项（日期，按钮）。我希望得到父级date item或button item的位置id 'content'。

这是可能的吗？如何做到这一点，谢谢

Answer 1

如果您正在寻找父订单，http://jsfiddle.net/YGQxb/8/这取决于您的开始......您可以使用.up()和.down()并计算，直到您以root身份到达itemId父母或叶子。

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

如果您正在寻找索引位置：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));
            }

如果你寻找XY位置...这里是jsfiddle.net/YGQxb/6 /

您可以使用.up()或.down()查询您的案例中的父母和子女：.up('#content')。然后使用.getPosition()获取职位。

...
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

您可以将这些itemId属性添加到每个项目中，并对要获得位置的项目使用getPosition()方法。

示例代码：

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

现在可以使用p1.getPosition()

获得排名

此外，您的代码可以像fidle一样工作。 OwnerCt指向fieldcontainer

如何在Extjs 4.1中获取位置（订单）项目

2 个答案: