extjs 修改官方主题

迈不过友情╰ 2022-06-08 12:10 219阅读 0赞

1、在用sencha命令创建的Extjs6项目中只能使用一种界面主题(Theme)，如果要换一个界面风络需要重新修改app.json中的theme配置项，然后再用cmd命令重新编译生成  
方法一：修改app.json，在文件的最后有关于builds配置项中的theme  
![这里写图片描述][Center]  
![这里写图片描述][Center 1]  
最后打开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等，如下图：  
![这里写图片描述][Center 2]  
至此第一步完成，下一步需要修改index.html，使其可以根据网址的参数来决定用哪一个Theme。打开index.html，将其注释掉的一段script修改一下。  
\[javascript\] view plaincopy

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

至此，已经可以在开发模式下使用不同的Theme了。示例如下：  
![这里写图片描述][Center 3]

[Center]: /images/20220608/926c6aaaf9e74977a2b22c73b467fb56.png
[Center 1]: /images/20220608/69dcaf59885740ac94b96a84b16a87ce.png
[Center 2]: /images/20220608/ffd5d516cbf2401486a2ce2993bbf39b.png
[Center 3]: /images/20220608/61adfb89961c4fcaab534efbd7b8938c.png