本文作者:苏生米沿

本文地址:http://blog.csdn.net/sushengmiyan/article/details/50186709

翻译来源:http://docs.sencha.com/extjs/6.0/core_concepts/theming.html

ExtJS提供的可以使用的主题包对于创建一个干净专业的程序来说已经很有创意了,然而,你可能还是会希望提供自己的一种设计方式或现在存在的企业设计方式。

从历史上来说,给程序美化就是指的给html标签提供渲染组件的规则,但是这样做也会有一些弊端出现。首先,你需要负担的是各种支持的浏览器。其次,随着框架的成熟,很多不愉快就会产生,比如你的规则风格的变化需要追逐潜在元素的改变。通过ExtJS提供的API就可以很好的解决这些问题。

通过theming API创建的主题可以在任何ExtJS程序中共享。这就运行你可以编写一次规则,重复给你的程序持续改变风格。这个指导就会列出必要的主题工作,不论你是创建一个工作空间还是应用程序或者单独就是创建一个个性化主题。

这个指导将会覆盖基本的关于使用classic toolkit(ExtJS)的个性化主题,接下来,我们将会覆盖不同的现代主题(SenchaTouch)的方式,最终,将会介绍Triton主题和扩展性。

如果你想做以上事情,你就需要安装sencha cmd 6以上版本。可选的JRE1.7版本,如果你需要使用app watch的话,就必须安装。如果不安装JRE7以上,那就需要每次启动sencha app refresh来刷新改动。

构建一个个性化主题

当你准备好以上步骤的时候,你就可以自定义主题了。首先需要创建一个工作空间,但这不是必须的,使用如下命令创建工作空间 sencha -sdk {path/to/Ext-JS-SDK} generate workspace my-workspace

一、创建一个测试使用的工作程序

使用命令sencha -sdk ext generate app -classic ThemeDemoApp theme-demo-app

切换到当前程序 cd theme-demo-app

二、创建自定义主题目录,使用 命令 sencha generate theme my-classic-theme

启动程序 sencha app watch

浏览器查看效果 http://localhost:1841

修改packages/local/my-classic-theme/package.json下的extend节点,"extend": "theme-neptune"修改为"extend": "theme-crisp"

三、配置全局变量

创建文件packages/local/my-classic-theme/sass/var/Component.scss增加内容$base-color: #317040;

在应用程序中使用自定义的主题。找到theme-demo-app/app.json将"theme": "theme-triton",替换为"theme": "my-classic-theme",

四、给gridpanel设置红色边框,修改my-classic-theme/sass/src/panel/Panel.scss

@include extjs-panel-ui(
    $ui: '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,
    $ui-header-color: white
);

刷新应用程序。

[ExtJS6学习笔记]Ext JS6主题系列 (Classic工具包)的更多相关文章

  1. 【extjs6学习笔记】1.16 初始: 关于主题

    打开app.json,里面有主题设置 主题说明 theme-base 这个包是所有其他主题的基础主题,是唯一没有父主题的主题. 它包含Ext JS组件和布局正常工作绝对必需的最低限度的一组CSS规则. ...

  2. 【extjs6学习笔记】Mastering Ext JS, 2nd Edition

    我不知道在别人看来,我是什么样的人:但在我自己看来,我不过就象是一个在海滨玩耍的小孩,为不时发现比寻常更为光滑的一块卵石或比寻常更为美丽的一片贝壳而沾沾自喜,而对于展现在我面前的浩瀚的真理的海洋,却全 ...

  3. 【extjs6学习笔记】1.5 初始:关于布局

    absolute 绝对布局,这个布局使用 x 和 y 属性来指定组件的绝对定位 accordion 手风琴布局[可折叠布局]这个布局展示了在一个时间里只有一个内置的可支持折叠和展开的子级 panel ...

  4. 学习笔记5——wp主题开发

    我觉得学习wordpress插件开发之前还是得先理解一下wp的主题开发,循序渐进才能学好wordpress开发,话不多说,接下来整理一下这两天学习的wordpress主题开发的一些心得和体会,与大家一 ...

  5. Extjs学习笔记--Ext.tree.Panel

    Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisi ...

  6. 【extjs6学习笔记】0.4 准备: 书籍与文档

    Ext JS 6 By Example Ext JS Essentials Learning Ext JS - Fourth Edition Ext JS 6: Getting Started htt ...

  7. 【extjs6学习笔记】1.14 初始: ViewModel

    ViewModel是一个管理特定UI组件数据的类. 可以将其视为特定视图的记录容器. 它支持与UI组件的双向数据绑定,只要用户在视图中更改数据,它具有最新的副本. 与模型不同,它不能包含代理,因此它不 ...

  8. 【extjs6学习笔记】1.13 初始: 模型

    Ext JS包括数据包Ext.data包括处理从服务器保存和检索数据的类. 以下是Ext JS 6数据包中的重要类: Model (Ext.data.Model) Store (Ext.data.St ...

  9. 【extjs6学习笔记】1.15 初始: 关于build

    调试版本 sencha app build --development 发布版本 sencha app build 说明: 使用第三方库时,目前sencha可能还有bug,会更改第三方库内容,所以发布 ...

随机推荐

  1. 单例模式详解及java常用类

    [单例模式]      确保某一个类,只能产生一个实例. 设计思路: ====将构造函数私有化,确保类外部,不能使用new关键字自行创建对象. ====在类内部实例化一个对象,并通过静态方法返回. ( ...

  2. Redis Cluster 4.0 on CentOS 6.9 搭建

    集群简介 Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施(installation). Redis 集群不支持那些需要同时处理多个键的 Redis 命令, 因为执行这些命令需 ...

  3. vue 插值,v-once,v-text, v-html

    引入Vue.js ,通过script形式,vue官网语法记录 创建vue应用,数据和 DOM 已经被建立了关联,所有东西都是响应式的 1:插值 缺点:让你的网速慢,或者数据加载失败时,会在浏览器中直接 ...

  4. [LeetCode] Daily Temperatures 日常温度

    Given a list of daily temperatures, produce a list that, for each day in the input, tells you how ma ...

  5. Java入门之JDK的安装和环境变量的配置

    Java的版本 1. Java SEjava se 以前称为J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程序.Java SE是基础包,但是也包含了支持 Jav ...

  6. [Luogu 1730]最小密度路径

    Description 给出一张有N个点M条边的加权有向无环图,接下来有Q个询问,每个询问包括2个节点X和Y,要求算出从X到Y的一条路径,使得密度最小(密度的定义为,路径上边的权值和除以边的数量). ...

  7. [HNOI 2006]鬼谷子的钱袋

    Description 鬼谷子非常聪明,正因为这样,他非常繁忙,经常有各诸侯车的特派员前来向他咨询时政.有一天,他在咸阳游历的时候,朋友告诉他在咸阳最大的拍卖行(聚宝商行)将要举行一场拍卖会,其中有一 ...

  8. 【BZOJ2186】【SDOI2008】沙拉公主的困惑

    Description ​ 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大户沙拉公主决定预测一下大富翁 ...

  9. 计蒜客NOIP2017提高组模拟赛(五)day1-展览

    传送门 发现这题选或不选对状态的优劣程度不会产生影响,如果已经确定了两个数a和b,那么最优的首项和公比也都是唯一确定的, 与对于后面的数x,加进去也好不加进去也好,首项和公比依旧是原来的 于是我们用尺 ...

  10. Python Django缓存,信号,序列化,文件上传,Ajax登录和csrf_token验证

    本节内容 models操作 Django的缓存 请求方式 序列化 Form 配合Ajax实现登录认证 上传文件 Ajax  csrf_token验证方式 1 models操作 单表查询: curd(增 ...