Sencha Extjs4.2 皮肤制作

最新推荐文章于 2019-08-01 10:24:47 发布

weixin_33912453

最新推荐文章于 2019-08-01 10:24:47 发布

阅读量148

点赞数

文章标签： ui javascript ruby ViewUI

原文链接：http://www.cnblogs.com/blackagenl/p/4316775.html

版权

话不多说，直接上图：

搜了一把皮肤制作，大多数都是英文文档，看了几遍差不多熟练了之后就把皮肤问题得以搞定，记录下来方便下次使用。

步骤：

1. 安装环境，JDK、ruby、compass、sass （JDK 通过下载安装，RUBY 通过下载安装- http://rubyinstaller.og ，sass 通过Ruby 中的 gem 能够自动安装）

2. 下载 SenchaCmd-3.1.2.342-windows.exe 、SenchaSDKTools-2.0.0-beta3-windows.exe （Linux 环境请自行下载安装包，配置PATH）

3. 环境搭建完毕之后，开始构建工程，使用命令
sencha –sdk /extjs的路径/ generate app 工程名工程存放的路径

ext 为从SDK中复制的源文件，package 则是我们需要编译的主题包和资源文件。
生成一个测试皮肤

sencha -sdk ext generate app ThemeDemoApp themeRed

这告诉Sencha Cmd在一个新的子目录“theme-demo-app”中生成一个名为ThemeDemoApp的应用程序，并同时关联” Ext “目录下的Ext JS SDK。现在让我们构建应用程序：

cd ThemeDemoApp themeRed
sencha app build

这样就能够对自己的皮肤进行编译了。
有一片文章详细的写了ExtJS4的一些技巧，直接转载了。

让我们看一看它的内容：

l ”package.json”——这是包属性文件。它告诉Sencha Cmd一些包的信息，如 name, version, and dependencies (其他包所需要的配置)。

l “sass/”——这个目录包含所有关于主题的sass文件。sass文件分为三个主要部分:

1) “sass/var/”——包含sass变量；

2) “sass/src/”——包含sass规则和UI混合调用，它们可以使用“sass/var/”下的变量；

3) “sass/etc/”——包含额外的公用功能或混入在“sass/var/”和“sass/src/”中的文件，这些文件应该是结构化匹配的组件类路径。例如， Ext.panel.Panel的样式变量应放置在一个命名为“sass/var/panel/Panel.scss”的文件内。

l “resources/”——包含主题需要的图像和其他静态资源。

l “overrides/”——包含一些替换Ext JS组件类（对组件进行主题化的类）的JavaScript。

2.3.4 配置主题继承

主题包通常是这样具有一个非常重要的、附加功能的特殊的包，它们可以继承自其他的主题包。新版本Ext Js 4.2中利用主题包的这一特性来创建它的主题层次结构：

每个主题包必须从Base主题扩展。创建自定义主题的下一步是找出从哪个主题进行扩展。在工作空间中可以看到以下主题包：

l “ext-theme-base”–这个包是其他主题的基本主题，它是唯一一个没有父主题的主题包。它包含了设置CSS规则的最少值，这些值是让Ext JS组件和布局正确工作所必需的的内容。”ext-theme-base”的样式规则在派生的主题中是不可配置的，应该避免覆盖由这个主题创建的任何样式规则。

l “ext-theme-neutral”–从"ext-theme-base"扩展而来，包含了绝大多数的可配置的样式规则。大多数的变量是用于配置在”ext-theme-neutral”中定义的Ext JS组件样式。这些变量可以被自定义主题替换。

l “ext-theme-classic”–默认主题。从”ext-theme-neutral”扩展而来。

l “ext-theme-gray”–从”ext-theme-classic”扩展而来

l “ext-theme-access”–从”ext-theme-classic”扩展而来。

l “ext-theme-neptune”–从”ext-theme-neutral”扩展而来。

建议使用”ext-theme-neptune”或”ext-theme-classic”作为自定义主题扩展的开始节点。这是因为，这些主题包含创建一个具有吸引力并立即可用的主题的所有必要的代码。”ext-theme-neutral”是一个非常抽象的主题，不应该直接用于扩展。基于”ext-theme-neutral”进行自定义主题的扩展，需要数以百计的变量覆盖和过多的工作量，而且可能只有非常高级的主题开发者才能进行这项工作，反之，使用”ext-theme-neptune”或”ext-theme-classic”可以通过简单地改变几个变量在几分钟内启动并运行。另外你可以覆盖”ext-theme-gray”或”ext-theme-access”，如果它们可以为自定义主题提供一个更理想的起点。

例如，我们创建一个由”ext-theme-neptune”扩展的自定义主题。首先需要替换目录”packages/my-custom-theme/package.json”：

"extend": "ext-theme-classic"

为

"extend": "ext-theme-neptune"

你现在需要更新您的应用程序。确保正确的主题JavaScript文件都包含在应用程序“bootstrap.js”中，这样应用程序就可以在开发模式下运行。在”theme-demo-app”目录下运行以下命令。

sencha app refresh

2.3.5 配置全局主题变量

现在已经建立了自己的主题包，可以开始修改主题外观。首先修改能够派生出ExtJs组件公有颜色的基础颜色。在”my-custom-theme/sass/var/”下，创建一个名为Component.scss的文件，在文件中输入：

$base-color: #317040 !default;

如果你想让你的自定义主题是可扩展的，一定要在所有变量末尾配置!default。没有!default你将不能覆盖一个派生主题的变量，因为Sencha Cmd变量遵循“反向”规则——大多数派生样式第一，基本样式最后。更多的!default信息可参考：Variable Defaults。

完整的Ext JS全局SASS变量列表请参考：Global_CSS。

2.3.6 构建包

为了使所有自定义的样式规则生成css文件，需要在”packages/my-custom-theme/”目录下运行命令：

sencha package build

这将在package下构建一个目录。在 ”my-custom-theme/build/resources”下你会发现一个文件命名为 my-custom-theme-all.css。这个文件包含所有Ext JS组件的样式规则。你可以直接在应用程序中运用这个文件，但这并不可取，因为“all”文件包含所有的样式，但是Ext JS组件和大多数应用程序只使用Ext JS组件的一个子集。当你构建一个应用程序时，Sencha Cmd能够过滤掉未使用的CSS样式规则，但是首先我们需要配置测试程序使用自定义主题。

2.3.7 在一个应用程序使用一个主题

为刚刚创建的自定义主题配置测试应用程序。找到theme-demo-app/.sencha/app/sencha.cfg

app.theme=ext-theme-classic

修改为

app.theme=my-custom-theme

如果你已经运行了一个构建使用经典主题的应用程序，你应该清理构建目录。从theme-demo-app运行:

sencha ant clean

接着构建应用：

sencha app build

在浏览器中打开”theme-demo-app/index.html”，你将看到如下

2.3.8 配置组件的变量

每一个Ext JS组件都有一个全局变量的列表,可以用来配置其外观。下面，我们来改变面板标题的字体类型。创建文件”packages/my-custom-theme/sass/var/panel/Panel.scss”，代码如下：

$panel-header-font-family: Times New Roman !default;

在“theme-demo-app”下运行：

sencha app build

在浏览器中打开”theme-demo-app/index.html”，你将看到如下

在API文档的每一节 ”CSS Variables”中，有组件SASS变量的详细列表。

2.3.9 创建自定义组件UI

在ExtJs框架中，每一个组件都有一个配置界面（默认为“default”）。这个属性可以被配置在单个组件实例中，区别于其他组件的相同类型，给他们提供一个不同的外观。

创建文件”packages/my-custom-theme/sass/src/panel/Panel.scss”，代码如下：

@include extjs-panel-ui(

    $ui-label: 'highlight-framed',

    $ui-header-background-color: red,

    $ui-border-color: red,

    $ui-header-border-color: red,

    $ui-body-border-color: red,

    $ui-border-width: 5px,

    $ui-border-radius: 5px

);

打开”theme-demo-app/app/view/Viewport.js”，修改代码如下：

Ext.define('ThemeDemoApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires: ['Ext.layout.container.Border', 'ThemeDemoApp.view.Main'],
    layout: {
        type: 'border'
    },
    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'West',
        split: true,
        width: 150
    },
    {
        region: 'center',
        xtype: 'panel',
        layout: 'fit',
        bodyPadding: 20,
        items: [{
            xtype: 'panel',
            ui: 'highlight',
            frame: true,
            bodyPadding: 10,
            title: 'Highlight Panel'
        }]
    },
    {
        region: 'east',
        xtype: 'panel',
        ui: 'light',
        title: 'East',
        split: true,
        width: 150
    }]
});

在 ”theme-demo-app” 下运行程序：

sencha app build

在浏览器中打开”theme-demo-app/index.html”，你将看到如下

虽然UI是一个方便的方法,可以混合多种外观配置为一个组件,他们不应该被过度使用。因为每次调用UI mixin会生成额外的CSS规则,无偿调用UI mixin会产生过大的CSS文件。

另外重要一点是要记住当调用UI mixin时，是通过其命名参数调用mixin，不是没有参数值的有序列表。尽管SASS都支持这两种形式，最好使用这种形式:

@include extjs-component-ui(

    $ui-foo: foo,

    $ui-bar: bar

);

避免下面的形式：

@include extjs-component-ui(foo, bar);

因为mixin参数的复杂性和数量有可能变动，如新增或删除一个参数，那么后一种调用方式就会失效。

2.3.10 修改图像资源

所有必需的图像资源默认是继承父主题的,但在某些情况下,您可能需要覆盖一个图像。这可以通过把所需的图像在”my-custom-theme/resources/images/”下覆盖相同名称的图像。例如,让我们修改弹出窗口组件的信息图标。保存”packages/my-custom-theme/resources/images/shared/icon-info.png”

现在使用自定义图标，修改测试应用程序显示一个消息框。在应用程序窗口的highlight panel 添加items(“theme-demo-app/app/view/Viewport.js”):

requires: [

    ...

    'Ext.window.MessageBox',

    ...

],

...

title: 'Highlight Panel',

items: [{

    xtype: 'button',

    text: 'Show Message',

    handler: function() {

        Ext.Msg.show({

            title: 'Info',

            msg: 'Message Box with custom icon',

            buttons: Ext.MessageBox.OK,

            icon: Ext.MessageBox.INFO

        });

    }

}]

...

构建应用程序，在浏览器中查看：

原始样式：

2.3.11 为IE中的CSS3效果切割图像

在许多情况下,当创建新的用户界面时，可能包括背景渐变或圆角。不幸的是,不是所有浏览器都支持CSS3属性,所以我们必须使用图像来弥补。Sencha Cmd能够自动切割这些图片给你。要做到这一点,我们需要告诉Sencha Cmd哪些组件需要切片。这些切片配置文件都包含在每个主题的 ”sass/example/”目录下。参考”packages/ext-theme-base/sass/example/”：

“shortcuts.js”–这个文件包含了组件类型的基本配置,可以切割。大多数自定义主题不需要包含”shortcuts.js”文件;除非你的主题包括自定义组件样式。你的样式继承所有的基本样式的快捷键定义,也可以添加额外的快捷定义，需要在 ”shortcuts.js”文件中调用Ext.theme.addShortcuts()函数。

“manifest.js”–这个文件包含能够生成切片图像的组件UI列表。可以从父主题继承所有的清单条目,也可以在”manifest.js”中通过调用Ext.theme.addManifest()函数添加自己的清单条目。

“theme.html”–这个文件是用来渲染在”manifest.js”中定义的文件。

为”highlight” panel创建圆角切片，创建”packages/my-custom-theme/sass/example/manifest.js” ，代码如下：

Ext.theme.addManifest(

    {

        xtype: 'panel',

        ui: 'highlight'

    }

);

编辑”packages/my-custom-theme/sass/example/theme.html”添加以下脚本标签：

<!-- Required because Sencha Cmd doesn't currently add manifest.js from parent themes -->

<script src="../../../ext-theme-neptune/sass/example/manifest.js"></script>

<!-- Your theme's manifest.js file -->

<script src="manifest.js"></script>

为了能够在构建应用程序时将UI切片，必须在”theme-demo-app/sass/example/theme.html”中添加两个脚本标记：

<script type="text/javascript" src="../../../packages/ext-theme-neptune/sass/example/manifest.js"></script>

<script type="text/javascript" src="../../../packages/my-custom-theme/sass/example/manifest.js"></script>

构建应用程序，在IE8及以下版本浏览，可以看到 ”highlight” panel 展示的是圆角，和在IE9及其他浏览器的CSS3效果呈现一致。

（IE7中）

2.3.12 覆盖主题JS

有时一个主题可以通过配置JS改变组件外观。通过覆盖主题包中的JavaScript就可以实现。如，创建”packages/my-custom-theme/overrides/panel/Panel.js” ，代码如下：

Ext.define('MyCustomTheme.panel.Panel', {

    override: 'Ext.panel.Panel',

    titleAlign: 'center'

});

现在需要构建主题包来让”packages/my-custom-theme/build/my-custom-theme.js”包含这个新的覆盖文件。在”packages/my-custom-theme/” 下运行：

sencha package build

现在应该刷新应用程序,这样在开发模式下运行应用程序会包括该主题的JS覆盖文件。在 ”theme-demo-app”下运行：

sencha app refresh

构建应用：

sencha app build

在浏览器中打开”theme-demo-app/index.html”，你将看到如下

转载地址：http://www.cnblogs.com/veralee/archive/2013/07/02/3167289.html

转载于:https://www.cnblogs.com/blackagenl/p/4316775.html

weixin_33912453

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫