ExtJS: Ext.LayoutDialog Gotchas

After much debugging I realized that in creating dialogs using Ext.LayoutDialog class of ExtJS library we must specify the configuration for east, west, north and south properties, as required, in the LayoutDialog config (see below for more requirements, details and a working example). This should be done before you add the content panels to the layout of the dialog. Otherwise you will get some really hard to debug errors.

Within the configuration you must at least specify the initialSize property for all the sections that it requires at the minimum to render. For example I omitted the initialSize for the center panel because it can still render with the specified size for the east panel as the total width is already known. However you need to specify the initialSize for the north column for it to render.

Interestingly they work fine, without specifying anything, the second time around which makes it even harder to debug. Let’s work with an example:

    multiValueChooser = new Ext.LayoutDialog('dialog', {
        modal: true,
        animate: true,
        width: 300,
        height: 200,
        shadow: true,
        minWidth:300,
        minHeight:200,
        proxyDrag: true,
        resizable: true,
        north: {
            initialSize: 25
        },
        east: {
            split:true,
            initialSize: 50,
            minSize: 50,
            maxSize: 50,
            titlebar: false,
            collapsible: true,
            animate: true
        },
        center: {
            autoScroll:true
        } 
    });

You must, for example specify the bolded sections before you add the relevant ExtContentPanel to the Layout as below:

    layout.beginUpdate();
    layout.add('north', new Ext.ContentPanel('north', {title: 'North'}));
    layout.add('east', new Ext.ContentPanel('east', {title: 'East'}));
    layout.add('center', new Ext.ContentPanel('center', {title: 'Center'}));

    layout.endUpdate();