PDA

View Full Version : Design recommendations



mschering
24 May 2007, 6:00 AM
I am building a groupware application. This application has notes, tasks appointments, contacts etc.

When I open such an item I want to load a basic dialog and create an XHR request to contact.php or appointment.php for example. This file should supply the borderlayout because every item must have a different layout.

It's important that all items can be called with one function for example showDialog('contact.php?id=1');

So creating a dialog function for every item will not do.

How can I do this? I'm not able to modify the layout from an XHR loaded file into the dialog body. Is there an example that does this?

Thanks in advance.

mschering
24 May 2007, 6:40 AM
I managed to do it like this now

In the main page I put

<div id="dialog"></div>

When want to load an item I call

Ext.get('dialog').load({ url: 'contact.php?id=1', scripts: true });

in contact.php I build a layout dialog like in the example:


<div class="x-dlg-hd">Layout Dialog</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>This dialog has the Vista theme applied.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>

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


<script type="text/javascript">

dialog = new Ext.LayoutDialog("dialog", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
// generate some other tabs
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();

layout = new Ext.BorderLayout(document.body, {
center: {

titlebar: true,
autoScroll:true,
closeOnTab: true,
tabPosition:top
}
});

layout.beginUpdate();

dialog.show();
</script>


This seems to work great. But is this the right way to go? It seems to be a fast way of loading dialogs dynamically.