PDA

View Full Version : [Solved]Extended window containing formpanel(textfield) shows differently in browsers



jsemmanuel
2 Jan 2010, 4:25 AM
I am extending a window as following to have a formpanel with a text field in it. I had many other fields, but I stripped it all away to make sure I was using it properly.

I am sure, my understanding of how to do this is wrong, but I am stumped as to how to proceed.

I have attached some screenshots of the problem.



Ext.ux.pow=Ext.extend(Ext.Window,{
constructor:function(config){
Ext.apply(this,{
title:config.title,
width:500,
layout:'fit',
items:[
new Ext.form.FormPanel({
bodyStyle:'padding:10px;',
autoHeight:true,
baseParams:{task:'save_user'},
width:480,
defaults:{anchor:'100%'},
items:[
new Ext.form.TextField({
fieldLabel:'First Name',
name:'fname',
allowBlank:false
}) ]

})
]
});

Ext.ux.pow.superclass.constructor.call(this);

}
})
I am creating the instances simply by


win=new Ext.ux.pow({title:'Edit Advertiser'});
win.show();


screenshots are of firefox, ie6 and chrome as in seen in the filenames.

Condor
2 Jan 2010, 4:38 AM
Not seeing this. Which Ext version are you testing this on?

jsemmanuel
2 Jan 2010, 4:40 AM
3.0.3

Condor
2 Jan 2010, 4:43 AM
Also tested on Ext 3.0.3 with Firefox 3.5.6, IE6 and Chrome 4.0, but still not seeing this.

jsemmanuel
2 Jan 2010, 5:27 AM
:(

Yes, a separate page with only this code seems to work fine. However once I put it in with my other components, I get this.

This is going to be some difficult debugging session.

Thanks.

Condor
2 Jan 2010, 5:40 AM
Are you loading any custom css?

jsemmanuel
2 Jan 2010, 6:13 AM
I was checking that too, but commenting out all link tags that didn't seem needed and then manually going through the other css files, yielded nothing.

I then junked the whole ux element i had made and rewrote it and it worked. The elements show up properly now.

I know I must have made some mistake in the previous code, but I can't figure out what it might have been. I will take a diff shortly, but since the same problem was showing up in the bit of minimal code I posted, I think it might have been some cache error, but since the annoyance was there across browsers, that doesn't seem feasible either.

Anyway, if it comes up again, I will be watchful.

Thanks a ton.

jsemmanuel
7 Jan 2010, 1:41 AM
Finally figured out the problem by a lucky chance.

I am using an old version of multiselect and the css apparently had been modified by another coder.
Commenting this part of css out from the file, fixed the issue.


.x-form-item {
width: 450px;
}