I encountered a interesting display bug when working with EXTJS recently. The following code renders well in FF 2 and above but not in IE6.
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 140,
url: 'abc/def.php',
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name',
anchor:'100%' // anchor width by percentage
}, {
xtype: 'textarea',
fieldLabel: 'Description',
name: 'description',
anchor: '100% -30' // bug in IE6
}]
});
var window = new Ext.Window({
title: 'Some Window',
width: 500, height: 300,
layout: 'fit',
plain: true,
buttonAlign: 'center',
items: form
});
window.show();brian.moeskau from the EXTJS forums was kind enough to answer this problem. The fix is a piece of code that primes the width of the controls to prevent it from overflowing out of the window/panels. The code is as follows
Ext.override(Ext.form.Field, {
adjustWidth : function(tag, w){
tag = tag.toLowerCase();
if(typeof w == 'number' && !Ext.isSafari){
if(Ext.isIE && (tag == 'input' || tag == 'textarea')){
if(!Ext.isStrict){
return this.inEditor ? w : w - 3;
}
if(tag == 'input' && Ext.isStrict){
return w - (Ext.isIE6 ? 4 : 1);
}
if(tag == 'textarea' && Ext.isStrict){
return w-4;
}
}else if(Ext.isOpera && Ext.isStrict){
if(tag == 'input'){
return w + 2;
}
if(tag == 'textarea'){
return w-2;
}
}
}
return w;
}
});I hope this will solve other people’s problems too!
read users' comments (0)
Most Popular
- HOWTO: PHP and jQuery upload progress bar (56)
- JQuery Progress Bar 1.1 (53)
- Howto: Repackageable custom extension development in Magento - Part 2 - Admin Controller (25)
- JQuery Progress Bar 2.0 (21)
- Howto: Repackageable custom extension development in Magento - Part 8 - CRUD - Update (18)
- HOWTO: struts 2 i18n (16)
- Howto: Repackageable custom extension development in Magento (12)
- JQuery Progress Bar 1.2 (11)
- Howto: Repackageable custom extension development in Magento - Part 9 - Frontend - List (10)
- Howto: Repackageable custom extension development in Magento - Part 3 - Database (9)
Recent Comments
- Karen: Great work around-thank you!!
- Sheldon: awesome possum!
- cmstop里所使用的有用的jquery插件 » Terry's Blog: [...] http://t.wits.sg/jquery-progress-bar/ 这篇日志的 t.cn [...]
- Lakshyami: Hi, Thank you very much for
- New site feature: User Poll « TechnoStripe: [...] progress bar used to
- seo agentur: @Krish Why do you need to
- 2kai: Hi Aromal, you need to flush
- Rob Rasner Magic Castle: I love what you guys
- รับทำเว็บไซต์: Thx for this. Nice and
- Lexus: ESxtYC I'm not easily impressed.
Latest Entries
- SD in the Community: Product Management Panel Recap
- Mac OS X and Ricoh Aficio C2051 - Making Printing "Just Work"
- How to impress your recruiter
- Thoughts on Attracting the attention of the Best Hires
- The Greg Syndrome
- The Parental Manager
- Attack of the Facebook Harvesters
- jQuery Progress Bar Configuration
- Extracting email addresses from inbox
- 10 Good (Free and Legal) Source for Photos and Images