PDA

View Full Version : 2nd floating popup makes 1st go away



DaveC426913
21 Dec 2010, 9:16 AM
I don't get what could possibly be doing this. I've ripped out all code.

1] When you click on a line item, it shows() a full screen dialogue (ItemSummary) showing the summary of that item.
2] You then select one of those items to edit, and that shows() another dialogue (ItemTitle) over the first one.
3] When you finish editing the title, you save and that will hide() the ItemTitle dialogue, leaving you back on ItemSummary.

That's what should happen. I did a barebones test to ensure that Sencha Touch exhibits this behavior correctly (see bottom code block). Indeed, this barebones works OK.


What's happening in my app is that, the moment I click ANYWHERE on the ItemTitle screen, ItemSummary disappears. (As part of my debugging, I've offset their xy on my page to ensure it's not just hiding.)


My app with absolutely everythnig ripped out:


new Ext.Application({ // MAIN
name: 'myApp',
launch: function(){
new Ext.Panel({
fullscreen: true,
x: 175,
y: 20,
items: [{
xtype: 'button',
text: 'go',
handler:
function(){
var cmpDialogue = new ItemSummary;
cmpDialogue.show();
}
}],
});
},

});
ItemSummary = Ext.extend(Ext.Panel, {
initComponent: function() {
var config = {
fullscreen: true,
floating: true,
x: 75,
y: 75,
items: [{
xtype: 'button',
text: 'next popup',
handler:
function(){
var cmpDialogue = new ItemTitle;
cmpDialogue.show();
}
}]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
ItemSummary.superclass.initComponent.apply(this, arguments);
},
});
ItemTitle = Ext.extend(Ext.Panel, {
initComponent: function() {
var config = {
id: 'inpItemTitle',
cls: 'userinput',
floating: true,
fullscreen: true,
x:90,
y:50,
html: 'title'
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
ItemTitle.superclass.initComponent.apply(this, arguments);
},
});





Barebones test - multi-level popup:


new Ext.Application({ // MAIN
name: 'appConcierge',
launch: function(){
new Ext.Panel({
fullscreen: true,
items:[{
html: 'This is panel 0'
},{
xtype: 'button',
text: 'Open popup 1',
handler: this.pop_1
}]
});
},
pop_1: function(){
var popup = new Popup_1;
popup.show();
}

})

Popup_1 = Ext.extend(Ext.Panel, {
initComponent: function() {
var config = {
fullscreen: true,
x:50,
y:50,
items:[{
html: 'This is popup 1'
},{
xtype: 'button',
text: 'Open popup 2',
handler: this.pop_2
}]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
Popup_1.superclass.initComponent.apply(this, arguments);
},
pop_2: function(){
var pop_2 = new Popup_2;
pop_2.show();
}
})
Ext.reg('popup_1', Popup_1);
Popup_2 = Ext.extend(Ext.Panel, {
initComponent: function() {
var config = {
fullscreen: true,
x:100,
y:100,
items:[{
html: 'This is popup 2'
}]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
Popup_2.superclass.initComponent.apply(this, arguments);
}
})
Ext.reg('popup_2', Popup_2);

DaveC426913
21 Dec 2010, 9:43 AM
It's that floating property again. That's what's causing it. If I remove floating: true, then my 2nd floating dialogue persists.


Unfortunately, if I don't float my dialogues, it mangles the screen - the dialogues appear underneath some controls on my base page, such as tabbars, etc.

I've got to use CSS z-index properties to get them to appear properly.

Is this the Sencha way?