2

我正在使用 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 JS 'ux' 组件不包含在ext-all.css（GridFilters.css和RangeMenu.css提供的代码中）。

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

问题

  1. 哪种是设置 Ext JS 4 应用程序样式的正确方法？也许应该创建SCSS文件并在那里进行所有样式设置，并每次编译compass compile以创建 CSS 文件并进行开发？
  2. 有什么方法可以包含标准 Ext JS 4 发行版中的“ux”组件的样式？类似于ext-all.css'ux 组件的东西（类似于ext-ux-all.css）

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

4

2 回答 2

1

我有和你类似的情况。

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

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

然后我所有的应用程序 css 都是使用指南针生成的。所以有大量的 scss 文件被编译成一个 css 文件。您可以使用compass watch，以便在 scss 文件更改时编译您的 css。

我不得不说，一旦你习惯了 compass 和 sass/scss，就很难证明纯 css 文件是正确的 - compass 和 sass 生成更好的跨浏览器 css，并且与纯 css 相比，scss 文件更容易维护和自定义。

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

  • 只需在您的主 scss 文件中导入您的 ux css 文件（请参阅此答案）；
  • 使用众多的 CSS 统一器/合并器/压缩器之一。
于 2013-01-25T11:15:23.073 回答
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.

于 2013-01-27T21:19:02.457 回答