PDA

View Full Version : [Solved] Grid and Dialogbox - Dialog crashes - Design error



LifeDLX
7 Aug 2007, 3:05 AM
Hi guys,
i've a weird problem with my dialogboxes.
In the screenshots you can see the problem.
The first picture (bild2.png) shows my grid an layout.
The second (bild3.png) shows a normal dialogbox which is opened by clicking on the Sample button.
If you close this dialog and open it again by clicking the sample button, the result is shown in picture 3 (bild4.png).
The buttons are mirrored and the design looks like duplicated over each other, i dont know.
If you close that dialog, you can see picture 4 (bild5.png) which shows a shadow and the rest of the screen isn't activated.

Thats what Safari shows. Firefox shows fewer. If you click the sample button, the whole screen is deactivated and you can't click anything...
The screenshot number 5 shows it. (bild1.png)

So now the code ^^.

Create the buttons:

var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: myPageSize,
displayInfo: true,
displayMsg: 'total {2} results found. Current shows {0} - {1}',
emptyMsg: "not result to display"
});
// add the detailed add button
paging.add('-', {
pressed: true,
enableToggle:true,
text: 'Add',
cls: '',
toggleHandler: doAdd
});
paging.add('-', {
pressed: true,
enableToggle:true,
text: 'Sample',
cls: '',
toggleHandler: doSample
});
// add the detailed delete button
paging.add('-', {
pressed: true,
enableToggle:true,
text: 'Delete',
cls: '',
toggleHandler: doDel
});

Button functions:

function doSample(){
var dlg = new Ext.BasicDialog("dlg", {
height: 200,
width: 300,
minHeight: 100,
minWidth: 150,
modal: true,
proxyDrag: true,
shadow: true
});
dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
dlg.addButton('Cancel', dlg.hide, dlg);
dlg.show();
}

function doAdd(){
var aAddInstanceDlg;
showBtn = Ext.get('show-dialog-btn');
if (!aAddInstanceDlg) {
alert("create dialog");
aAddInstanceDlg = new Ext.LayoutDialog("a-addInstance-dlg", {
autoCreate: true,
modal:true,
width:500,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag:true,


center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});

aAddInstanceDlg.addButton('Reset', resetForm, aAddInstanceDlg);
aAddInstanceDlg.addButton('Close',aAddInstanceDlg.hide,aAddInstanceDlg);
aAddInstanceDlg.addButton('Save', function() {



});

var layout = aAddInstanceDlg.getLayout();

layout.beginUpdate();

layout.add('center', new Ext.ContentPanel('a-addInstance-inner', {title: 'create account'}));

layout.endUpdate();
aAddInstanceDlg.show();

};


Html Code:

<div id="dlg"></div>
<div style="width:100%;height: 100%" class="x-box-blue">
<!-- Round corners top -->
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc">
</div>
</div>
</div>
<!-- Round corners top -->
<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<h3 style="margin-bottom:5px;"><?php echo __("Userlist");?></h3>
<!-- Grid -->
<div id="datagrid" style="border:1px solid #99bbe8;overflow: hidden; width: 100%; height: 400px;position:relative;left:0;top:0">
</div>
<!-- Grid -->



</div>
</div>
</div>
<!-- Round corners bottom -->
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc">

</div>
</div>
</div>
<!-- Round corners bottom -->
</div>
<!-- Dialog -->
<div id="a-addInstance-dlg" style="visibility:hidden;">
<div id="a-addInstance-inner">test
</div>
<div class="x-dlg-hd">Layout Dialog</div>
<div class="x-dlg-bd">

<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<p>This dialog has the Vista theme applied.</p>
<p>2123123</p>
</div>
</div>
</div>
<!-- Dialog -->


I guess that's the code you want to see.
Firebug don't show any errors.
I can't understand that kind of problem so please help me :)

If it's necessary i could create a online copy of my project.

I hope you can help me, thanks a lot.

LifeDLX
7 Aug 2007, 3:42 AM
i made it with a simpe innerHTML='', but it's not the best solution i guess:

function doSample(){
document.getElementById("dlg").innerHTML='';

var dlg = new Ext.BasicDialog("dlg", {
height: 200,
width: 300,
minHeight: 100,
minWidth: 150,
modal: true,
proxyDrag: true,
shadow: true
});
dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
dlg.addButton('Cancel', dlg.hide, dlg);
dlg.show();
}

LifeDLX
7 Aug 2007, 4:37 AM
ok, it works well in safari, but not in firefox, what's the problem? css?

LifeDLX
7 Aug 2007, 6:23 AM
{Solved}
<div> of dialog has to be a kind of body, that's difficult for content in a div for dynamic content like <div id="content"><div id="dialog"></div></div> (http://extjs.com/forum/showthread.php?t=4632&highlight=firefox+layout+dialog)

{Closed}