2

I am developing a large-scale RIA application using Ext JS 4. Inside my index.html I've the following definitions:

<link rel="stylesheet" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/GridFilters.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/RangeMenu.css">
<link rel="stylesheet" href="resources/css/default/index.css">
<link rel="stylesheet" href="resources/css/default/profile/user.css">
<link rel="stylesheet" href="resources/css/default/profile/documents.css">

The problem
In provided code only index.css is present, but each view in my application will have its own CSS stylesheet, which will use its own sprites/images (I've added user.css and documents.css in provided code as example). That all will grow into a huge amount of not minified CSS files, which will slow down application loading time significantly.
Also, some styles of Ext JS 'ux' components are not included in ext-all.css (GridFilters.css and RangeMenu.css in provided code).

I can write down a script, which will compress all these CSS files into one file, but ...

The question

  1. Which is the correct way for styling Ext JS 4 applications? Maybe one should create SCSS files and do all styling there, and compile each time with compass compile to create CSS files and do development?
  2. Is there any way to include styles for 'ux' components which comes in standard Ext JS 4 distribution? Some thing like ext-all.css for 'ux components (something like ext-ux-all.css)

I hope many people are using Ext JS to create great applications and they've thought about or solved such problems for themselves. I'll be grateful for any share of knowledge regarding this topic.

bhovhannes
  • 5,511
  • 2
  • 27
  • 37
  • I would suggest holding it for a little while; upcoming 4.2 Beta 3 should contain very significant changes/improvements to the way CSS is handled. It should be available (knock knock) Real Soon Now. – Alex Tokarev Jan 25 '13 at 18:32
  • sounds very promicing! Where I can read more about upcoming changes? – bhovhannes Jan 26 '13 at 08:29
  • There will be a forum post when the beta is released, as usual. – Alex Tokarev Jan 26 '13 at 19:25
  • @AlexTokarev 4.2 final is released today... I cannot found information regarding CSS changes anywhere. Please, share a link if it is possible. – bhovhannes Mar 14 '13 at 07:47
  • 4.2 is a big release and it coincided with other products' releases so we're a bit swamped at the moment. The docs will follow, you can rest assured. – Alex Tokarev Mar 14 '13 at 17:58

2 Answers2

1

I have a similar situation to yours.

What I do is to first include the ext css file:

<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">

Then all my app css is generated using compass. So there are a multitude of scss files that are compiled into a single css file. You can use compass watch so your css is compiled whenever a scss file changes.

I have to say that once you get used to compass and sass/scss, it's very hard to justify plain css files - compass and sass generate better cross-browser css and the scss files are far easier to maintain and customise compared to plain css.

As for the ux css. I wouldn't worry about it too much, but you have two options:

  • simply import your ux css files in your main scss file (see this answer);
  • use one of a multitude of css unifiers/mergers/minifiers out there.
Community
  • 1
  • 1
Izhaki
  • 23,372
  • 9
  • 69
  • 107
  • Thank you for share. It is nice to see, that you are not alone :) can you, please, provide more details regarding your usage of 'compass watch'? – bhovhannes Jan 25 '13 at 17:24
  • 1
    Command line; cd to the folder with your main scss file; run `compass watch` and every time this file or any file imported within changes - compass will recompile the css. – Izhaki Jan 25 '13 at 19:32
0

Creating your theme is the only way you can keep your code well and is a good way to deploy optimized css.

Using secnha's mixins ( now partially documented in docs) you can create multiple looks for your buttons, pannels,etc. You might have some hard time to figure out how it works, but is the only way to do things well.

You will find good resources on their docs ( guides and video). Also their scss sources are a good source.

catalinux
  • 1,462
  • 14
  • 26