PDA

View Full Version : Error in adding a text field to a panel



adms
5 Jul 2010, 3:34 AM
when i add grid or a label to my panel:
var mainpan = Ext.getCmp('mainpan');
var labfld = new Ext.form.Label({
text:'hellow'
});
mainpan.add(labfld);//adding done successfully
but when i'am trying to add a text field like this:
var txtfld = new Ext.form.TextField();
mainpan.add(txtfld);//WILL CAUSE THIS ERROR:
ct is null ct.dom.insertBefore(this.el.dom, position);
when resizing the panel in the browser at run time, the textfield will apear(shown)
what is the problem???
working on extjs 3.2.1

Condor
5 Jul 2010, 4:20 AM
1. Doesn't the TextField need a config object?
2. Call mainpan.doLayout() after adding the required components.

adms
5 Jul 2010, 11:53 PM
hi,
I cahnged my code as follows:
var txtfld = new Ext.form.TextField({
fieldLabel:'my text field'
});
mainpan.add(txtfld);
mainpan.doLayout();
but the error is still occurred,
ct is null
[Break on this error] ct.dom.insertBefore(this.el.dom, position);

Condor
6 Jul 2010, 3:25 AM
There is something wrong with mainpan. Can you post the code used to create it?

adms
7 Jul 2010, 11:20 PM
thanks Condor,
the problem in the form layout in my mainpanel code:
var mainpan = new Ext.Panel({
title: 'MainPan'
, layout:'border'
, items : [{
xtype : 'form'
, title: 'Details'
, region : 'center'
, height : 250
, labelWidth : 60
, layout : 'form'
, deferredRender : false
, border : true
, frame : true
, defaults : {
defaults : {
xtype : 'panel'
, deferredRender : false
, border : false
, labelWidth : 150
, columnWidth : .5
, layout : 'form'
, defaults : {
xtype : 'textfield'
, labelSeparator : ''
}
}
}
, items : [{
layout : 'column'
, border : false
, style : 'padding:10px'
, items : [{
items : [{
fieldLabel:'drgdgfd'
}]
}, {
items : [{
fieldLabel:'drgdgfd'
}]
}]
}, {
xtype : 'panel'
, deferredRender : false
, border : false
, labelWidth : 150
, columnWidth : .5
, layout : 'form'
, defaults : {
xtype : 'textfield'
, labelSeparator : ''
}
, items : [{
fieldLabel:'drgdgfd'
},{
fieldLabel:'drgdgfd'
}]
}]
}]
});
I have an override for the form layout,that makes the error,after changing the override for the form layout,every thing is good,thanks
Adms

Condor
8 Jul 2010, 1:11 AM
That is a really strange layout and it probably is overnested. Could you draw a picture of how you want the fields aligned?

Your real problem is that mainpan is a panel with border layout. You can't add anything to a border layout.

But you don't actually want to add the textfield to mainpan! You want to add it to one of the inner panels (with form layout)!

adms
9 Jul 2010, 11:10 PM
you are right Condor,my code is over nested, because I have a big project with multiple panels.
yes I want to add the textfield to the inner panels of mainpan,not directly to mainpan.
var column1 = mainpan.getComponent(0).getComponent(0).getComponent(0);
column1 .add(textfield )//works
this statement: column1 .add(textfield ) works fine after deleting my override of form layout class.
Adms

Animal
9 Jul 2010, 11:34 PM
Statements like



mainpan.getComponent(0).getComponent(0).getComponent(0)


Are very, very brittle.

You should work out better ways of accessing the target Component.

Either by using the ref config, or by instantiating that explicitly and referencing it using a var

Also, if you want people to read the code you post you must wrap it with code tags.