主题切换提交

app.json

@@ -220,20 +220,28 @@
     ],
 
     "builds": {
-        "dev": {
-            "server": {
-                "basePath": "http://127.0.0.1:24002",
-                "urlPattern": "^\/api\/"
-            }
+        //6.6默认主题 扁平风格
+        "triton": {
+            "theme": "theme-triton"
         },
-        "prod": {
-            "server": {
-                "basePath": "http://10.1.81.2:24002",
-                "urlPattern": "^\/api\/"
-            }
+        //经典主题
+        "classic": {
+            "theme": "theme-classic"
+        }, 
+        "gray" : {
+            "theme" : "theme-gray"
+        },
+        "aria": {
+            "theme": "theme-aria"
+        },              
+        "neptune" : {
+            "theme": "theme-neptune"
+        },  
+        "crisp" :{
+            "theme": "theme-crisp"
         }
     },
-
+    
     /**
      * List of all CSS assets in the right inclusion order.
      *
@@ -356,7 +364,7 @@
      */
     "bootstrap": {
         "base": "${app.dir}",
-
+        "manifest": "${build.id}.json",
         "microloader": "bootstrap.js",
         "css": "bootstrap.css"
     },
@@ -411,7 +419,12 @@
         "base": "${workspace.build.dir}/${build.environment}/${app.name}",
         "appCache": {
             "enable": false
-        }
+        },
+        "resources": {
+            "path": "${build.id}/resources",
+            "shared": "resources"
+        },
+        "manifest":"${build.id}.json"
     },
 
     /**

app/Application.js

@@ -9,7 +9,8 @@ Ext.define('uas.Application', {
 
     requires: [
         'uas.*',
-        'Ext.form.field.*'
+        'Ext.form.field.*',
+        'Ext.ux.form.*' 
     ],
 
     name: 'uas',

app/Application.scss

@@ -120,4 +120,3 @@ $enable-font-awesome: dynamic(true);
     color:#fff;
   }
 }
-

app/view/main/Main.js

@@ -16,6 +16,47 @@ Ext.define('uas.view.main.Main', {
     ],
     
     items: [{
+        region: 'north',
+        xtype: 'toolbar',
+        dock: 'top',
+        height:48,
+        items:[{
+            xtype:'displayfield',
+            value:'<h2 style="margin-top: 7px;">UAS2.0组件库</h2>',
+        },'->',{
+            xtype:'combo',
+            width: 220,
+            labelWidth:80,
+            editable: false,
+            fieldLabel:'当前主题',
+            store: Ext.create('Ext.data.Store', {
+                fields: ['display', 'value'],
+                data : [
+                    {"display":"时尚蓝", "value": 'triton'},
+                    {"display":"时尚灰", "value": 'crisp'},
+                    {"display":"商务蓝", "value": 'neptune'},
+                    {"display":"深邃黑", "value": 'aria'},
+                    {"display":"经典灰", "value": 'gray'},
+                    {"display":"经典蓝", "value": 'classic'}
+                ]
+            }),
+            cls:'x-desktop-combo',
+            triggerAction: 'all',
+            forceSelection: true,
+            queryMode: 'local',
+            displayField: 'display',
+            valueField: 'value',
+            listeners: {
+                select: function(combo, records, obj){
+                    setCookie('theme',combo.value,0);
+                    window.location.reload();
+                },
+                beforerender:function(c){
+                    c.setValue(getCookie('theme'))
+                }
+            }
+        }]
+    },{
         region: 'west',
         collapsible: true,
         title: '目录',

app/view/main/Main.scss

@@ -0,0 +1,3 @@
+.x-desktop-combo{
+    margin: -10px 20px 0 0 !important;
+}

index.html

@@ -10,8 +10,49 @@
 
 
     <!-- The line below must be kept intact for Sencha Cmd to build your application -->
-    <script id="microloader" data-app="87100719-3701-4a39-9b0f-ed5f99833426" type="text/javascript" src="bootstrap.js"></script>
+    <script type="text/javascript">
+        /**
+         * [setCookie 设置cookie]
+         */
+        function setCookie(key,value,t){
+            var oDate=new Date();
+            oDate.setDate(oDate.getDate()+t);
+            document.cookie=key+"="+value+"; expires="+oDate.toDateString();
+        }
+        /**
+         * [getCookie 获取cookie]
+         */
+        function getCookie(key){
+            var arr1=document.cookie.split("; ");//由于cookie是通过一个分号+空格的形式串联起来的，所以这里需要先按分号空格截断,变成[name=Jack,pwd=123456,age=22]数组类型；
+            for(var i=0;i<arr1.length;i++){
+                var arr2=arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
+                if(arr2[0]==key){
+                    return decodeURI(arr2[1]);
+                }
+            }
+        }
+        /**
+         * [removeCookie 移除cookie]
+         */
+        function removeCookie(key){
+            setCookie(key,"",-1); // 把cookie设置为过期
+        };
+    </script>
+
+    <script type=text/javascript> 
+        var Ext = Ext || {}; 
+        Ext.beforeLoad = function(tags) { 
+            var theme = getCookie('theme'); 
+            if(!theme){
+                setCookie('theme',"triton",0);
+                theme = 'triton';
+            }
+            console.log('加载系统主题方案:' + theme); 
+            Ext.manifest = theme + '.json'; }; 
+    </script>
 
+    <script id="microloader" data-app="87100719-3701-4a39-9b0f-ed5f99833426" type="text/javascript" src="bootstrap.js"></script>
+    
 </head>
 <body></body>
 </html>

overrides/data/Connection.js

@@ -15,13 +15,30 @@ Ext.define('Ext.overrides.data.Connection', {
         defaultServerHeaders: null
     },
 
+    /* 本地配置和服务器配置
+     "dev":{
+        "server": {
+            "basePath": "http://127.0.0.1:24002",
+            "urlPattern": "^\/api\/"
+        }
+     },
+     "prod":{
+        "server": {
+            "basePath": "http://10.1.81.2:24002",
+            "urlPattern": "^\/api\/"
+        }
+     },
+    */
     privates: {
         setupServerOptions: function(options) {
-            var serverOptions = Ext.manifest.server, originUrl = options.url;
-            if (serverOptions && serverOptions.basePath && !this.urlRegexp.test(originUrl) &&
-              (!serverOptions.urlPattern || new RegExp(serverOptions.urlPattern).test(originUrl))) {
+            //检验是开发环境还是线上地址
+            let prod = RegExp("10.1.81.2:*").test(window.location.href);
+            var basePath = prod?'http://10.1.81.2:24002':'http://127.0.0.1:24002',
+                originUrl = options.url,
+                urlPattern = "^\/api\/";
+            if ( new RegExp(urlPattern).test(originUrl) ) {
                 Ext.Object.merge(options, {
-                    url: serverOptions.basePath + originUrl.replace('/api',''),
+                    url: basePath + originUrl.replace('/api',''),
                     headers: this.getDefaultServerHeaders() || {}
                 });
             }