extjs 修改官方主题

1、在用sencha命令创建的Extjs6项目中只能使用一种界面主题(Theme),如果要换一个界面风络需要重新修改app.json中的theme配置项,然后再用cmd命令重新编译生成
方法一:修改app.json,在文件的最后有关于builds配置项中的theme
extjs 修改官方主题_第1张图片
extjs 修改官方主题_第2张图片
最后打开index.html就是修改后的样式。
方法二:方法二是在网上看到的比较快捷的方法,可以快速看到所有的主体,但因为时间紧急,这个方法我还没有实践,等有时间了试一下这个方法。
第一步,修改app.json,在文件的最后部有关于builds配置项的说明,把下面这段代码加进去。

"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配置项,加入一行配置后如下:

"bootstrap": {  
    "base": "${app.dir}",  
    "microloader": "bootstrap.js",  
    "manifest": "${build.id}.json",  
    "css": "bootstrap.css"  
},  

在output配置项中加入resources配置

"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等,如下图:
extjs 修改官方主题_第3张图片
至此第一步完成,下一步需要修改index.html,使其可以根据网址的参数来决定用哪一个Theme。打开index.html,将其注释掉的一段script修改一下。
[javascript] view plaincopy

  
<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>apptitle>  

<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>  

至此,已经可以在开发模式下使用不同的Theme了。示例如下:
extjs 修改官方主题_第4张图片

你可能感兴趣的:(前端)