常规功能和模块自定义系统 (cfcmms)—052在extjs中自定义theme

052在extjs中自定义theme

　　在extjs中的皮肤theme有好几种了，都是官方提供的。在extjs6中又新增了一个triton的theme，这个theme是扁平化的，看着效果还不错，但是其占用的空间太大了，不符合一些对空间有特殊需求的界面。在看了官网的对theme进行扩展的文章后，自己动手将triton的这个theme进行改造，使其更加紧凑。先来看一下改过后的效果图。

　　根据官网上的说明，现在开始改造过程。

　　1、使用sencha cmd 生成一个新的theme。（先要进入你的工程目录，也就是原来用sencha cmd生成的项目的目录之下。）

执行命令： sencha generate theme triton-small，执行好以后会在工程文件的packages/local下生成triton-small这个目录。

　　先修改package.json , 找到 “extend”选项，改成 "extend": "theme-triton"。

　　2､在上面的triton-small下面还有少的目录。我们主要关心的是sass这个目录下面。

　　3､然后的事就简单了，比如说对于button而言，

　　对于grid来说，行高过大也是一个问题，把他的padding改小，变得矮一些。

　　把你看不顺眼的控件一个个这样修改，主要是 padding 的修改。改好过后即可。

　　4､使用新的theme。

在app.json 中将   "theme"选项设置成  "theme": "triton-small",再用sencha cmd 编译一下即可看见效果了。