View Full Version : LayoutDialog + Grid + toolbar display bug?

8 Dec 2006, 7:04 AM

I have a layoutdialog with center and east regions. In both regions I have a grid (center region contains grid with remote dataset, east region contains editgrid). The first problem is this. When i open the dialog, the grid toolbar falls out of the screen as shown in this screenshot:


Moving the slider, somehow fixes the problem with the toolbar and puts the toolbar in the right place.

After moving the slider, I close the dialog. When i re-open it again,this is what happens:


Anyone knows how to fix this? (is it a bug? or my mistake?)



8 Dec 2006, 7:26 AM
Is that a grid in a contentPanel or a gridPanel? This may be an issue of autoScroll vs fitToFrame - if you could post or link to a sample we could take a look.

8 Dec 2006, 7:40 AM
Ok, here is the code:

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

// define some private variables
var dialog, showBtn;

// return a public interface

return {

init : function(){
showBtn = getEl('show-dialog-btn');
showBtn.on('click', this.showDialog, this, true);

importContacts : function (selModel, row, ids){


showContact : function (selModel, row, ids){
if (ids.length > 0) {
dialog.getLayout().getRegion('east').getActivePanel().getGrid().getDataModel().load('index2.php', 'action=getContactInfo&contactpersoon_id=' + ids[0]);

saveGridChanges : function (grid, rowIndex, columnIndex){
// dialog.getLayout().getRegion('east').getActivePanel().getGrid().getDataModel().load('index2.php', 'action=updateContactInfo&contactpersoon_id=' + ids[0]);
// grid.getLastCell(grid.getRow(rowIndex)).innerHTML;

showDialog : function(){

cm = new YAHOO.ext.grid.DefaultColumnModel([
{header: "veld", width: 100},
{header: "waarde", width: 100, editor: new YAHOO.ext.grid.TextEditor({allowBlank: false})}
cm.defaultSortable = true;

dm = new YAHOO.ext.grid.XMLDataModel({
tagName: 'Field',
totalTag: 'TotalCount',
id: 'id',
fields: ['veld', 'waarde']

dm.setDefaultSort(cm, 0, 'desc');
dm.baseParams = {'action': 'getContactInfo', 'contactpersoon_id' : 1};

infogrid = new YAHOO.ext.grid.EditorGrid('info-grid', dm, cm);
infogrid.autoWidth = true;
infogrid.addListener('afterEdit', this.saveGridChanges);

sm = new YAHOO.ext.grid.SingleSelectionModel();
sm.addListener('selectionchange', this.showContact);

cm = new YAHOO.ext.grid.DefaultColumnModel([
{header: "naam", width: 100},
{header: "email", width: 100},
{header: "adres", width: 130},
{header: "test", width: 120}
cm.defaultSortable = true;

dm = new YAHOO.ext.grid.XMLDataModel({
tagName: 'contact',
totalTag: 'TotalCount',
id: 'id',
fields: ['naam', 'email', 'adres', 'test']

dm.initPaging('index2.php', 15);
dm.setDefaultSort(cm, 0, 'desc');
dm.baseParams = {'action': 'getContacts'};

dm.addListener('load', sm.selectFirstRow, sm, true);
grid = new YAHOO.ext.grid.Grid('addressbook-grid', dm, cm, sm);
grid.autoWidth = true;

var toolbar = grid.getView().getPageToolbar();
className: 'import-button',
text: "",
click: this.importContacts

if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.LayoutDialog("hello-dlg", {
east: {
initialSize: 250,
minSize: 100,
maxSize: 350,
titlebar: true,
collapsible: true,
animate: true
center: {
titlebar: true,
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.add('east', new YAHOO.ext.GridPanel(infogrid, {title: 'Details'}));
layout.add('center', new YAHOO.ext.GridPanel(grid, {title: 'Contacts'}));


// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
YAHOO.ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);

8 Dec 2006, 7:56 AM
I think this could be fitToFrame vs autoScroll confusion again.

Jack should make a blog entry on this issue (If he has time...)

fitToFrame is a config of ContentPanel and not meaningful on Region configs.

And I thought autoScroll should be false on a Region if GridPanels were being added because they size themselves?

8 Dec 2006, 8:15 AM
I removed the fitToFrame from the region config, and added it to the gridPanel config. MOreover, i have set autoScroll to false in both regions, but still both problems remain ...

8 Dec 2006, 8:16 AM
I think you're right. I do this with autoscroll:false on the region and fitToFrame:false on the GridPanel - not sure what the default values are. You should only get a scroll on the grid in this case if the rows exceed the height of the region.

9 Dec 2006, 7:00 AM
What version are you running and do you have display:none set anywhere for the dialog element?

9 Dec 2006, 11:25 PM
I'm facing a similar problem : http://www.yui-ext.com/forum/viewtopic.php?t=1253

In my case i'm displaying the grid in a tab. The grid div has style="border:1px solid #cccccc;overflow:auto;width:100%;height:100%;"

I'm on .33 RC3.

Seldon ,
Are you seeing this behavior in Firefox too? Because I'm only experiencing the issue on IE 6.


11 Dec 2006, 1:59 AM
I'm running .33 RC3 and i do not have "display:none" set anywhere on the dialog. I do have "visibility:hidden" set on it though. My problem occurs in Firefox and and IE7 (I didn't test it in other browsers yet).

11 Dec 2006, 5:34 AM
Can you could put up a link with a demo of the problem? It would make it a million times easier to find. Thanks.

11 Dec 2006, 6:06 AM
It appears that each time the link is clicked you are recreating the grid and models and rendering them into the same container rather than reusing the same dialog.

In the middle of showDialog you have if(!dialog){... to correctly lazy initialize the dialog. However, above that you are recreating the grid every time the dialog is displayed. The GridPanel contains a reference to the first grid created, but that grid is no longer valid after the first click and so it doesn't resize anything.

11 Dec 2006, 6:16 AM
Ah yes, how stupid of me. So no bug! My mistake! And thnx a lot! Oh one more thing, I corrected the grid-creation mistake. But it appears that the toolbar is still not rendered correctly initially. Am i still doing something wrong?

11 Dec 2006, 6:24 AM
I don't see anything in particular wrong. It rendered fine for me on first load (IE7). When I looked with firefox i couldn't get past the first page (it infinite looped and crashed FF).

14 Dec 2006, 2:23 AM
Jack solved the rendering problem with the grid toolbar (as described above) in firefox. It is implemented in the next build. I had to include

dialog.on('show', dialog.layout.layout, dialog.layout, true);

and then it worked.