grid in a dialog in a form in a...no that's enough

[HarryC]

I've a grid with a list of people. Double click on a name and it pops up a dialog. I render a form within that dialog. The form contains details of the person and lets you edit the fields. This all works lovely (can post code if need be), but I now want to extend it by putting a grid onto the dialog as well as the form (the grid is to be used to check multiple attributes for that person).

I can't for the live of me work out how to get a form and a grid into a dialog. I can do them seperately, but not together. I've been trying to do this all week, poring through posts on the forums and didn't really want to post myself as I know I should be able to work this out, but I just haven't managed. So if someone can post an example I'd really appreciate it.

[HarryC]

I suppose some code might help, this is a simplified version of my form and dialog creation code. Where and what should I do to also have a grid displayed under (within?) the form?



maintForm = new Ext.form.Form({});
maintForm.add(
new Ext.form.TextField({fieldLabel: tableName, id: 'Name', name: 'Name', width: 160, maxLength: 60, allowBlank: false, value: Name}),
new Ext.form.TextField({fieldLabel: 'Code', id: 'Code', name: 'Code', width: 60, maxLength: 6, allowBlank: false, value: Code}),
new Ext.form.Checkbox({boxLabel: 'Enabled', id: 'isEnabled', name: 'isEnabled', width: 'auto', checked: Enabled})
);
// only create Dialog once
if(!maintDialog){
// LayoutDialog
maintDialog = new Ext.BasicDialog("maintenance-dlg", {
autoCreate: true, title: title, height: 450, width: 300, minWidth:300, minHeight:300, modal:true,
closable: true, collapsible: false, fixedcenter: true, shadow:true, proxyDrag: true,
center: {autoScroll:true, tabPosition: 'top', closeOnTab: false, alwaysShowTabs: true}
});
maintDialog.addKeyListener(27, maintDialog.hide, maintDialog);
maintDialog.addButton('Submit', doSubmit, this);
maintDialog.addButton('Cancel', maintDialog.hide, maintDialog);
}
maintForm.render(maintDialog.body);
maintDialog.show();

[evant]

var formHolder = Ext.DomHelper.append(maintDialog.body, {tag: 'div', id: 'formHolder'}, true);
var gridHolder = Ext.DomHelper.append(maintDialog.body, {tag: 'div', id: 'gridHolder '}, true);


Render your form to the form holder, render your grid to the grid holder.

[Animal]

You need a center AND a south region in your LayoutDialog.

It depends upon how you're using them as to which goes where.

Put the Grid into a GridPanel, and put the GirdPanel into whichever Region you end up choosing.

[HarryC]

Thanks, for both your suggestions, I am (finally) almost there. I've actually got it working, it's just not quite how I'd like it to work. I'll post my code and what it looks like and then how I'd LIKE it too look and perhaps people can make some suggestions. Tried my best to simplify my code, but there's still lots (but perhaps it'll be useful for other people as it does work after all).



// Create Dialog
if(!maintDialog){
maintDialog = new Ext.LayoutDialog("maintenance-dlg", {
autoCreate: true, title: 'New Album', height: 420, width: 640, minWidth:300, minHeight:300, modal:true,
closable: true, collapsible: false, fixedcenter: true, shadow:true, proxyDrag: true,
center: {},
south:{height:200, tabPosition:'bottom', closeOnTab:false, alwaysShowTabs:true}
});
maintDialog.addKeyListener(27, maintDialog.hide, maintDialog);
maintDialog.addButton('Submit', doSubmit, this);
maintDialog.addButton('Cancel', maintDialog.hide, maintDialog);
var map = new Ext.KeyMap("maintenance-dlg", {key: 13, fn: doSubmit, scope: maintDialog});
maintDialog.on('show', function(){maintForm.items.item(0).focus();});
}
//### Create Grids
// Shop Grid
var dsAlbumShops = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'maintenance-data.asp'}),
reader: new Ext.data.JsonReader({root: 'myFriends', totalProperty: 'totalCount', id: 'id'},
[{name: 'ID', mapping: 'id', type: 'int'}, {name: 'Name', mapping: 'name', type: 'string'},{name: 'Enabled', mapping: 'enabled', type: 'boolean'}]
)
});
dsAlbumShops.baseParams = {table: 'Shop', limit:dropPageSize};
dsAlbumShops.load();
// Country Grid
var dsAlbumCountry = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'maintenance-data.asp'}),
reader: new Ext.data.JsonReader({root: 'myFriends', totalProperty: 'totalCount', id: 'id'},
[{name: 'ID', mapping: 'id', type: 'int'}, {name: 'Name', mapping: 'name', type: 'string'},{name: 'Enabled', mapping: 'enabled', type: 'boolean'}]
)
});
dsAlbumCountry.baseParams = {table: 'Market', limit:dropPageSize};
dsAlbumCountry.load();
// column model used by both shops and countries
var cmTrader = new Ext.grid.ColumnModel([
{header: "Linked", dataIndex: 'Enabled', width: 55, renderer: formatBoolean},
{header: "Name", dataIndex: 'Name', width: 270, sortable: true}
]);
var gridAlbumShop = new Ext.grid.Grid('traderAsset-grid', {ds: dsAlbumShops, cm: cmTrader,
listeners: { // add a cellclick listener to the grid
cellclick: function(o, row, cell, e) {
// ensure mouseclick occurred within checkbox icon's visible area
if (o.getColumnModel().getDataIndex(cell) == 'Enabled' && e.getTarget('.checkbox', 1)) {
var rec = o.getDataSource().getAt(row);
rec.set('Enabled', !rec.get('Enabled')); // toggle "Enabled" value
}
}
}
});
gridAlbumShop.render();
var gridAlbumMarket = new Ext.grid.Grid('albumMarket-grid', {ds: dsAlbumCountry, cm: cmTrader,
listeners: { // add a cellclick listener to the grid
cellclick: function(o, row, cell, e) {
// ensure mouseclick occurred within checkbox icon's visible area
if (o.getColumnModel().getDataIndex(cell) == 'Enabled' && e.getTarget('.checkbox', 1)) {
var rec = o.getDataSource().getAt(row);
rec.set('Enabled', !rec.get('Enabled')); // toggle "Enabled" value
}
}
}
});
gridAlbumMarket.render();
// create layout for form and grids.
var layout = maintDialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel("center", {autoCreate:true, title: 'Filter Table'}));
layout.add('south', new Ext.GridPanel(gridAlbumShop,{title:'Shops'}));
layout.add('south', new Ext.GridPanel(gridAlbumMarket,{title:'Countries'}));
layout.endUpdate();
// Create Form
maintForm = new Ext.form.Form({});
maintForm.column(
{width:282}, // precise column sizes or percentages or straight CSS
new Ext.form.TextField({fieldLabel: 'Title', id: 'Title', name: 'Title', width: 160, maxLength: 60, allowBlank: false}),
new Ext.form.TextField({fieldLabel: 'Artist', id: 'Artist', name: 'Artist', width: 160, maxLength: 60, allowBlank: true}),
new Ext.form.TextField({fieldLabel: 'Label', id: 'Label', name: 'Label', width: 160, maxLength: 60, allowBlank: true}),
new Ext.form.TextField({fieldLabel: 'Release Date', id: 'Release', name: 'Release', width: 160, maxLength: 60, allowBlank: true})
);
maintForm.column(
{width:272, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
new Ext.form.TextArea({fieldLabel: 'Notes', id: 'Notes', name: 'Notes', height:50, width: 160, maxLength: 60, allowBlank:true}),
new Ext.form.TextField({fieldLabel: 'Price', id: 'Price', name: 'Price', width: 160, maxLength: 60, allowBlank: true}),
new Ext.form.Checkbox({boxLabel: 'In Shops?', id: 'Withdrawn', name: 'Withdrawn', width: 'auto'})
);
maintForm.render('maintenance-form');
Ext.get('maintenance-form').boxWrap('x-box');
layout.showPanel("maintenance-form");

maintDialog.show();


How it looks:

http://extjs.com/forum/attachment.php?attachmentid=1677&stc=1&d=1189434501

How I'd like it to look (my woeful Photoshop skills aside)

http://extjs.com/forum/attachment.php?attachmentid=1679&stc=1&d=1189434501

[para]

I would suggest nesting another layout there. Create another layout that is a 'west' and 'center' only, and then put that into the 'south' region of the dialog layout. Here's some quick code to get you started.



// Create Dialog

gridAlbumMarket.render();
// create layout for form and grids.

// I think the el is correct, but i'm not sure
var southLayout = new Ext.BorderLayout(maintDialog.getLayout().getRegion('south').bodyEl, {
west: {initialSize: 300},
center:{}
});

var layout = maintDialog.getLayout();
layout.beginUpdate();
southLayout.beginUpdate();

southLayout.add('west', new Ext.GridPanel(gridAlbumShop,{title:'Shops'}));
southLayout.add('center', new Ext.GridPanel(gridAlbumMarket,{title:'Countries'}));

layout.add('center', new Ext.ContentPanel("center", {autoCreate:true, title: 'Filter Table'}));
layout.add('south', new Ext.NestedLayoutPanel(southLayout, {title: 'Whatever'}));
southLayout.endUpdate();
layout.endUpdate();
// Create Form

Hope this helps

[HarryC]

Thanks again. I posted that and realised I was almost there and should have realised what to do. I think I'm just tired after doing this one little thing for a week.

Pretty much as suggested:



var southLayout = new Ext.BorderLayout(maintDialog.getLayout().getRegion('south').bodyEl, {
west: {initialSize: 300, title:'Shops'},
east:{initialSize: 300, title: 'Countries'}
});
var layout = maintDialog.getLayout();
layout.beginUpdate();
southLayout.beginUpdate();
southLayout.add('west', new Ext.GridPanel(gridAlbumShop));
southLayout.add('east', new Ext.GridPanel(gridAlbumMarket));
layout.add('center', new Ext.ContentPanel("center"));
layout.add('south', new Ext.NestedLayoutPanel(southLayout));
southLayout.endUpdate();
layout.endUpdate();


Almost perfect (!) but how do I remove the empty tab at the bottom?

[evant]

Set hideTabs: http://extjs.com/deploy/ext/docs/output/Ext.LayoutRegion.html#config-hideTabs

[para]

I've never tried having just an East and West with no center. It might work... I've always done West and center or East and center, depending on the behavior I desire.
Let me know how it works out.

[HarryC]

Ah, even simpler, I had "alwaysShowTabs:true" in my LayoutDialog creation for the "south" region. Removed that and it looks great. Thanks for the help everyone.