Ext.Panel showBy fails for NestedList Item

[drb]

Touch 2.1.0-rc2

In Touch 2.0.1.1 one can bring up a modal Ext.Panel using showBy() on a NestedList item. This fails in 2.1.0-rc2.

Ext.setup({
    onReady: function () {

        var data = {
            text: 'Groceries',
            items: [{
                text: 'Sparkling',
                gp: "S",
                leaf: true
            }, {
                text: 'Still',
                gp: "S",
                leaf: true
            }, {
                text: 'Deep',
                gp: "D",
                leaf: true
            }, {
                text: 'Muddy',
                gp: "M",
                leaf: true
            }, {
                text: 'Ale',
                gp: 'A',
                leaf: true
            }]
        };

        Ext.define('ListItem', {
            extend: 'Ext.data.Model',
            config: {
                fields: [{
                    name: 'text',
                    type: 'string'
                }, {
                    name: 'gp',
                    type: 'string'
                }]
            }
        });

        var store = Ext.create('Ext.data.TreeStore', {
            model: 'ListItem',
            defaultRootProperty: 'items',
            root: data
        });

        var ver21 = Ext.version.version >= "2.1";

        var nestedList = Ext.create('Ext.NestedList', {
            fullscreen: true,
            title: 'Groceries',
            displayField: 'text',
            store: store,
            listeners: {
                leafitemtap: function (nlist, list, index, listElem, record, e, opts) {
                    console.log("leafitemtap: " + record.get("text"));
                    var target;
                    if (ver21) {
                        target = listElem.element.down(".x-list-item-body"); //  ".x-list-item-inner"
                    } else {
                        target = listElem.down(".x-list-item-label");
                    }
                    var onTop = (target.getPageBox().top > 70);
                    var sp = Ext.create("Ext.Panel", {
                        cls: "b-context-menu " + (onTop ? "b-top" : "b-bottom"),
                        modal: true,
                        hideOnMaskTap: true,
                        items: [
                            {
                                xtype: "segmentedbutton",
                                items: [{ text: "A" }, { text: "B" }, { text: "C"}],
                                listeners: {
                                    toggle: function (ctl, button, isPressed) {
                                        alert(button.getText());
                                        sp.destroy();
                                    }
                                }
                            }
                        ],
                        listeners: {
                            hide: function () {
                                sp.destroy();
                            }
                        }
                    });
                    if (onTop) {
                        sp.showBy(target, "bc-tc?"); // bc-tc? comes out 10 px to high. tc-bc? is 10 px to low
                    } else {
                        sp.showBy(target, "tc-bc?"); // bc-tc? comes out 10 px to high. tc-bc? is 10 px to low
                    }
                }
            }
        });
    }
});

To be completely honest, in 2.0.1.1, it generates a warning: [WARN][Ext.Container#setModal] You have specified a modal config on a container that is neither centered nor has any positioning information. Setting to top and left to 0 to compensate. sencha-touch-all-debug.js:26047

Thanks
David

[mitchellsimoens]

I would add centered : true or something and the showBy will change the position. Once I added centered config it worked.

[drb]

By adding centered: true to the Ext.Panel config I get the panel to display but it shift the underlying form down and the panel is displayed to the left, but the "tip" is in the center.

What else am I missing? I tried layout: { type: 'hbox', align: 'middle' } but it did not help.

And what happened to the border around the Ext.Panel?

The browser is Chrome Version 23.0.1271.64 m on Windows 7.

[drb]

Mitchell, has this been fixed subsequent to 2.1.0-rc2 ?
Thanks
David

[greg.barry]

A bug has been filed for this issue. The id is TOUCH-3721.

Thanks!
Greg