I am developing a large-scale RIA application using Ext JS 4. Inside my index.html I've the following definitions:\[code\]<link rel="stylesheet" href="http://stackoverflow.com/questions/14517861/ext/resources/css/ext-all.css"><link rel="stylesheet" href="http://stackoverflow.com/questions/14517861/ext/src/ux/grid/css/GridFilters.css"><link rel="stylesheet" href="http://stackoverflow.com/questions/14517861/ext/src/ux/grid/css/RangeMenu.css"><link rel="stylesheet" href="http://stackoverflow.com/questions/14517861/resources/css/default/index.css"><link rel="stylesheet" href="http://stackoverflow.com/questions/14517861/resources/css/default/profile/user.css"><link rel="stylesheet" href="http://stackoverflow.com/questions/14517861/resources/css/default/profile/documents.css">\[/code\]The problem
In provided code only \[code\]index.css\[/code\] is present, but each view in my application will have its own CSS stylesheet, which will use its own sprites/images (I've added \[code\]user.css\[/code\] and \[code\]documents.css\[/code\] 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 \[code\]ext-all.css\[/code\] (\[code\]GridFilters.css\[/code\] and \[code\]RangeMenu.css\[/code\] in provided code).I can write down a script, which will compress all these CSS files into one file, but ...The question [*]Which is the correct way for styling Ext JS 4 applications? Maybe one should create \[code\]SCSS\[/code\] files and do all styling there, and compile each time with \[code\]compass compile\[/code\] to create CSS files and do development? [*]Is there any way to include styles for 'ux' components which comes in standard Ext JS 4 distribution? Some thing like \[code\]ext-all.css\[/code\] for 'ux components (something like \[code\]ext-ux-all.css\[/code\])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.
In provided code only \[code\]index.css\[/code\] is present, but each view in my application will have its own CSS stylesheet, which will use its own sprites/images (I've added \[code\]user.css\[/code\] and \[code\]documents.css\[/code\] 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 \[code\]ext-all.css\[/code\] (\[code\]GridFilters.css\[/code\] and \[code\]RangeMenu.css\[/code\] in provided code).I can write down a script, which will compress all these CSS files into one file, but ...The question [*]Which is the correct way for styling Ext JS 4 applications? Maybe one should create \[code\]SCSS\[/code\] files and do all styling there, and compile each time with \[code\]compass compile\[/code\] to create CSS files and do development? [*]Is there any way to include styles for 'ux' components which comes in standard Ext JS 4 distribution? Some thing like \[code\]ext-all.css\[/code\] for 'ux components (something like \[code\]ext-ux-all.css\[/code\])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.