ExtJs form界面顯示之界面調整(遊覽器兼容性)

 

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”下,這樣各個瀏覽器都能正常瀏覽。

 

總結: 這隻是個很小的問題,編程習慣好的人根本不會遇到。弄清楚這個問題,讓我在以後寫代碼的時候可以不再犯同樣的問題,這就是進步瞭。

You May Also Like