PDA

View Full Version : ExtJS Components CSS Styling Issue



VedvratSharma
13 Feb 2012, 2:08 AM
Problem Statement:

To support all the modern browsers, we have upgraded the Ext Js 3 to Ext Js 4 in our project. After the upgrade process most of the Ext Js components styles (Visual design) was not working.
Below are the some of the components which styles were not working after the upgrade:
- Grid with pagination
- File upload control
- Message box
- Popup control
- Grid with Tree menu

Identified Issues:
We identified that some of the Ext Js 4 components DOM rendering structure and the CSS class names are different from the previous version.
And also identified the DOM structure of IE is different from the other Gecko and web kit based browsers.

Solution:
We have created new styles using new CSS class names for those components. Also created separate styles for IE and Non CSS3 support browsers.

Example:

Old Class Names for “Window” control.
.x-window-tl
.x-window-tr
.x-window-tc
DOM structure will be in table based with image in all the corners

New Class Names for “Window” control
.x-window-header-default-top-mc,
.x-window-header-default-top-mr,
.x-window-header-default-top-ml

DOM structure will be in table based with image in all the corners for non CSS3 support browsers.
DOM structure will be in div based with CSS3 rounded corners for other browsers.

Kindly Suggest whether the approach followed is correct for the Upgrade process?
If Yes, then the changes to the classnames will again break the application in future version if Sencha edits the classnames and doesnot support backward compatibility?

Please feel free to share your views/inputs.

mitchellsimoens
13 Feb 2012, 4:39 AM
The reason for the difference is we are doing things a lot different. The reason for difference between the different browsers is we try to create optimized HTML, what works great in Chrome doesn't always work great in IE.

skirtle
13 Feb 2012, 8:45 AM
Your write up seems pretty accurate to me.

If you're customizing a lot of styling then I highly recommend reading the guides to theming. If you use the Sass theming to style your app it should save you a lot of time and makes it much more likely it'll upgrade to future versions. If you use CSS directly it makes it almost impossible for Sencha to maintain backwards compatibility.