Question

我正在使用Ext JS 4开发一个大规模的RIA应用程序。在我的index.html中，我有以下定义：

<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-all.css（GridFilters.css和RangeMenu.css中不包含某些样式的Ext JS'ux'组件。

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

问题

哪种样式设置Ext JS 4应用程序？也许应该创建SCSS文件并在那里做所有样式，每次用compass compile编译来创建CSS文件并进行开发？
有没有办法在标准的Ext JS 4发行版中包含'ux'组件的样式？对于'ux组件（类似ext-all.css）

ext-ux-all.css

我希望很多人使用Ext JS来创建出色的应用程序，他们已经为自己思考或解决了这些问题。对于有关这一主题的任何知识，我将不胜感激。

Answer 1

我和你的情况类似。

我所做的是首先包含ext css文件：

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

然后我的所有应用程序css都是使用指南针生成的。因此，有许多scss文件被编译成单个css文件。您可以使用compass watch，这样只要scss文件发生更改，您的css就会被编译。

我不得不说，一旦你习惯了指南针和sass / scss，很难证明普通的css文件 - 罗盘和sass生成更好的跨浏览器css和scss文件相比，更容易维护和定制普通的css。

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

只需在主scss文件中导入ux css文件（参见this answer）;
使用众多css unifiers / mergers / minifiers中的一个。

Answer 2

创建主题是保持代码良好的唯一方法，也是部署优化css的好方法。

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

你会在他们的文档（指南和视频）上找到很好的资源。他们的scss资源也很好。

设计大型ExtJS应用程序

2 个答案: