主题化

最新推荐文章于 2024-07-30 18:29:33 发布

阿洲

最新推荐文章于 2024-07-30 18:29:33 发布

阅读量1.3k

点赞数

文章标签： extjs css ext ui 工具浏览器

主题化

Ext JS的4有一个全新的主题系统定制你的应用程序的外观，同时还支持所有的浏览器。

上海社会科学院及北斗简介

上海社会科学院是一个预处理器增添了新的语法CSS允许像变量，混入，筑巢，数学/彩色功能。例如，在上海社会科学院，我们可以这样写：

蓝色： ＃3bbfce; 
美元保证金： 16px的;

内容- 导航{ 
    边框- 颜色：蓝
    颜色变暗（$蓝色， 9 ％）; 
}

。边境{ 
    填充：$保证金/  2 ; 
    保证金：保证金/  2 ; 
    边界- 颜色：蓝色美元; 
}

它将编译：

内容- 导航{ 
    边境- 颜色： ＃3bbfce; ： ＃2b9eab。; 
}

边境{ 
    填充： 8px ; 
    保证金： 8px ; 
    边界- 颜色： ＃3bbfce; 
}

看到各种可用的其他功能，在上海社会科学院，请见http://sass-lang.com/。指南针扩展增加了对CSS3混入多种，并提供扩展系统，利用Ext JS的上海社会科学院。带指南针，人们可以包括类似规则：

$ boxheight ： 10em ;

mybox { 
    @包括边界- 半径（$ boxheight ）; 
}

编译成：

.mybox {
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    -o-border-radius: 2.5em;
    -ms-border-radius: 2.5em;
    -khtml-border-radius: 2.5em;
    border-radius: 2.5em;
}

你可以学到罗盘和其他工具，它提供了在这里的混入包括：http://compass-style.org/docs/。

要求

红宝石

Mac OSX系统

的XCode安装到您的Mac上安装时，Ruby和所有必要的依赖。

Xcode中可以发现苹果开发网站：http://developer.apple.com/xcode/的

窗口

访问http://rubyinstaller.org/~~V在写作时并下载最新的Ruby打包版本（1.9.2）

北斗/上海社会科学院宝石

Mac OSX系统

在/应用程序/实用工具/终端程序，运行下面的代码（你将要求你输入密码）：

须藤宝石安装指南针

你可以确认你有指南针和Sass运行以下安装终端程序：

COMPASS - V

青菜- V

在写作时，指南针的最新版本是0.11.1（安塔尔）。上海社科院的最新版本是3.1.1（聪明贝蒂）

窗口

选择“ 开始使用Ruby命令提示符新的开始“菜单”选项“。

键入以下内容：

创业板安装罗盘

你可以确认你有指南针和Sass运行以下安装终端程序：

COMPASS - V
青菜- V

在写作时，指南针的最新版本是0.11.1（安塔尔）。上海社科院的最新版本是3.1.1（聪明贝蒂）

目录结构

Ext JS的SDK带有一个可以作为一个新主题的基础上使用的模板。如果你遵循“ 入门指南“，你应该有一个子文件夹为您的应用程序的目录EXTJS包含Ext JS的SDK。它应该看起来像这样：

APPNAME / 
APPNAME / EXTJS / 
APPNAME / 应用程序。JS
APPNAME / 索引。

复制从模板资源APPNAME / EXTJS /资源/主题/模板/资源到您的应用程序根文件夹的文件夹：

appname/
appname/resources/
appname/resources/css/
appname/resources/sass/
appname/resources/sass/config.rb
APPNAME / 资源/ 青菜/ 我- EXT - 主题。青菜

你还需要复制APPNAME / EXTJS /资源/主题/图片/默认APPNAME /资源/图像的图像。

确保到您的Ext JS的文件夹的路径是正确的APPNAME /资源/青菜/ config.rb：

＃$ ext_path：这应该是Ext JS的SDK相对这个文件的路径 。。/ / EXTJS“

由于在Ext JS的4.0.2a中的错误，你还需要编辑线62 APPNAME / EXTJS /资源/主题/ lib / utils.rb的，从这个：

images_path =  文件。加入（$ ext_path ， '资源' ， '主题' ， '图像' ，主题）

在此：

images_path = relative_path

这可以确保图像将担任APPNAME /资源/图像，而不是APPNAME / EXTJS /资源/图片

编译你的CSS

编译你的CSS是一个简单的过程，使用罗盘。

首先，改变你的青菜在目录APPNAME /资源/青菜，然后运行下面的命令在Mac OSX终端程序或在Windows命令提示符：

> 指南针编译

这应该输出如下：

> 创建.. / CSS / 我- EXT - 主题。

你缩小的css文件，现在应该在APPNAME /资源/ CSS /我的EXT-theme.css。

不断变化的全球社科院变量

Ext JS的主题系统自带全球社科院变量，您可以使用几行代码改变你的应用程序的外观。

上海社会科学院的这些变量可以被添加到你的APPNAME /资源/青菜/我的EXT-theme.scss文件，但他们必须插入到调用前 的@ import的“ext4/default/all' 。你可以看到一个例子，在你的上方，我的分机theme.scss文件评论：

/ /在这里插入您的自定义变量
/ /基颜色：＃aa0000;

可以去掉此行并改变基本色别的东西，也许是绿色＃a1c148。

现在重新导航到你的主题APPNAME /资源/青菜和运行指南针编译

可用变量

导航到appname/extjs/resources/themes/stylesheets/ext4/default/variables目录。这个目录包含了所有的Ext JS 4中的每个组件中定义的变量。

变量的命名约定如下CSS属性名称，组件名称预先准备。例如：

面板边框半径
- CSS属性：边界半径
- 变量：$面板边界半径
面板体的背景颜色
- CSS属性：背景颜色
- 变量：美元面板体的背景色
工具栏的背景颜色
- CSS属性：背景颜色
- 变量：$工具栏的背景色

您可以复制这些变量，并把它们添加到你的APPNAME /资源/青菜/我EXT-theme.scss的文件之前@进口ext4/default/all“的线。

查看结果

要查看您的新主题，让覆盖app.js主题例如从主SDK。这个例子显示了在单页上的大多数Ext JS的组件。复制APPNAME / EXTJS /例子/主题/ themes.js的，以APPNAME / app.js。

APPNAME / index.html来更新如下：

<HTML> 
<HEAD> 
    <TITLE> 分机主题</ TITLE>

    <link rel="stylesheet" type="text/css" href="resources/css/my-ext-theme.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

现在在您的浏览器打开index.html的行动，你应该看到你的新主题。尝试别的东西我的EXT-theme.sass基色更新，重新编译你的青菜，并刷新浏览器看到的变化。也可以尝试尝试与其他青菜变量。

组件的用户界面

在Ext JS框架的每个组件有一个UI的配置（默认为默认）。此属性可以改变，让您的应用程序中的组件有不同的风格。

可以在任何时候改变任何组件的UI，甚至渲染后，使用setUI方法。可以找到的例子/面板/泡沫panel.html的在这样的一个例子。

创建新分机的JS的UI

Ext JS的一些组件有社科院@混入的，让你可以快速生成新的用户界面。这些措施包括：Ext.panel.Panel，Ext.button.Button，Ext.Toolbar和Ext.window.Window。

创建这些新的用户界面非常简单。只需致电相关@混入你要创建一个新的UI组件（在文件中找到）。

让我们看看小组@ mixin的一个例子（可以在发现的例子/面板/泡沫板/ SASS /泡沫panel.scss的的）：

@包括EXTJS - 面板- UI （
    “泡沫” ，

    $ui-header-font-size: 12px,
    $ui-header-font-weight: bold,
    $ui-header-color: #0D2A59,
    $ui-header-background-color: #fff,
    $ui-header-background-gradient: null,

    $ UI - 边境- 颜色： ＃FFF 
    $ UI - 边境- 半径： 4PX ，
    $ UI - 身体- 背景- 颜色： ＃FFF，
    $ UI - 身体- 字体- 大小： 14px 
）;

上面的代码将创建一个新的UI任何Ext.panel.Panel组件，然后您可以在您的应用程序中使用指定的UI配置：

分机创建（'widget.panel' ， { 
    UI ： “泡沫” ，
    宽度： 300 ，
    高度： 300 ，
    标题： “泡沫UI面板' 
}）;

支持传统的浏览器

在大多数情况下，当创建新的用户界面，你将要包括背景渐变或圆角。不幸的是，传统的浏览器不支持相应的CSS3属性，所以我们必须使用图像代替。

用Ext JS 4，我们已包括切片工具，它会为你的辛勤工作。只需通过一个新的UI清单文件（如果你已创建的任何），运行命令行工具。

它是如何工作

切片工具创建一个新的浏览器实例，它加载的Ext JS和一个指定的CSS文件。一旦加载，解析一个JavaScript文件，其中包括每一个Ext JS的组件，需要造型（面板，窗口，工具栏等）。然后，它分析每个组件，并确定需要切片的每个图像的大小和位置。然后切片图像，精灵在一起，并将它们保存在清单中定义的位置。

切片太本身可以从命令行运行和正在安装的SDK工具包的一部分。它可以运行通过调用煎茶片主题。例如使用（假设您在您的应用程序根目录）：

的煎茶片的主题- extjs的ð - C 资源/ CSS / 我- EXT - 主题。CSS - O资源/ 图像- V

它接受几个参数：

- CSS [=]值，-C [=]值

主题的完整的CSS文件的路径，例如，分机全access.css。使用默认的Ext JS 4主题的CSS如果没有提供。
- EXT-DIR [=]值，-D [=] value（必需）

到您的Ext JS 4 SDK目录的根路径。
- 清单[=]值，-M [=]值

主题发电机JSON manifest文件的路径，例如，manifest.json。如果不使用默认的包装清单。
- 输出目录[=]值，-O [=]值

目的地路径保存所有生成的主题图像。这应该是内部的资源/主题/图片/ <themename> /目录。默认为当前工作目录。
- verbose时，-V

为每个生成的图像显示一个消息。

用法

编译你的CSS

您必须确保您的上海社会科学院的主题文件已经被编译，因为这是使用切片器。通过没有CSS文件会导致切片器恢复到默认的EXT-all.css文件，在大多数情况下，这将是毫无意义的。
创建您的清单文件（可选）

清单文件是一个简单的JavaScript文件，它告诉切片工具，自定义UI的，你想切。这一步是必要的，当你创建新的用户界面的。

让我们再看看在泡沫板的例子：
```
Ext.onReady(function() {
    Ext.manifest = {
        widgets: [
            {
                xtype: 'widget.header',
                ui   : 'bubble'
            },
            {
                xtype: 'widget.panel',
                ui   : 'bubble'
            }
        ]
    };
});
```
正如你可以看到你定义称为对象Ext.manifest，并给它一个数组属性被称为widget（构件）。你应该在这个数组中插入一个对象，其中包含你要生成图像组件的xtype和UI。

Ext.onReady方法内定义，Ext.manifest对象，这一点很重要。
生成您的图像

现在，所有剩下的就是要运行的命令，包括Ext JS的SDK文件夹，您的主题CSS文件和切片图像输出目录的参数。
```
的煎茶片的主题- extjs的ð - C 资源/ CSS / 我- EXT - 主题。CSS - O资源/ 图像- V
```

常见问题

我收到一个“ 错误资源/青菜/我的EXT-theme.scss（8号线：要导入的文件不符合或不可读：ext4/default/all）的错误，当我编译？

这是因为罗盘不能向Ext JS的4个主题文件。确保的ext_path在青菜/ config.rb文件的是正确的。

阿洲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
主题化

主题化Ext JS的4有一个全新的主题系统定制你的应用程序的外观，同时还支持所有的浏览器。上海社会科学院及北斗简介上海社会科学院是一个预处理器增添了新的语法CSS允许像变量，混入，筑巢，数学/彩色功能。例如，在上海社会科学院，我们可以这样写：蓝色：＃3bbfce; 美元保证金： 16px的;内容- 导航{ 边框- 颜色：蓝颜色变暗（$蓝色，
复制链接

扫一扫