PDA

View Full Version : Multiple BasicDialog within a page



jaggybala
26 Apr 2007, 10:08 AM
Hello All,

Is it possible to have as many dialogs (popups?!) as we want? I will have between 35 to 50 fields in the page...

It would be great if you could say if it is possible and help me to start with :)

Regards,
J Balakrishnan

tryanDLS
26 Apr 2007, 11:52 AM
I would think that would get to be a performance/memory issue at some point. What about having 1 dialog, whose body gets updated depending on caller?

jaggybala
26 Apr 2007, 8:58 PM
Great, thanks for your idea. I have the same opinion.

But I want atleast 2 dialogs.. one for viewing and other for editing. How can I start with?

Please advise.

tryanDLS
27 Apr 2007, 9:42 AM
See the dialog example. You just need to assign different ids to the dialogs/containers.

jaggybala
30 Apr 2007, 12:00 AM
>> You just need to assign different ids to the dialogs/containers.
Excellent, thank you... Its working fine.. :-)

Kindly help me to start how can I have different bodies for the dialog (based on the caller).

Thanks a lot.

KappaCoder
8 Aug 2007, 5:28 AM
I too am having the same problem. I cannot get the two buttons I have on my page to open up separate dialogues. In a nutshell, I have two buttons, I want to open a different dialogue where each has its own content...here is the code.. please help!!!

What does you mean: "assign different ids to the dialogs/containers."
- What do I change in the layout.js file?
- Do I need to duplicate the Layout.js code below for the second dialog?

LAYOUT.JS
________________________________________________________________

// create my LayoutExample application (single instance)
var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn;

var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);

},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
west: { /* //COMMENTED OUT TO REMOVE LEFT SIDE SHRINKING PANEL
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true */ //COMMENTED OUT TO REMOVE LEFT SIDE SHRINKING PANEL
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false //COMMENTED OUT TO REMOVE THE MAIN TAB
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
// COMMENTED OUT TO REMOVE SUBMIT BUTTON // dialog.addButton('Submit', dialog.hide, dialog);
// COMMENTED OUT TO REMOVE CLOSE BUTTON // dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
// layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('center', new Ext.ContentPanel('center', {title: 'The BLA Tab'}));

/* DEVELOPER: CHANGE THE TEXT HERE TO REFLECT THE TAB NAME */

// COMMENT generate some other tabs COMMENT

/* layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Another Tab', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Third Tab', closable:true, background:true}));
*/
layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);



ON MY HTML PAGE:
________________________________________________________________

<input type="button" id="show-dialog-btn" value="Show Dialog1" /><br /><br />
<input type="button" id="show-dialog-btn2" value="Show Dialog2" /><br /><br />


<!-- 11111 dialog is created from existing markup -->
<div id="hello-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Layout Dialog 1</div>
<div class="x-dlg-bd">
<div id="west" class="x-layout-inactive-content">
West
</div>
<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<p>1111111111111</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus</p>

</div>
</div>
</div>



<!-- 2222222 dialog is created from existing markup -->
<div id="hello-dlg2" style="visibility:hidden;">
<div class="x-dlg-hd">Layout Dialog 2</div>
<div class="x-dlg-bd">
<div id="west" class="x-layout-inactive-content">
West
</div>
<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<p>222222222222</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus</p>

</div>
</div>
</div>






Any help would be very much appreciated. Thank you! kappaCoder ~o)

pravin_bluebird
8 Aug 2007, 5:42 AM
Hey guys,
sorry to interrupt, but this may be helpful when we use editing facility.

My problem is with combobox.
When i use dialog box for updating existing records,how can i show the value in combobox related to that record.
e.g iF i have Gender combobox and i had inserted female for the record.when i open it for editing i want that combobox will show me female as this is the value related to this records.



Regards
Pravin

KappaCoder
8 Aug 2007, 5:53 AM
I don't want to have them appear at the same time, just when I click on one the background fades and then I close it...then I click on the second one, different content appears and as before, the background fades. Thats all....any ideas...I'm a newbie and I'm not sure what variables and ID's I'd have to change.

Thanks!

kC

jkisner
8 Aug 2007, 7:56 AM
Hello,

Just copy and paste the function you have so that you have two identical functions within the js file. Then change the ids. Such as dialog to dialog2, showBtn to showBtn2. What you are looking for is two seperate functions that do the exact same thing but attached to two seperate buttons with two seperate sets of html tags.

I hope that helps.

KappaCoder
8 Aug 2007, 9:26 AM
Hi jkisner,

Thank you for responding to my post. I will make such that once the answer is found that I will make a tutorial from this on the site because from what I can see many have questions about this same issue. I'll ensure to also paste the code, but at present I did what you indicated and now my button1 only works, here are the changes I made to the Layout.js code:

Do you have any ideas or does anyone have any ideas...like I said, I've got to post this as a tutorial with screen shots.

// create my LayoutExample application (single instance)
var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn;

var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);

},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
west: { /* //COMMENTED OUT TO REMOVE LEFT SIDE SHRINKING PANEL
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true */ //COMMENTED OUT TO REMOVE LEFT SIDE SHRINKING PANEL
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false //COMMENTED OUT TO REMOVE THE MAIN TAB
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
// COMMENTED OUT TO REMOVE SUBMIT BUTTON // dialog.addButton('Submit', dialog.hide, dialog);
// COMMENTED OUT TO REMOVE CLOSE BUTTON // dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
// layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('center', new Ext.ContentPanel('center', {title: 'The BLA Tab'})); /* DEVELOPER: CHANGE THE TEXT HERE TO REFLECT THE TAB NAME */
// COMMENT generate some other tabs COMMENT
/* layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Another Tab', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Third Tab', closable:true, background:true}));
*/
layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);





/*
* 222222222222
*/

// create the LayoutExample application (single instance)
var LayoutExample2 = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog2, showBtn2;

var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn2 = Ext.get('show-dialog-btn2');
// attach to click event
showBtn2.on('click', this.showDialog, this);

},

showDialog2 : function(){
if(!dialog2){ // lazy initialize the dialog and only create it once
dialog2 = new Ext.LayoutDialog("hello-dlg2", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
west: { /* //COMMENTED OUT TO REMOVE LEFT SIDE SHRINKING PANEL
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true */ //COMMENTED OUT TO REMOVE LEFT SIDE SHRINKING PANEL
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false //COMMENTED OUT TO REMOVE THE MAIN TAB
}
});
dialog2.addKeyListener(27, dialog2.hide, dialog2);
// COMMENTED OUT TO REMOVE SUBMIT BUTTON // dialog.addButton('Submit', dialog.hide, dialog);
// COMMENTED OUT TO REMOVE CLOSE BUTTON // dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog2.getLayout();
layout.beginUpdate();
// layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('center', new Ext.ContentPanel('center', {title: 'The BLA Tab'})); /* DEVELOPER: CHANGE THE TEXT HERE TO REFLECT THE TAB NAME */
// COMMENT generate some other tabs COMMENT
/* layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Another Tab', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Third Tab', closable:true, background:true}));
*/
layout.endUpdate();
}
dialog2.show(showBtn2.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample2.init, LayoutExample2, true);


Cheers and thanks,

kC

KappaCoder
8 Aug 2007, 12:14 PM
It looks like the "ext-all.js" file is tied into the "layout.js" file whereby the line noting the "center" is declared in the "ext-all.js" file. Because its declared in this file, changing just the "layout.js" file by doubling up on the code and changing the ID's and seems not to work. See the code in the "layout.js" file below where the "center" is not only declared here but also as an ID in the "layout.html" file. By changing "center" to "center" in both the layout.js and the layout.html files it doesn't allow the developer to change the content in the second button (this goes without saying that the ID's and function names are changed respectively to correspond).

Can anyone help in making two buttons bring up separate dialog's...does anyone have any knowledge in how to accomplish this? :-/

Layout.js code:

center2: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false //COMMENTED OUT TO REMOVE THE MAIN TAB
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
// COMMENTED OUT TO REMOVE SUBMIT BUTTON // dialog.addButton('Submit', dialog.hide, dialog);
// COMMENTED OUT TO REMOVE CLOSE BUTTON // dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
// layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('center2', new Ext.ContentPanel('center2', {title: 'The BLA Tab'}));