PDA

View Full Version : Strange form rendering in FF



ben_dog
11 May 2009, 3:16 AM
Hi everyone,

I'm running into this problem lately with Firefox. I have a window that opens up to edit/add entries.

When the window renders there's an intermitent problem where some of the fields render their container div way too large and display a horizontal scrollbar underneath :-/

It's not always the same, sometime it renders fine, sometime it doesn't for one field, sometime 2 fields...

See screenshot attached to see what I mean.

It only seem to happen with Firefox (3.0.10). I've tried with Flock (2.0.3) and it doesn't happen. I don't remember seeing that before on FF either.

Anyone has any idea what's causing this?

Cheers
Ben

jay@moduscreate.com
11 May 2009, 3:17 AM
ben, code?

ben_dog
11 May 2009, 3:27 AM
Hi,

Yes, that would help, sorry :">

I've trimmed it to the basic and with just that simple example i'm still getting the problem:



Ext.ns('app');

app.EntryEdit = Ext.extend(Ext.Window, {

initComponent : function()
{


var yesnoStore = new Ext.data.SimpleStore({
fields:['value','label'],
data: [ ["1","Yes"],
["0","No"],
[null,'Unkown']]});


Ext.apply(this,{
width:500,
height:300,
border:false,
layout:'fit',
title:'Edit Entry',
items : {
xtype:'form',
defaults: {width: 200},
defaultType: 'textfield',
bodyStyle:'padding:10px',
monitorValid:true,
items : [
{
fieldLabel:"Title",
name:"title",
allowBlank:false
},

{
xtype:"combo",
store: new Ext.data.SimpleStore({
fields:['value','label'],
data: [ ["OPEN","Open"],
["READY","Ready"],
["REVIEW","On Review"],
["CLOSED","Closed"]
]}),
fieldLabel:"Status",
triggerAction: 'all',
valueField:'value',
displayField:'label',
mode: 'local',
lazyRender:true,
hiddenName:"status"
},{
xtype:"combo",
store: new Ext.data.SimpleStore({
fields:['value','label'],
data: [ ["W","Windows"],
["M","Mac"],
[null,'Unkown']
]}),
fieldLabel:"Win/Mac",
triggerAction: 'all',
valueField:'value',
displayField:'label',
mode: 'local',
lazyRender:true,
hiddenName:"winmac"
},{
xtype:"combo",
store: yesnoStore,
fieldLabel:"Public",
triggerAction: 'all',
valueField:'value',
displayField:'label',
mode: 'local',
lazyRender:true,
hiddenName:"public"
}
]
},
buttons: [
{
text: 'Save',
handler: this.onEntrySave,
scope:this
}
]
});
app.EntryEdit.superclass.initComponent.apply(this, arguments);


}

,onEntrySave : function()
{

}
});


And this to load up the window



new app.EntryEdit({}).show()


Thanks for your help

Ben

ps. I'm using Ext 2.2

ben_dog
11 May 2009, 3:30 AM
More info!

Opened multiple windows with that example and I am seeing two different bad behaviours.

The scrollbar one only seem to happen for the combo field.

But i'm also getting this problem with the text field now and then, cf. screenshot.

Condor
11 May 2009, 3:41 AM
Ext 2.2 or older?

Try:

Ext.form.Field.prototype.stateful = false;

(or disable the state manager entirely if you are not using it)

ben_dog
11 May 2009, 3:41 AM
Looking at it with Firebug, it seems that the faulty element receives an additional top & left css style for some reason



<div tabindex="-1" class="x-form-item">
<label class="x-form-item-label" style="width: 100px;" for="ext-comp-1083">Status:</label>
<div style="padding-left: 105px;" id="x-form-el-ext-comp-1083" class="x-form-element">
<div class="x-form-field-wrap" id="ext-gen1131" style="width: 500px; left: 441px; top: 396px;">
<input type="hidden" id="status" name="status" value=""/><input type="text" id="ext-comp-1083" autocomplete="off" size="24" class="x-form-text x-form-field" style="width: 475px;"/><img class="x-form-trigger x-form-arrow-trigger" src="/resources/images/default/s.gif" id="ext-gen1132"/>
</div>
</div>
<div class="x-form-clear-left"/>
</div>


see the "left: 441px; top: 396px;" on the ext-gen1131 element. Correct element don't have a left & top, faulty ones do

:-? + :-/ = :((

Ben

ben_dog
11 May 2009, 3:44 AM
2.2 & I am using the state manager.




Ext.form.Field.prototype.stateful = false;

That seems to have worked!

Thank you, Thank you, Thank you! :D

Ben