View Full Version : GridPanel as form field

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
id: 'deviceForm',
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',
fieldLabel: 'Type',
id: 'groupType',
value: "<c:out value='${deviceForm.groupType}'/>",
name: 'groupType'
buttons: [{
text: (groupId < 0 ? 'Save' : 'Update'),
handler: saveGroup
text: 'Cancel',
handler: cancel


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.

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.

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

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