ExtJS的界面不咋好看，但是兼容性還不錯。下面要介紹一個ExtJS由於編程而引起的遊覽器兼容性問題。
火狐下formPanel界面
IE下formPanel界面
ExtJS的formPanel中元素的代碼：
Java代碼
/*端口**/
defPortField = new Ext.form.NumberField({
fieldLabel: 'FTP端口',
width : 160,
labelSeparator:'',
id:'defPortField',
allowBlank : false,
allowNegative : false,
allowDecimals : false
});
ftpUserField = new Ext.form.TextField({
defaultType : 'textfield',
width : 160,
labelSeparator:'',
id:'ftpUserField',
fieldLabel : '用戶',
allowBlank : false
});
ftpUserPassField = new Ext.form.TextField({
defaultType : 'textfield',
width : 160,
labelSeparator:'',
id:'ftpUserPassField',
fieldLabel : '密碼',
allowBlank : false
});
ftpRootPathField = new Ext.form.TextField({
defaultType : 'textfield',
width : 160,
labelSeparator:'',
id:'ftpRootPathField',
fieldLabel : 'FTP根目錄',
allowBlank : false,
regex : /^\/[^\\]*$/,
regexText : '根目錄格式不正確'
});
問題代碼
Java代碼
var ftpServSetForm = new Ext.FormPanel({
width:330,
frame: true,
layout: 'column',
items: [{
columnWidth : .99,
xtype: 'fieldset',
labelWidth: 140,
defaultType: 'textfield',
autoHeight: true,
border: false,
items: [ftpHostField]
},{
columnWidth : .99,
xtype: 'fieldset',
labelWidth: 140,
defaultType: 'textfield',
autoHeight: true,
border: false,
items: [defPortField]
},{
columnWidth : .99,
xtype: 'fieldset',
labelWidth: 140,
defaultType: 'textfield',
autoHeight: true,
border: false,
items: [ftpUserField]
},{
columnWidth : .99,
xtype: 'fieldset',
labelWidth: 140,
defaultType: 'textfield',
autoHeight: true,
border: false,
items: [ftpUserPassField]
},{
columnWidth : .99,
xtype: 'fieldset',
labelWidth: 140,
defaultType: 'textfield',
autoHeight: true,
border: false,
items: [ftpRootPathField]
}]
});
正確顯示的代碼
Java代碼
var ftpServSetForm = new Ext.form.FormPanel({
id : 'tool_ftpServSetForm',
width:330,
layout: 'column',
frame: true,
items: [{
columnWidth : .99,
xtype: 'fieldset',
labelWidth: 140,
defaultType: 'textfield',
autoHeight: true,
border: false,
items: [ftpHostField, defPortField, ftpUserField,
ftpUserPassField, ftpRootPathField]
}]
});
分析：問題代碼中，將每個form都分開到一個“fieldSet”中顯示，相當於有5個“fieldSet”，在IE下顯示就會相隔很遠的距離，佈局的時候容易把距離弄亂掉。
而火狐並不分別這個類型問題，佈局正常。
正確的應該是將各個field放到一個“fieldSet”下，這樣各個瀏覽器都能正常瀏覽。
總結： 這隻是個很小的問題，編程習慣好的人根本不會遇到。弄清楚這個問題，讓我在以後寫代碼的時候可以不再犯同樣的問題，這就是進步瞭。