ExtJs form界面显示之界面调整（游览器兼容性）

ExtJS的界面不咋好看，但是兼容性还不错。下面要介绍一个ExtJS由于编程而引起的游览器兼容性问题。

[b][color=green]火狐下formPanel界面[/color][/b]
[img]http://dl.iteye.com/upload/attachment/527894/07dc2d2c-ca86-3910-ba75-9a1f7ecad7c5.bmp[/img]

[b][color=red]IE下formPanel界面[/color][/b]
[img]http://dl.iteye.com/upload/attachment/527909/2639a379-7954-3b77-828e-7b907ab2727b.bmp[/img]

[b]ExtJS的formPanel中元素的代码：[/b]

	/*端口**/
	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 : '根目录格式不正确'
        });

[color=red][b]问题代码[/b][/color]

    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]
        }]
    });

[color=green][b]
正确显示的代码[/b][/color]

    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”下，这样各个浏览器都能正常浏览。

[b]总结： 这只是个很小的问题，编程习惯好的人根本不会遇到。弄清楚这个问题，让我在以后写代码的时候可以不再犯同样的问题，这就是进步了。
[/b]