Interface adjustment for ExtJsform interface display (browser compatibility)

The ExtJS interface is not very nice, but its compatibility is good. The following describes the compatibility of the browser caused by ExtJS programming. Code of the element in formPanel of ExtJS in formPanel of formPanel in IE under Firefox: Java code/* port **/defPortFieldnew... SyntaxHi

 

The ExtJS interface is not very nice, but its compatibility is good. The following describes the compatibility of the browser caused by ExtJS programming.

 

FormPanel interface under Firefox

 

FormPanel interface under IE

 

Code of the element in ExtJS formPanel:

Java code

/* Port **/

DefPortField = new Ext. form. NumberField ({

FieldLabel: 'ftp port ',

Width: 160,

LabelSeparator :'',

Id: 'fportfield ',

AllowBlank: false,

AllowNegative: false,

AllowDecimals: false

});

 

FtpUserField = new Ext. form. TextField ({

DefaultType: 'textfield ',

Width: 160,

LabelSeparator :'',

Id: 'ftpuserfield ',

FieldLabel: 'user ',

AllowBlank: false

});

 

FtpUserPassField = new Ext. form. TextField ({

DefaultType: 'textfield ',

Width: 160,

LabelSeparator :'',

Id: 'ftpuserpassfield ',

FieldLabel: 'Password ',

AllowBlank: false

});

FtpRootPathField = new Ext. form. TextField ({

DefaultType: 'textfield ',

Width: 160,

LabelSeparator :'',

Id: 'ftprootpathfield ',

FieldLabel: 'ftp root directory ',

AllowBlank: false,

Regex:/^ \/[^ \] * $ /,

RegexText: 'incorrect root directory format'

});

 

 

Problem code

Java code

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]

}]

});

 

 

Correctly displayed code

Java code

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]

}]

});

 

 

Analysis: In the problem Code, every form is separated into a "fieldSet", which is equivalent to five "fieldSet". It is displayed in IE as far apart, it is easy to confuse the distance during layout.

Firefox does not have this type of problem, and the layout is normal.

 

The correct solution should be to put each field in a "fieldSet" so that all browsers can browse normally.

 

Summary: this is only a small problem that people with good programming habits will not encounter. To solve this problem, I can stop making the same mistake when writing code in the future. This is progress.