背景

用过 ExtJs 的朋友都有一种趋势:审美疲劳,好在 Ext4.1 之后的版本提供了快速自定义主题的功能,本文的内容主要来自:http://docs.sencha.com/extjs/4.2.2/#!/guide/theming,我记录下来是为了强化一下。

安装环境

自定义主题

第一步:创建 Workspace

命令行内容

 cd /d E:\ExtCoding
sencha -sdk ext-4.2 generate workspace ThemingStudy

运行结果

第二步:创建 App

命令行内容

 cd /d E:\ExtCoding\ThemingStudy
sencha -sdk ext generate app ThemeTest ThemeTest

运行结果

第三步:创建主题

命令行内容

 cd /d E:\ExtCoding\ThemingStudy\ThemeTest
sencha generate theme happy-theme-green

运行结果

第四步:修改主题的“继承主题”和“Saas 变量”

修改“继承主题”

修改“Saas 变量”

增加文件:E:\ExtCoding\ThemingStudy\packages\happy-theme-green\sass\var\Component.scss

 $base-color: # !default;

第五步:编译主题

命令行内容

 cd /d E:\ExtCoding\ThemingStudy\packages\happy-theme-green
sencha package build

运行结果

第六步:App 使用主题,编译 App

在 E:\ExtCoding\ThemingStudy\ThemeTest\.sencha\app\sencha.cfg 中修改如下内容:

 app.theme=happy-theme-green

编译 App 使用的命令行内容

 cd /d E:\ExtCoding\ThemingStudy\ThemeTest
sencha app build

第七步:最终运行结果

如何学习 Sass 变量?

备注

再也不怕主题不兼容了,随着浏览器的性能越来越好,看好 ExtJs,不过我有可能要转 Silverlight 或 WPF 了。

ExtJS4.2:自定义主题 入门的更多相关文章

  1. ExtJS4.2.1自定义主题(theme)样式详解

    (基于Ext JS 4.2.1版本) UI组件 学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件. Ex ...

  2. ModernUI教程:创建自定义主题

            Modern UI WPF包括两个内置主题(dark与light).在1.0.3版本,您可以构建自定义的主题.Modern UI应用程序通常有在全局资源字典App.xaml中有如下定义 ...

  3. 如何优雅使用Sublime Text3(Sublime设置豆沙绿背景色和自定义主题)

    ♣Sublime Text3软件的下载 ♣设置字体的大小 ♣设置背景色和关键字颜色(Color Scheme 生成器) ♣快速生成html头文件 1.Sublime Text3软件的下载地址和包含的文 ...

  4. Android菜鸟的成长笔记(6)——剖析源码学自定义主题Theme

    原文:Android菜鸟的成长笔记(6)--剖析源码学自定义主题Theme 还记得在Android菜鸟的成长笔记(3)中我们曾经遇到了一个问题吗?"这个界面和真真的QQ界面还有点不同的就是上 ...

  5. Sublime Text3自定义主题

    设置背景色和关键字颜色(Color Scheme 生成器): Color Scheme 生成器地址:http://tmtheme-editor.herokuapp.com/ 首先:点击General- ...

  6. WebAppBuilder自定义主题

    WebAppBuilder自定义主题 by 李远祥 基本步骤: 创建新主题的文件夹 注册新的主题到manifest.json 文件 覆盖HeaderController 部件的颜色. 覆盖panel的 ...

  7. Material使用05 自定义主题、黑夜模式\白天模式切换

    需求: 1 不使用materil依赖内建的主题,使用自己创建的主题 2 利用自己创建的主题实现白天模式和黑夜模式 1 自定义主题 1.1 创建自定义主题文件 them.scss // 引入materi ...

  8. 18 UI美化自定义主题样式代码

    自定义主题 假设我们我们对现有的样式不大满意 那么可在工程目录res/values下的styles.xml自定义 方法: 1. res/values下的styles.xml文件中自定义一个标签 < ...

  9. 演练Ext JS 4.2自定义主题

    本文将根据API文档中关于主题的介绍做的一次演练,以便熟悉自定义主题的过程. 练习环境: Sencha Cmd v4.0.1.45 Ruby 1.9.3-p392 firefox 26 首先,使用以下 ...

随机推荐

  1. Mysql学习之order by的工作原理

    在你开发应用的时候,一定会经常碰到需要根据指定的字段排序来显示结果的需求.假设你要查询城市是“杭州”的所有人名字,并且按照姓名排序返回前 1000 个人的姓名.年龄. 查询语句为: ; 全字段排序 为 ...

  2. rest api load test

    1. SoapUI + LoadUI 2. https://github.com/jeffbski/bench-rest 3. JMeter

  3. oracle去掉字段值中的某些字符串

    我想去掉字段值中的“_” select replace(fdisplayname,'_','') from SHENZHENJM1222.B replace 第一个参数:字段/值,第二个参数时替换字符 ...

  4. Java 中可变参数

    可变参数 Java 中可变参数 现在需要编写一个求和的功能,但是不知道有几个参数,在调用的时候才知道有几个参数,请问这如何实现呢? Java 给我们提供了一个 JDK 1.5 的新特性---可变参数 ...

  5. thinkphp5.0 API友好

    新版ThinkPHP针对API开发做了很多的优化,并且不依赖原来的API模式扩展. 数据输出 新版的控制器输出采用Response类统一处理,而不是直接在控制器中进行输出,通过设置default_re ...

  6. Tomcat在Eclips中的使用及注意细节

    1.运行环境,先配置Eclips Eclips中的Windows→ preferences→弹出框左边Server→Runtime Environments→右边Add添加需要的Apach Tomca ...

  7. 在树莓派3B上安装node.js

    本文主讲如何在树莓派3B上安装node.js 环境描述1. 树莓派安装了`2016-11-25-raspbian-jessie-lite`(PS:在此版本的镜像中,默认禁用了ssh,在烧录好镜像之后, ...

  8. Python中的模块(1)

    Python中的模块 有过C语言编程经验的朋友都知道在C语言中如果要引用sqrt这个函数,必须用语句"#include<math.h>"引入math.h这个头文件,否则 ...

  9. [POJ1625]Censored!(AC自动机+DP+高精度)

    Censored! Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 10824   Accepted: 2966 Descri ...

  10. 【坐标变换】【二维偏序】【线段树】Gym - 100820G - Racing Gems

    题意:第一象限有n个点,你从x正半轴任选一个位置出发,vy恒定,vx可以任意变化,不过只能在-vy/r到vy/r之间变化,问你最多能经过多少个点. 暴力dp是n^2,不可取. 注意到,一个点,所能到达 ...