Strange form rendering in FF

[ben_dog]

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]

ben, code?

[ben_dog]

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]

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]

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]

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]

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!

Ben