[置顶] 常规功能和模块自定义系统 (cfcmms)—013给Extjs6加入多界面主题(Theme)

常规功能和模块自定义系统 (cfcmms)—013给Extjs6加入多界面主题(Theme)


  在用sencha命令创建的Extjs6项目中只能使用一种界面主题(Theme),如果要换一个界面风络需要重新修改app.json中的theme配置项,然后再用cmd命令重新编译生成。经过一段时间的研究,发现是可以在用cmd命令编译的时候生成多种Theme,我们需要在index.html中加一些代码来指定使用哪个Theme。
  第一步,修改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等,如下图:
[置顶] 常规功能和模块自定义系统 (cfcmms)—013给Extjs6加入多界面主题(Theme)_第1张图片

  至此第一步完成,下一步需要修改index.html,使其可以根据网址的参数来决定用哪一个Theme。打开index.html,将其注释掉的一段script修改一下。
<!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了。示例如下:
[置顶] 常规功能和模块自定义系统 (cfcmms)—013给Extjs6加入多界面主题(Theme)_第2张图片

[置顶] 常规功能和模块自定义系统 (cfcmms)—013给Extjs6加入多界面主题(Theme)_第3张图片

  如果没有指定theme,则会使用默认的triton。这是开发环境下的多界面主题的使用,如果你不想把改变theme加在网址中,也可以存在cookies中,自己做一个更改主题的控件,修改主题后将其存在cookies中,再启动的时候读取cookies就可以了。
  发布模式下的使用方式和这个基本相同,但是还有最后一个问题没有解决。各个[theme.json]文件不能自动生成。现在只能将app.json文件拷贝后,改成各个theme的文件,然后在里面稍微改一下配置信息即可。
  如果有人知道如何生成发布模式下的各个json文件,麻烦告知。

  已有人告知,请见回复!!!

你可能感兴趣的:(开发经验,ExtJs6,cfcmms,常规功能和模块自定义系统)