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