ext6-修改官方主题

最新推荐文章于 2019-09-21 20:21:39 发布

原创最新推荐文章于 2019-09-21 20:21:39 发布 · 5.3k 阅读

4 ·

CC 4.0 BY-SA版权

extjs6.0.0 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在ExtJS6中更改官方主题。首先，确保安装的是CMD6，因为ExtJS6需要CMD6进行打包。卸载其他版本CMD后重新安装CMD6，通过修改app.json中的theme配置项，然后使用`sencha app build development`命令重新编译以应用新的主题。文中提供了两种方法，一种是直接修改app.json，另一种是通过快速切换主题的技巧，但未实际验证第二种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说明，extjs6必须用cmd6（cmd如今最新版本是6，我用的是cmd6.0.2.14）打包

1.安装cmd6

如果之前安装的有cmd其他版本，需要把其他版本卸载了再安装cmd6，

注：我之前看过文章说cmd可以同时安装多个版本，用的时候只需要sencha-xxxxx，指向某个版本就可以了，并且之前我也同时安装的cmd5.1.2和cmd5.1.3两个版本，两个版本都可以用，所以理所当然的，我以为cmd6直接安装，就可以使用，但是尝试安装了五遍，每次都能安装到最后一步finish，然而在cmd运行sencha后依然显示的是5.1.3；运行sencha-6.0.2.14的话就显示，也就是说cmd6没有安装成功；

然后我就去控制面板里面把所有的cmd全部删除，再重新安装cmd6，就成功了。

好了，接下来要修改官方样式了。

2.修改官方主体样式

在用sencha命令创建的Extjs6项目中只能使用一种界面主题(Theme)，如果要换一个界面风络需要重新修改app.json中的theme配置项，然后再用cmd命令重新编译生成

有两种方式，我用的是一种笨方法，

方法一：修改app.json，在文件的最后有关于builds配置项中的theme

第二步：用 sencha app build development 来重新生成开发环境；

最后打开index.html就是修改后的样式。

方法二：方法二是在网上看到的比较快捷的方法，可以快速看到所有的主体，但因为时间紧急，这个方法我还没有实践，等有时间了试一下这个方法。

第一步，修改app.json，在文件的最后部有关于builds配置项的说明，把下面这段代码加进去。

[html]view plaincopyprint? 
    
 "builds": {  
   "classic": {  
    "theme": "theme-classic"  
     },   
   "gray" : {  
      "theme" : "theme-gray"  
   },  
   "aria": {  
      "theme": "theme-aria"  
   },                
   "neptune" : {  
      "theme": "theme-neptune"  
   },    
   "crisp" :{  
      "theme": "theme-crisp"  
   },   
   "triton": {  
      "theme": "theme-triton"  
   }  

　　还要在app.json中找到bootstrap配置项，加入一行配置后如下：

[html]view plaincopyprint? 
    
 "bootstrap": {  
     "base": "${app.dir}",  
     "microloader": "bootstrap.js",  
     "manifest": "${build.id}.json",  
     "css": "bootstrap.css"  
 },  

　　在output配置项中加入resources配置

[html]view plaincopyprint? 
    
 "output": {  
     "base": "${workspace.build.dir}/${build.environment}/${app.name}",  
     "appCache": {  
         "enable": false  
     },  
     "resources": {  
       "path": "${build.id}/resources",  
       "shared": "resources"  
     }  
 },  

　　修改好以上三项后，保存app.json。然后用 sencha app build development 来重新生成开发环境。编译完成后,会发现在build/development/app 目录下多出来一些文件夹，这些文件夹分别是各种Theme的资源文件；在WebContent下面也多出了相应的Theme的配置文件，如triton.json、neptune.json等，如下图：

　　至此第一步完成，下一步需要修改index.html，使其可以根据网址的参数来决定用哪一个Theme。打开index.html，将其注释掉的一段script修改一下。

[javascript]view plaincopyprint? 
    
 <!DOCTYPE HTML>  
 <html manifest="">  
 <head>  
 <meta http-equiv="X-UA-Compatible" content="IE=edge">  
 <meta charset="UTF-8">  
 <meta name="viewport"  
     content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
   
 <title>app</title>  
   
 <script type="text/javascript">  
     var Ext = Ext || {};  
     Ext.beforeLoad = function(tags) {  
   
         var theme = location.href.match(/theme=([\w-]+)/);  
         theme = (theme && theme[1]) || 'crisp';  
           
         console.log('加载系统主题方案:' + theme);  
         Ext.manifest = theme + '.json';   
   
     };  
   
 </script>  
   
 <script id="microloader" data-app="e8b92f93-ab34-4781-ab41-b4b0f2a7d2c0"  
     type="text/javascript" src="bootstrap.js"></script>  
   
 </head>  
 <body></body>  
 </html>  