PDA

View Full Version : making a popup dialogue



DaveC426913
14 Dec 2010, 1:18 PM
I'm building an OK/Cancel dialogue. Two problems:

1] It looks fine if I let it appear immediately on the page load. but if I start with it hidden:true or setVisible(false) then, when I show it, it comes up contentless (a tiny box with nothing in it).

2] modal: true has no effect. I can click on anything I want.

I've tried various combinations of config properties inside or outside the component (as you may see in my code) but no joy.



CONCIERGE.UI.Component.ScrollList = Ext.extend(Ext.Container, {
initComponent: function() {
var config = {
items: [{
xtype: 'CONCIERGE_UI_component_popup',
id: 'popClearChecked',
x: 100,
y: 100,
style: 'position:absolute',
width: 400,
height: 200,
modal: true,
hidden:true,

}]
}]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
CONCIERGE.UI.Component.ScrollList.superclass.initComponent.apply(this, arguments);


Ext.getCmp("popClearChecked").setVisible(false);

deleteCheckedDialogue: function(){
var popup = Ext.getCmp("popClearChecked");
popup.setVisible(true);
},


CONCIERGE.UI.Component.Popup = Ext.extend(Ext.Panel, {
initComponent: function() {
var config = {
cls: 'popup',
style: 'position:absolute',
items: [{
html: 'Clear checked items?',
},{
xtype: 'panel',
layout: 'hbox',
items: [{
xtype: 'button',
html: 'Clear checked',
scope: this,
handler: this.btnClearChecked
},{
xtype: 'button',
html: 'Cancel',
scope: this,
handler: this.btnCancel
}]
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
CONCIERGE.UI.Component.Popup.superclass.initComponent.apply(this, arguments);
},

btnClearChecked: function(){
Ext.getCmp("myList").deleteCheckedReturn(true);
this.destroy();
},

btnCancel: function(){
Ext.getCmp("myList").deleteCheckedReturn(false);
this.destroy();
}

});
Ext.reg('CONCIERGE_UI_component_popup', CONCIERGE.UI.Component.Popup);