样式化大规模应用的ExtJS

我开发使用的Ext JS 4.在我的index.html的大规模RIA应用我有如下定义：样式化大规模应用的ExtJS

<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">

问题
在提供的代码只有index.css存在，但我的应用程序中的每个视图都有自己的CSS样式表，它将使用它自己的精灵/图像（我已在所提供的代码中添加了user.css和documents.css作为示例）。这一切都将变成大量未缩小的CSS文件，这将显着减慢应用程序加载时间。
另外，Ext JS'ux'组件的一些款式不包含在ext-all.css（GridFilters.css和RangeMenu.css提供的代码中）中。

我可以写下一个剧本，将所有这些CSS文件压缩成一个文件，但是......

问题

这是造型的Ext JS 4的正确方法应用程序？也许应该创建SCSS文件，并在那里做所有样式，每次编译compass compile以创建CSS文件并进行开发？
有没有任何方法可以包含标准Ext JS 4发行版中的'ux'组件的样式？有些东西一样ext-all.css为“UX组件（像ext-ux-all.css）

我希望很多人都在使用的Ext JS来创造伟大的应用程序，他们也想过或解决这些问题留给自己。我会很感激关于这个话题的任何知识。

来源

2013-01-25 bhovhannes

我会建议持有一会儿;即将推出的4.2 Beta 3应该包含对CSS处理方式的重大改变/改进。它应该是可用的（敲门声）真实的即刻。 –

听起来很有希望！我可以在哪里阅读有关即将到来的更改 – bhovhannes

像往常一样发布测试版时会有一个论坛帖子。 –

我和你有类似的情况。

我做的是首先包括分机css文件：

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

然后用罗盘产生的所有我的应用程序的CSS。所以有很多scss文件被编译成一个css文件。您可以使用compass watch，以便在scss文件更改时编译您的css。

我不得不说，一旦你习惯了指南针和SASS/SCSS，也很难证明纯CSS文件 - 指南针和青菜产生更好的跨浏览器的CSS和SCSS文件更容易维护和定制比较以普通的CSS。

至于ux css。我不会担心太多，但你有两种选择：

只需导入在主SCSS文件的UX CSS文件（见this answer）;
在那里使用众多的CSS统一/合并/缩小器之一。

来源

2013-01-25 11:15:23 Izhaki

感谢您的分享。很高兴看到，你并不孤单:)请问，请提供有关“罗盘表”使用情况的更多详细信息？ – bhovhannes

命令行;用你的主scss文件cd到该文件夹;运行'compass watch'，并且每次这个文件或者任何被导入的文件发生变化 - 指南针将重新编译css。 – Izhaki

创建您的主题是您保持良好代码的唯一方法，并且是部署优化CSS的好方法。

使用secnha的mixins（现在部分记录在文档中）可以为按钮，面板等创建多个外观。你可能很难弄清楚它是如何工作的，但是做好事情的唯一途径。

你会发现他们的文档（指南和视频）很好的资源。他们的scss资源也是一个很好的来源。

来源

2013-01-27 21:19:02 catalinux

样式化大规模应用的ExtJS

回答

相关问题