[2.0.2] IE7 quirks mode: anchored fields in fieldsets go super wide
Posted in xn--kfs74mzzid01b.com edit by anonym on January 7th, 2009
In these example pages, expand fieldset 5 to see the problem.
Quirksmode:
http://sonatype.com/~jrichard/ext-issues/bad_widths.html
Strict:
http://sonatype.com/~jrichard/ext-issues/bad_widths-strict.html
For related issues see:
http://extjs.com/forum/showthread.php?t=28283
http://extjs.com/forum/showthread.php?t=28286
I have a fix. This version of FormPanel uses a element as its body, so it resizes:
Ext.FormPanel = Ext.extend(Ext.Panel, {
/**
* @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
*/
/**
* @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
*/
/**
* @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
*/
/**
* @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
*/
buttonAlign:'center',
/**
* @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
*/
minButtonWidth:75,
/**
* @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
* This property cascades to child containers if not set.
*/
labelAlign:'left',
/**
* @cfg {Boolean} monitorValid If true the form monitors its valid state client-side and
* fires a looping event with that state. This is required to bind buttons to the valid
* state using the config value formBind:true on the button.
*/
monitorValid : false,
/**
* @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
*/
monitorPoll : 200,
/**
* @cfg {String} layout @hide
*/
layout: 'form',
// private
initComponent :function(){
this.form = this.createForm();
this.bodyCfg = {
tag: 'form',
method : this.method 'POST',
cls: 'x-panel-body',
id : this.formId Ext.id()
};
if(this.fileUpload) {
this.bodyCfg.enctype = 'multipart/form-data';
}
Ext.FormPanel.superclass.initComponent.call(this);
this.addEvents(
/**
* @event clientvalidation
* If the monitorValid config option is true, this event fires repetitively to notify of valid state
* @param {Ext.form.FormPanel} this
* @param {Boolean} valid true if the form has passed client-side validation
*/
'clientvalidation'
);
this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
},
// private
createForm: function(){
delete this.initialConfig.listeners;
return new Ext.form.BasicForm(null, this.initialConfig);
},
// private
initFields : function(){
var f = this.form;
var formPanel = this;
var fn = function(c){
if(c.doLayout && c != formPanel){
Ext.applyIf(c, {
labelAlign: c.ownerCt.labelAlign,
labelWidth: c.ownerCt.labelWidth,
itemCls: c.ownerCt.itemCls
});
if(c.items){
c.items.each(fn);
}
}else if(c.isFormField){
f.add(c);
}
}
this.items.each(fn);
},
// private
getLayoutTarget : function(){
return this.form.el;
},
/**
* Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
* @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
*/
getForm : function(){
return this.form;
},
// private
onRender : function(ct, position){
this.initFields();
Ext.FormPanel.superclass.onRender.call(this, ct, position);
this.form.initEl(this.body);
},
// private
beforeDestroy: function(){
Ext.FormPanel.superclass.beforeDestroy.call(this);
Ext.destroy(this.form);
},
// private
initEvents : function(){
Ext.FormPanel.superclass.initEvents.call(this);
this.items.on('remove', this.onRemove, this);
this.items.on('add', this.onAdd, this);
if(this.monitorValid){ // initialize after render
this.startMonitoring();
}
},
// private
onAdd : function(ct, c) {
if (c.isFormField) {
this.form.add(c);
}
},
// private
onRemove : function(c) {
if (c.isFormField) {
Ext.destroy(c.container.up('.x-form-item'));
this.form.remove(c);
}
},
/**
* Starts monitoring of the valid state of this form. Usually this is done by passing the config
* option "monitorValid"
*/
startMonitoring : function(){
if(!this.bound){
this.bound = true;
Ext.TaskMgr.start({
run : this.bindHandler,
interval : this.monitorPoll 200,
scope: this
});
}
},
/**
* Stops monitoring of the valid state of this form
*/
stopMonitoring : function(){
this.bound = false;
},
/**
* This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
* @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
*/
load : function(){
this.form.load.apply(this.form, arguments);
},
// private
onDisable : function(){
Ext.FormPanel.superclass.onDisable.call(this);
if(this.form){
this.form.items.each(function(){
this.disable();
});
}
},
// private
onEnable : function(){
Ext.FormPanel.superclass.onEnable.call(this);
if(this.form){
this.form.items.each(function(){
this.enable();
});
}
},
// private
bindHandler : function(){
if(!this.bound){
return false; // stops binding
}
var valid = true;
this.form.items.each(function(f){
if(!f.isValid(true)){
valid = false;
return false;
}
});
if(this.buttons){
for(var i = 0, len = this.buttons.length; i < len; i++){
var btn = this.buttons[i];
if(btn.formBind === true && btn.disabled === valid){
btn.setDisabled(!valid);
}
}
}
this.fireEvent('clientvalidation', this, valid);
}
});
Ext.reg('form', Ext.FormPanel);
Ext.form.FormPanel = Ext.FormPanel;
Will this change be included in future releases?
Thanks for the quick response, but this change doesn't fix the issue. I applied your FormPanel diffs to the included ext-all include on these two new pages (I wasn't sure if you were implying your fix addressed IE in quirks mode of strict).
You can find your diffs in the following include by searching for "@animal", if you want to verify them.
http://sonatype.com/~jrichard/ext-issues/js/ext-all-debug_FormPanel_override.js
quirks:
http://sonatype.com/~jrichard/ext-issues/bad_widths-formpanel-change.html
strict:
http://sonatype.com/~jrichard/ext-issues/bad_widths-strict-formpanel-change.html
Also, since this issue can be fixed by serving the page with a doctype to force strict mode, my more pressing issue is http://extjs.com/forum/showthread.php?t=28283
You seem to have dealt with this type of problem before. If you have some time, I'd appreciate your input on that one too.
- Justin
width: '100%',
height: '100%',
are both invalid. Width and height must be numbers, not percentages or strings.
You can see quirks mode page with these changes here (updated includes):
http://sonatype.com/~jrichard/ext-issues/bad_widths-formpanel-change.html
This issue isn't a huge concern for me since I'm now using a doctype to force strict mode in IE, and it seems to have an effect on Safari as well. What is slightly concerning though is your (Jack) preference for not using a doctype (http://extjs.com/forum/showthread.php?t=23071), and how that might effect the testing of ExtJS in general. In particular I've noticed differences in Safari's rendering when an XHTML 1.0 Transitional doctype is included. This can be handled in with conditional changes like the other browser quirks, but the Ext.isStrict value is using an IE specific check to set its value, so it's undefined in Safari. Additionally, there is no Ext.isFirefox flag -- this is probably because you assume this is the default, but it would be helpful to have for making some conditionals simpler.
#If you have any other info about this subject , Please add it free.# |
