View Full Version : Ext.FormPanel's textfield appear normally but will not within a Ext.Panel

30 Jun 2008, 9:21 PM
I am able to create a panel that properly displays the textfields for input when it is a standalone form. However i want this form to be within a panel that will eventually hold other elements (a grid and detail). When i place my form within the Ext.Panel the textfields fail to render. Inspecting w/ firebug i can that the textfields aren't being rendered at all ie are hidden or behind something; the html for the fields are non-exsistant. below is my code any insight would be greatly appreciated.


SorApp.SorForm = Ext.extend(Ext.form.FormPanel, {
initComponent : function() {
Ext.apply(this, {
labelWidth: 75,
title: 'Form Inputs',
bodyStyle:'padding:5px 5px 0',
width: 350,
height: 200,
defaults: {width: 230},
defaultType: 'textfield',

items: [
{fieldLabel: 'First Name', id: 'fname'},
{fieldLabel: 'Last Name', id: 'lname'},
{fieldLabel: 'Gender', id: 'gender'},
{fieldLabel: 'Date Of Birth', id: 'dob'},
{fieldLabel: 'Social Security Number',id: 'ssn'}
buttons: [
{text: 'Submit'},
{text: 'Reset'},
Ext.reg('sorform', SorApp.SorForm);

SorApp.SorMasterDetail = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.applyIf(this, {
frame: true,
title: 'Panel',
height: 600,
width: 600,
layout: 'border',
items: [
xtype: 'sorform',
itemId: 'formPanel',
region: 'north',
height: 200

Ext.onReady(function() {
var form = new SorApp.SorMasterDetail({
renderTo: 'content'

30 Jun 2008, 9:53 PM
solved. This is done by calling the panels doLayout function.