教你如何更换Extjs皮肤

最新推荐文章于 2021-06-03 04:05:18 发布
最新推荐文章于 2021-06-03 04:05:18 发布
阅读量644 收藏
点赞数
分类专栏： ExtJS

教你如何更换Extjs皮肤

目标：

      了解3种办法更换皮肤

内容：

       1，直接在当前浏览器更换皮肤

       2，在当前浏览器更换皮肤并保存到cookle

       3，在当前浏览器更换皮肤并保持到config文件

   1.直接添加其他css文件换肤.
          皮肤文件:xtheme-olive.zip下载
          把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:

         

解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images文件夹下

设置css文件如下:

其实就是在原有的基础上添加了个xtheme-olive.css文件。

定义Store

var themes = [
            ['默认', 'ext-all.css'],
            ['紫色','xtheme-purple.css'],
            ['橄榄色','xtheme-olive.css'],
            ['暗蓝色','xtheme-slate.css'],
            ['浅灰色','xtheme-darkgray.css'],
            ['绿色','xtheme-gray.css'],
            ['椒盐色','xtheme-galdaka.css'],
            ['粉色','xtheme-pink.css'],
            ['靛青色','xtheme-indigo.css'],
            ['深夜','xtheme-midnight.css'],
            ['银白色', 'xtheme-silverCherry.css']
          ];
          var Mystore=newExt.data.SimpleStore({
           fields:['theme','css'],
            data:themes
          });

        定义下拉列表框：

        var Mycombo=new Ext.form.ComboBox({
                   fieldLabel:'更换皮肤',
                   id:'css',
                   triggerAction:'all',
                   store:Mystore,
                   displayField:'theme',
                   valueField:'css',
                   value:'默认',
                   mode:'local',
                   anchor:'95%',
                   handleHeight:10,
                   resizable:true,
                   selectOnfocus:true,
                   typeAhead:true
          });
          Mycombo.on //定义事件
            ({
               "select":function()
                       {
                          var css =   Mycombo.getValue();
                          //设置cookies
                          var date=new Date();
                          //alert(css);
                          date.setTime(date.getTime()+30*24*3066*1000);
                          document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
                          document.cookie="css="+css+";expires="+date.toGMTString();
                       }
            });

     要保存到cookle需要添加下面代码：

     var cookieArr =window.document.cookie.split(";");  
            var css =null;
            for(vari=0;i<cookieArr.length;i++) {
            var arr =cookieArr[i].split("=");
           if(arr[0]=="css") {
                 css = arr[1];
                }
            };
            alert(css);
           window.document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;

  var MyPanel=newExt.form.FormPanel({
              title:'皮肤应用',
             renderTo:Ext.getBody(),
              width:300,
              height:150,
              frame:true,
             labelWidth:70,
              x:400,
              y:100,
              shadow:true,
              floating:true,
            draggable:{
                    insertProxy: false,//拖动时不虚线显示原始位置
                  onDrag : function(e){
                    var pel = this.proxy.getEl();
                       this.x =pel.getLeft(true);
                       this.y =pel.getTop(true);//获取拖动时panel的坐标
             var s =this.panel.getEl().shadow;
             if (s){
                s.realign(this.x, this.y,pel.getWidth(), pel.getHeight());
             }
             },
             endDrag: function(e){
                      this.panel.setPosition(this.x, this.y);//移动到最终位置
                 }
             },
            labelAlign:'center',
            labelSeparator:':',
             items:[
                Mycombo
             ]
         });

源码效果：

  <%@ PageLanguage="C#" AutoEventWireup="true" CodeBehind="Ext8.aspx.cs" Inherits="EXT1.Ext8" %>
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" >
   <head runat="server">
       <title>Extjs中工具栏和菜单栏介绍与应用</title>
       <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
       <link rel="Stylesheet" type="text/css" />
      <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
      <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
  
      <script src="MyJS/Skin.js" type="text/javascript"></script>
      <style type="text/css">
          .newFile{background-image: url(MyImage/NewFile.ico) !important;}
          .openFile{background-image: url(MyImage/OpenFile.ico) !important;}
          .saveFile{background-image: url(MyImage/saveFile.ico) !important;}
      </style>
      <scripttype="text/javascript">
      functionRead1() {
          varMyToolbar=newExt.Toolbar({
              width:300,
              x:400,
              y:100,
             floating:true,
              frame:true,
             renderTo:document.body,
              items:[
                 {
                     text:'新建',
                     handler:function () {
                         alert("新建");
                     },
                     iconCls:'newFile'
                  },
                  {
                     text:'打开',
                     iconCls:'openFile'
                  },
                  {
                     text:'保存',
                     iconCls:'saveFile'
                  },
               {text:'111'},{text:'222'}
              ]
          });     
      }
      functionRead2() {
          varMyToolBar=newExt.Toolbar({
              width:300,
              x:400,
              y:100,
             floating:true,
              frame:true,
             renderTo:document.body,
             
             items:[
                 {
                     text:'地图管理',
                     handler:function () {
                         alert("新建");
                     },
                     iconCls:'newFile',
                     menu:Mymenu
                  },
                  {
                     text:'地图编辑',
                     iconCls:'openFile'
                     
                  },
                  {
                     text:'生成地图',
                     iconCls:'saveFile'
                  },
                 {text:'111'},{text:'222'}
              ]
          });
          var Mymenu=new Ext.menu.Menu({
              shadow:'drop',
        
              items:[
                  {
                     text:'地图管理'
                  },
                  {
                     text:'地图编辑'
                  },
                  {
                     text:'生成地图'
                  }
              ]
          });
      }
      functionmakeCookie()
      {
          var themes=
          [
              ['default', '默认'],
              ['blue', '灰色'],
             ['gray', '绿色'],
             ['access', '橄榄绿'],
             ['pink', '粉色'],
             ['purple', '紫色'],
             ['slate', '暗蓝色']
         ];
         varcbThemes = newExt.form.ComboBox
         ({
             id: 'cbThemes',
             store:themes,
             width: 80,
            typeAhead: true,
            triggerAction: 'all',
            emptyText:'界面主题',
            selectOnFocus:true
         });
         cbThemes.on
         ({
             "select":function(field,newValue,oldValue)
                    {
                       var css =   newValue.data.value;
                       //设置cookies
                        var date=new Date();
                       date.setTime(date.getTime()+30*24*3066*1000);
                       document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/xtheme-"+css+".css";
                       document.cookie="css="+name+";expires="+date.toGMTString();//设置cookies
                    }
         });    
 
         var win = new Ext.Window
         ({
             title:"测试更换皮肤窗口",renderTo:document.body,width:500,height:300,x:300,y:100,
             bbar:['更换皮肤','',cbThemes]      
         });
         win.show();
 
        document.body.onload = function()
         {
               varcookiesArr=document.cookie.split(";");
               varcss;
               for(var i=0;i<cookiesArr.length;i++)
               {
                   var arr=cookiesArr[i].split("=");
                    if(arr[0]=="css")
                   {
                      css=arr[1];
                      break;
                   }
               }
              document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/xtheme-"+css+".css";
         };
     }   
     functionRead3() {
         var themes= [
             ['默认', 'ext-all.css'],
             ['紫色', 'xtheme-purple.css'],
             ['橄榄色', 'xtheme-olive.css'],
             ['暗蓝色', 'xtheme-slate.css'],
             ['浅灰色', 'xtheme-darkgray.css'],
             ['绿色', 'xtheme-gray.css'],
             ['椒盐色', 'xtheme-galdaka.css'],
             ['粉色', 'xtheme-pink.css'],
             ['靛青色', 'xtheme-indigo.css'],
             ['深夜', 'xtheme-midnight.css'],
             ['银白色', 'xtheme-silverCherry.css']
           ];
         varMystore=newExt.data.SimpleStore({
            fields:['theme','css'],
            data:themes
         });
         varMyPanel=newExt.form.FormPanel({
             title:'表单应用二',
            renderTo:Ext.getBody(),
             width:300,
             height:320,
             frame:true,
            labelWidth:70,
             x:400,
             y:100,
             shadow:true,
            floating:true,
            draggable:{
                   insertProxy: false,//拖动时不虚线显示原始位置
                  onDrag : function(e){
                    var pel = this.proxy.getEl();
                       this.x =pel.getLeft(true);
                       this.y =pel.getTop(true);//获取拖动时panel的坐标
             var s =this.panel.getEl().shadow;
             if (s){
                s.realign(this.x, this.y,pel.getWidth(), pel.getHeight());
             }
             },
             endDrag: function(e){
                      this.panel.setPosition(this.x, this.y);//移动到最终位置
                 }
             },
            labelAlign:'center',
            labelSeparator:':',
             items:[
                 {
                    xtype:'combo',
                    fieldLabel:'更换皮肤',
                     id:'css',
                    triggerAction:'all',
                    store:Mystore,
                    displayField:'theme',
                    valueField:'css',
                    value:'默认',
                    mode:'local',
                     anchor:'95%',
                    handleHeight:10,
                    resizable:true,
                    selectOnfocus:true,
                    typeAhead:true,
                    initEvents : function() {
                    this.on('collapse', function() {
                     Ext.util.CSS.swapStyleSheet('theme', 'ext-3.2.0/resources/css/'+ this.getValue());
                    });
                   }
                 }
             ]
         });
     }
   
     functionRead4() {
           var themes = [
             ['默认', 'ext-all.css'],
             ['紫色', 'xtheme-purple.css'],
             ['橄榄色', 'xtheme-olive.css'],
             ['暗蓝色', 'xtheme-slate.css'],
             ['浅灰色', 'xtheme-darkgray.css'],
             ['绿色', 'xtheme-gray.css'],
             ['椒盐色', 'xtheme-galdaka.css'],
             ['粉色', 'xtheme-pink.css'],
             ['靛青色', 'xtheme-indigo.css'],
             ['深夜', 'xtheme-midnight.css'],
             ['银白色', 'xtheme-silverCherry.css']
           ];
           var Mystore=new Ext.data.SimpleStore({
            fields:['theme','css'],
            data:themes
           });
           varMycombo=newExt.form.ComboBox({
                    fieldLabel:'更换皮肤',
                    id:'css',
                     triggerAction:'all',
                    store:Mystore,
                    displayField:'theme',
                    valueField:'css',
                    value:'默认',
                    mode:'local',
                    anchor:'95%',
                     handleHeight:10,
                    resizable:true,
                    selectOnfocus:true,
                    typeAhead:true
           });
          Mycombo.on
             ({
                 "select":function()
                        {
                           var css =   Mycombo.getValue();
                           //设置cookies
                           var date=new Date();
                           //alert(css);
                           date.setTime(date.getTime()+30*24*3066*1000);
                           document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
                           document.cookie="css="+css+";expires="+date.toGMTString();
                        }
             });
             var cookieArr =window.document.cookie.split(";");  
             var css= null;
             for(var i=0;i<cookieArr.length;i++){
             var arr= cookieArr[i].split("=");
             if(arr[0]=="css") {
                  css = arr[1];
                  }
             };
            alert(css);
            window.document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
           
            
             varMyPanel=newExt.form.FormPanel({
             title:'皮肤应用',
            renderTo:Ext.getBody(),
             width:300,
             height:150,
             frame:true,
            labelWidth:70,
             x:400,
             y:100,
             shadow:true,
            floating:true,
             draggable:{
                   insertProxy: false,//拖动时不虚线显示原始位置
                  onDrag : function(e){
                    var pel = this.proxy.getEl();
                       this.x =pel.getLeft(true);
                       this.y =pel.getTop(true);//获取拖动时panel的坐标
             var s =this.panel.getEl().shadow;
             if (s){
                s.realign(this.x, this.y,pel.getWidth(), pel.getHeight());
             }
             },
             endDrag: function(e){
                       this.panel.setPosition(this.x, this.y);//移动到最终位置
                 }
             },
            labelAlign:'center',
            labelSeparator:':',
             items:[
                Mycombo
             ]
         });
        
     }
     Ext.onReady(Read4);
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div id="id1">
    
     </div>
     </form>
 </body>
 </html>

 

shuzhiguoxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs2-3主题皮肤样式
08-27
24种适合ext2和3的主题样式，经css文件拷贝到ext-3.3.1\resources\css目录下，图片拷贝到ext-3.3.1\resources\images目录下。其换肤方法网上有大量的资料供参考
ExtJS之实现华丽的皮肤主题更换
10-17
extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤 　　1 直接添加其他css文件换肤 好多皮肤上网就可以收到的 　　如皮肤文件:xtheme olive zip下载 　　把皮肤文件解压 把css文件 如xtheme olive css 拷贝到extjs的resources目录下css文件夹里面:">extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤 　　1 直接添加其他css文件换肤 好多皮肤上网就可以收到的 　　如皮肤文件:xtheme olive zip下载 　　把皮肤文件解压 把css文件 如xtheme olive css 拷贝到extjs的resources目录 [更多]
ExtJS 皮肤主题更换和资源
热门推荐
binyao02123202的专栏
05-01 1万+
<br />extjs的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤.<br />　　1.直接添加其他css文件换肤.好多皮肤上网就可以收到的<br />　　如皮肤文件:xtheme-olive.zip下载<br />　　把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:<br />     2.　解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images<b
[extjs3.4]添加css样式
wzp1986的专栏
12-01 4187
Ext.onReady(function() { Ext.util.CSS.createStyleSheet( 'body {background-color:yellow;}', 'bodybackye'); alert('变黄'); var elBody = Ext.select('body').item(0); console.d
Ext皮肤切换
一朝身陷IT海，从此回头没有岸！
04-22 171
/** * @author JLee * @since 2011-4-20 * @description * &lt;p&gt;实现 Ext 之间的皮肤切换&lt;/p&gt; * @class Ext.ux.ThemeChange * @extends Ext.form.ComboBox */ Ext.ux.ThemeChange = Ext.extend(Ext....
第八课,Extjs更换皮肤
weixin_33816946的博客
06-09 142
目标： 了解3种办法更换皮肤 内容： 1，直接在当前浏览器更换皮肤 2，在当前浏览器更换皮肤并保存到cookle 3，在当前浏览器更换皮肤并保持到config文件 　　 1.直接添加其他css文件换肤. 皮肤文件:xtheme-olive.zip下载 把皮肤文件解压,把css文件(如xthem...
EXTjS皮肤包
11-01
ExtJS代表扩展JavaScript，是基于YUI（Yahoo用户界面）的sencha的JavaScript框架和产品。它基本上是一个具有现代UI的桌面应用程序开发平台。本教程完全理解Ext JS。 这个参考将带你通过简单和实用的方法，同时学习...
extjs教程word版本
01-23
12. **主题和皮肤**：ExtJS允许自定义主题，以改变应用的外观。教程可能包括如何创建和应用新的主题，或者使用现有的SASS主题。 13. **最佳实践和实战案例**：教程最后可能包含一些最佳实践建议，以及实际项目中的...
Extjs15种经典皮肤任你挑
12-07
在"Extjs15种经典皮肤任你挑"这个主题中，我们将探讨这15种皮肤的特点、使用方法以及如何选择和应用它们。 1. **皮肤的概念与作用**：皮肤是一种CSS样式集合，它可以改变ExtJS组件的颜色、布局和图标等视觉元素，...
ExtJS 7.7 SDK trial
最新发布
07-06
6. **主题与皮肤**：ExtJS支持自定义主题和预定义的主题，如Neptune、Trident等，7.7版可能会有新的或改进的主题选项，以满足更多设计需求。 7. **npm集成**：作为JavaScript开发的主流工具，npm（Node Package ...
extjs4.2主题包
02-04
精选extjs4 2的11个主题 分享给各位 应该能满足普通应用 虽然4 2 x版的 理论上都兼容吧 但测试时最好还是采用本包中提供的类库ext all css 变换主题方法很简单 用下面的代码即可： Ext util CSS swapStyleSheet "theme" "ext4 2 resources css " + cssFileName ; cssFileName即为主题CSS文件名字 如：ext all blue css">精选extjs4 2的11个主题 分享给各位 应该能满足普通应用 虽然4 2 x版的 理论上都兼容吧 但测试时最好还是采用本包中提供的类库ext all css 变换主题方法很简单 用下面的代码即可： Ext util CSS swapStyleSheet "theme" "e [更多]
ExtJs皮肤包(11种主题色)
11-19
之前有看到网友分享的ExtJs皮肤包，很好看，但是都不全，我收藏的主题包一共有11种主题色，很全了，红色，橙色，绿色，青色，银色……，很漂亮……，现在分享出来。
extjs4.1主题皮肤
09-12
extjs的几个皮肤，有相应的预览图片，非常方便，可以看看是否有用
extjs 实例下载(ext) 变更主题、更改主题，换肤、更改皮肤，变换皮肤，下载。。13种皮肤主题
07-28
extjs (ext) 变更主题。。13种皮肤主题 有教程，可移植到ext 2.0.2+任何版本，轻松实现换肤， 是从本人做的系统中抠下来的， 通过ie firfoe opera等测试可用，10分不为过~~好东西。留给有心人~~~
ExtJS 实用教程
03-11
10. **主题与皮肤**：ExtJS支持自定义主题和皮肤，可以改变应用的整体外观，满足不同设计风格的需求。 在阅读《ExtJS2.0实用简明教程(easyjf).pdf》这本书时，新手可以从以下几个方面入手： - 学习基本组件的创建和...
ExtJS自定义主题（theme）样式详解
unity3d学习者
11-19 3140
本文基于Ext JS 4.2.1版本 UI组件基础 学习ExtJS就是学习组件的使用。ExtJS4对框架进行了重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件。 ExtJs4的组件体系中有将近100种组件，而这些组件又可以大致分为四大类，即容器类组件、工具栏及菜单栏组件、表单及元素组件、其他组件。 theme主题 ExtJs4引入了全新的主题系统，采
ext 修改组件html,ExtJS自定义主题（theme）样式详解
weixin_32534073的博客
06-03 703
本文基于Ext JS 4.2.1版本UI组件基础学习ExtJS就是学习组件的使用。ExtJS4对框架进行了重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件。ExtJs4的组件体系中有将近100种组件，而这些组件又可以大致分为四大类，即容器类组件、工具栏及菜单栏组件、表单及元素组件、其他组件。theme主题ExtJs4引入了全新的主题系统，采用Sass和Comp...
extjs树使用别的皮肤的样式_面部皮肤屏障受损，该如何修复？
weixin_42113754的博客
12-02 85
每人面部都有着属于自己的皮肤屏障，就如同树的皮一样，如果表面受损了，那么里面的树心则会受到外部因素的侵蚀。同样的道理，简单来说我们的面部肌肤屏障就面部表皮。如果我们的面部表皮较薄，面部肌肤就更容易受到刺激，就会呈现出了一系列的肌肤问题。那么我们该选择什么类型的护肤品，以达到修复皮肤屏障呢？①、使用无刺激性护肤品如果面部肌肤屏障受损，我们就应该停止使用刺激性的护肤品，避免肌肤屏障进一步的被破坏。在选...
ExtJS 2.0 入门教程与开发指南
"这是一份关于ExtJS的实用开发指南，由龚...无论你是刚开始接触ExtJS还是寻求深化理解，这份“ExtJS实用简明教程”及其配套的《ExtJS实用开发指南》都能为你提供坚实的基础和丰富的实践指导，带你进入ExtJS的广阔世界。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值