PDA

View Full Version : GridPanel as form field



knifegun
24 Nov 2007, 6:22 AM
I am trying to create a form that takes in two textfield inputs and a list of items displayed in a gridpanel. The issue I am running into is that I cannot get the grid panel to be displayed like the rest of the form. I want the form to grid to display like the other fields with right hand side label of "Devices" and the grid displayed on the left hand side of the form.

I have attached the code I am trying to use. Essentially what happens is that the form is layed out as usual but the grid panel is left justified without a label. I have attached a screenshot for reference.

Thanks in advance


var propsGrid = new Ext.grid.GridPanel({
fieldLabel: "Devices",
colModel: cm,
autoExpandColumn: 'devs',
store: store,
viewConfig: {
scrollOffset: 0,
autoFill: true,
forceFit: true
}
}),
var simple = new Ext.FormPanel({
labelWidth: 175, // label settings here cascade unless overridden
url:'/devices',
id: 'deviceForm',
frame:true,
title: 'Device',
bodyStyle:'padding:5px 5px 0',
width: 600,
defaults: {width: 400},
defaultType: 'textfield',
items: [{
fieldLabel: 'Group Name',
name: 'groupName',
value: "<c:out value='${deviceForm.groupName}'/>",
id: 'groupName',
allowBlank:false
},{
fieldLabel: 'Type',
id: 'groupType',
value: "<c:out value='${deviceForm.groupType}'/>",
name: 'groupType'
},propsGrid
],
buttons: [{
text: (groupId < 0 ? 'Save' : 'Update'),
handler: saveGroup
},{
text: 'Cancel',
handler: cancel
}]
});

simple.render('test_form');

tryanDLS
24 Nov 2007, 8:17 AM
Look at the rendered HTML in Firebug. You should be able to apply padding to the grid's container to match the alignment of the the fields.

knifegun
24 Nov 2007, 11:57 AM
Thank for the quick reply. I will give that a try. I was hoping there was a simple way of extending the Field class to create a GridField which would automatically do the right thing with the label.

tryanDLS
24 Nov 2007, 12:27 PM
It would probably be overkill to extend Field to accomplish that.

knifegun
24 Nov 2007, 4:08 PM
Can someone please help me figure out how to create a left hand side label and line up the grid correctly on the right? I have tried everything I can think ok including form layouts I found on the Ext 2.0 samples pages and have gotten no where. Is there a better way to display a list of items within a form context?

Please help