Sencha Themer

1:介绍

在Ext JS中创建自定义主题一直是一项挑战。但是使用Sencha Themer,我们已经删除了所有的猜测工作,并添加了一个简单的图形界面来定制应用程序的任何方面。

如下所示,入门非常简单。只需命名主题,指向您的应用,工作区或空目录,然后选择您要用作基础的主题。您甚至可以选择自己的自定义主题作为扩展的起点。

2:准备工作

确保您拥有Sencha Themer的安装文件。这些文件应位于Sencha Premium下载文件夹中。您还需要方便地使用激活码。这可以在您的初始购买电子邮件中找到。您还可以从支持门户获取代码。

注意:您可以在此处下载Sencha Themer的全功能30天试用版。

Sencha Themer需要Sencha Cmd 6.5.1或更高版本。Sencha Cmd可以在这里下载。

如果您已在计算机上安装了Cmd,则还可以通过从CLI发出以下命令来升级Cmd:

sencha upgrade

确保您的环境满足上述所有要求后,双击Sencha Themer安装程序。执行后,安装程序将完成以下安装过程。

  1. 接受许可协议,然后单击“下一步>”。
  2. 为“所有用户”或“当前用户”指定用户范围,然后单击“下一步>”。
  3. 选择要安装的Themer的位置,然后单击“下一步>”。
  4. 继续安装。

在Themer完成安装后,单击“Launch themer”并单击“Finish”。对于没有Licenses的开发者,可以获取30天试用期,前提你要准备好,国外邮箱(例如:谷歌邮箱)和Sencha 官网账号,打开Themer工具点击File>Preferences>Licenses

点击AddLicenses 添写邮箱地址(国内邮箱无法收发邮件) 如下图

点击Start Trial

此时Sencha已向你邮箱发送代码了,收到后填写邮件发送过来的Code点击OK将显示一个对话框,通知您已将请求复制到剪贴板。将请求粘贴到“ activations@sencha.com ” 的电子邮件中。

复制到剪贴板并发送activations@sencha.com的邮件格式如下

收到回复后,将附加的许可证下载和/或移动到您的计算机上。

再次打开Themer 发现可以使用了

接下来命令窗口 cd /d到已经构建好的程序下,输入sencha app watch启动程序

点击Create Theme,打开如下该页面输入ThemerName主题名称, app or workspace就是指的你的程序路径,选择ToolKt(classic或modern) ,选择在基础主题作调整的包,点击Create Theme按钮初始化完后

进入这个界面可对每个组件进行修改。

修改完后刷新浏览器可以查看修改后的主题

如果你对自己制定的主题感觉满意,点击Publish>Export Theme Package进行导出sass主题包,或点击Publish>Export CSS导出css文件。

Q群:851794664

Sencha Themer的更多相关文章

  1. 【翻译】Ext JS 6.2 早期访问版本发布

    原文:Announcing Ext JS 6.2 Early Access 非常开心,Sencha Ext JS 6.2早期访问版本今天发布了.早期访问版本的主要目的是为了让大家进行测试并评估Ext ...

  2. Ext Js 6+ 动态切换皮肤

    在这里以ext js 6.2.1版本为例(注:需要安装Sencha Cmd,以及下载对应的sdk) 1.创建空白项目 在命令行中输入sencha -sdk D:\Code\ext-6.2.1 gene ...

  3. JavaScript 开发者的 10 款必备工具

    JavaScript,一种所有主流浏览器都支持的语言,是开发基于浏览器的 Web 应用程序的主力,几乎每年都会受到来自众多开发人员的关注.自然地,框架和库的生态系统自然而然地围绕着 JavaScrip ...

  4. Sencha ExtJS 6 Widget Grid 入门

    最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...

  5. sencha ext js 6 入门

    Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...

  6. Sencha, the nightmare!

    基础 创建一个应用程序 sencha -sdk /path/to/sdk generate app %name% /path/to/app 跑起来 cd /path/to/app sencha app ...

  7. sencha touch的开源插件和例子

    写了好久的sencha touch,没想到换工作竟然一年多没有搞了.因为项目的缘故收集了好多的组件,由于懒惰,没有整理,现在想想有点后悔了,再加上如果就这样丢弃,感觉有些遗憾,今天整理了一下放在git ...

  8. 解读sencha touch移动框架的核心架构(一)

    sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架 那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构 ...

  9. 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 第一个APP

    参考博文: [Phonegap+Sencha Touch] 移动开发1.准备工作 [Phonegap+Sencha Touch] 移动开发2.PhoneGap/Cordova初步使用   经过差不多1 ...

随机推荐

  1. Vue2.0+Node.js+MongoDB全栈打造商城系统

    vue.js +axios mock数据 在main.js中 import axios from 'axios' Vue.prototype.$ajax = axios webpack.dev.con ...

  2. day014-反射、注解

    1. Junit 1.1什么是Junit Junit是Java语言编写的第三方单元测试框架(工具). 1.2单元测试 在Java中,一个类就是一个单元. 单元测试:开发中编写的一小段代码,用来检测类中 ...

  3. Laravel 单元测试-模拟认证的用户

    在 Laravel 编写单元测试时经常会遇到需要模拟认证用户的时候,比如新建文章.创建订单等,那么在 Laravel unit test 中如何来实现呢? 官方解决方法 Laravel 的官方文档中的 ...

  4. 再学UML-深入浅出UML类图(四)

    实例分析1——登录模块 某基于C/S的即时聊天系统登录模块功能描述如下: 用户通过登录界面(LoginForm)输入账号和密码,系统将输入的账号和密码与存储在数据库(User)表中的用户信息进行比较, ...

  5. nodejs理解

    一.nodejs介绍 nodejs主要体现在事件机制和异步IO,nodejs是事件驱动的: nodejs作用:js的运行环境.操作文件.链接数据库: nodejs在执行js是单线程的,但不是nodej ...

  6. chpasswd

    功能说明:从标准输入中读取一定格式的用户名.密码来批量更新用户的密码,其格式为 “用户名:密码”. 参数选项:-e 默认格式是明文密码,使用-e参数则需要加密的密码.

  7. react开发环境准备

    使用reactjs,我们有两种方式 一种是通过script标签引入reactjs,这是一种比较古老的编码方式了, 如果我们的项目比较大,你会对项目js进行拆分,然后页面就会通过script标签加载很多 ...

  8. public /protected/private的作用域

    作用域 当前类 同一package 子孙类 其他package public √ √ √ √ protected √ √ √ × friendly √ √ × × private √ × × ×

  9. No space left on device错误解决

    No space left on device错误解决笔记 今天准备重启下数据库(linux oracle11g) conn /as sysdba; 出现这样的错误No space left on d ...

  10. canvas基本图形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...