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

【问题标题】：How to get position (order) items in Extjs 4.1如何在 Extjs 4.1 中获取位置（订单）项目
【发布时间】：2013-10-12 06:32:50
【问题描述】：

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

这有 2 个项目（日期、按钮）。我想获得date item 或button item 的父级位置有id 'content'。

这可能吗？怎么做谢谢

【问题讨论】：

标签： extjs extjs4.1

【解决方案1】：

如果您正在寻找父订单，http://jsfiddle.net/YGQxb/8/ 这取决于您从哪里开始...您可以使用 .up() 和 .down() 并计数，直到您达到您想要作为根父或叶子的 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])
                 );
            }
...

【讨论】：

srr 但我尝试获取项目的位置顺序，示例容器 id: 'content' 有 2 个项目，date 是 0，button 是 1。
也许如果你更详细地解释你在寻找什么我可以帮助你更多... :)

【解决方案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 指向字段容器

【讨论】：

srr 但我尝试获取项目的位置顺序，示例容器 id: 'content' 有 2 个项目，date 是 0，button 是 1。