PDA

View Full Version : Formpanel + no labels (v3.0)



Shaguar
31 Aug 2009, 2:25 AM
Hi,

i got an other problem with v3.0, no matter what i try i get no fieldLabels in my formpanels, i've copied the example here 1:1 (http://extjs.com/deploy/dev/examples/form/dynamic.js) but all i get is this http://img17.imageshack.us/img17/8149/unbenanntciw.jpg

sry for the big picture but anyway can somebody tell me what im doing wrong?
again here is the code i've used :

var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,

items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

Shaguar
31 Aug 2009, 6:11 AM
no ideas?

BlueCamel
31 Aug 2009, 6:31 AM
I would think you either have some CSS added or missing which is causing a problem.

Jack9
31 Aug 2009, 8:22 AM
Ext.onReady(function(){

var fieldSet1 = new Ext.form.FieldSet({
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {
width: 210
},
collapsed: true,
items :[
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last'
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company'
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email'
})
]
});

var fieldSet2 = new Ext.form.FieldSet({
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {
width: 210
},
items :[
new Ext.form.TextField({
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
}),
new Ext.form.TextField({
fieldLabel: 'Business',
name: 'business'
}),
new Ext.form.TextField({
fieldLabel: 'Mobile',
name: 'mobile'
}),
new Ext.form.TextField({
fieldLabel: 'Fax',
name: 'fax'
})
]
});

var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,
items: [
fieldSet1,
fieldSet2
],
buttons: [
new Ext.Button({
text: 'Save'
}),
new Ext.Button({
text: 'Cancel'
})
]
});

fsf.render('testDiv');
});

Shaguar
31 Aug 2009, 8:39 AM
i've tried the code above and it doesnt work, i replaced all my css files with the original ext 3 files and it still wont work. Somewhere i've prolly overwritten some code but i cant find anything.

Shaguar
31 Aug 2009, 8:46 AM
ok i've found the bad code, here it is :


Ext.override(Ext.layout.FormLayout, {
renderItem : function(c, position, target){
if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
var args = [
c.id, c.fieldLabel,
c.labelStyle||this.labelStyle||'',
this.elementStyle||'',
typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
(c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
c.clearCls || 'x-form-clear-left'
];
if(typeof position == 'number'){
position = target.dom.childNodes[position] || null;
}
if(position){
this.formItem = this.fieldTpl.insertBefore(position, args, true);
}else{
this.formItem = this.fieldTpl.append(target, args, true);
}
c.render(this.formItem, 'x-form-el-'+c.id);
c.actionMode = 'container';
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
}
});

i dont even know anymore why i got this override in my code and what it'S doing, can anybody tell me?

Jack9
31 Aug 2009, 8:53 AM
If you don't have Firefox, get it from getFirefox.com
If you don't have Firebug (firefox plugin), get it from getFirebug.com

Start up firefox. In the bottom right you will see a beetle icon, click it once. Drag the debugger window to about 25% of your screen. Enter the url you are debugging (this is after you've opened the firebug console). Watch the debugger messages. In the debugger, there are icons in the upper left corner. Choose the second one (a blue arrow over a clear rectangle with a blue outline). This is your element inspector, like the WebDeveloper firefox plugin. When you mouseover the elements in your form, it will show what css is being applied in the right pane. Any CSS listed is being applied and the display indicates which file is supplying it. Any CSS that is listed with a line through it, is being overridden by another rule listed.

1. If you would assemble all the CSS that is being applied and post it, I'm sure we can figure out what's causing the labels to not appear.

2. Any specific Javascript exceptions set in Firefox can adversely affect Ext in strange ways.

3. You should paste the paths to the Ext files in your browser to make sure that they come up. All the core Ext files should be accessible at runtime.

4. Make sure a bare-bones test case like I did where you only include the core Ext files, the Ext for the form, and a simple <body><div id='testDiv'></div></body> that you render to.

-------------------------

When including code you don't understand, don't be surprised if it causes unexpected behavior. The comments are the basic story...


Ext.override(// This changes default behavior of a component or method
Ext.layout.FormLayout, // You can think of layout as the basic organization of elements
{
renderItem : function(c, position, target){ // render means to draw.

// if the field isn't drawn yet and is a formfield and isn't of type "hidden"
if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
var args = [
c.id, c.fieldLabel,
c.labelStyle||this.labelStyle||'',
this.elementStyle||'',
typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
(c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''), // add the css type x-hide-label
c.clearCls || 'x-form-clear-left'
];
if(typeof position == 'number'){
position = target.dom.childNodes[position] || null;
}
if(position){
this.formItem = this.fieldTpl.insertBefore(position, args, true);
}else{
this.formItem = this.fieldTpl.append(target, args, true);
}
c.render(this.formItem, 'x-form-el-'+c.id);
c.actionMode = 'container';
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
}
}
);

Animal
31 Aug 2009, 11:05 AM
That's what cargo cult coding ends up doing to you.

BlueCamel
31 Aug 2009, 1:10 PM
I love this reference!