主题化
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属性:
背景颜色
- 变量:
美元面板体的背景色
- 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
文件的是正确的。