Ext.ux.ThemeCycleButton换肤组件 示例

Ext.ux.ThemeCycleButton换肤组件 示例

效果:

 

 

创建调用HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="extjs/ext-all.js"></script>
 <script type="text/javascript" src="./mygrid.js"></script>
<style type="text/css">
</style>
<script>
Ext.onReady(function(){
            new Ext.ux.ThemeCycleButton({renderTo : document.body});
});
</script>
</head>
<body>
<div id='toolbar-div'></div>
</body>
</html>

 

备注:

附件中提供了十二种ext皮肤。

Ext.ux.ThemeCycleButton文件中要注意其url路径(包括css和css中图片的路径)。


Ext.ux.ThemeCycleButton文件源码:

 Ext.ux.ThemeCycleButton = Ext.extend(Ext.CycleButton, { 
     /**
 
      * file 你的css名称
 
      * text 下拉框的名称
 
      * iconCls 设置图标css
 
      */                                   
  
     cssItems:[ 
  
         {file: 'ext-all.css', text: 'default',checked:true,  iconCls: 'icon-blue-theme'}, 
  
         {file: 'xtheme-black.css', text: 'black', iconCls: 'icon-black-theme'}, 
  
         {file: 'xtheme-calista.css', text: 'calista', iconCls: 'icon-calista-theme'}, 
  
         {file: 'xtheme-darkgray.css', text: 'darkgray', iconCls: 'icon-darkgray-theme'}, 
  
         {file: 'xtheme-gray.css', text: 'gray', iconCls: 'icon-gray-theme'}, 
  
         {file: 'xtheme-green.css', text: 'green', iconCls: 'icon-green-theme'}  ,

    {file: 'xtheme-indigo.css', text: 'indigo', iconCls: 'icon-indigo-theme'}, 
  
         {file: 'xtheme-midnight.css', text: 'midnight', iconCls: 'icon-midnight-theme'}, 
  
         {file: 'xtheme-olive.css', text: 'olive', iconCls: 'icon-olive-theme'}, 
  
         {file: 'xtheme-pink.css', text: 'pink', iconCls: 'icon-pink-theme'}, 
  
         {file: 'xtheme-purple.css', text: 'purple', iconCls: 'icon-purple-theme'},

   {file: 'xtheme-slate.css', text: 'slate', iconCls: 'icon-slate-theme'}, 
  
         {file: 'xtheme-slickness.css', text: 'slickness', iconCls: 'icon-slickness-theme'}
  
     ], 
  
     themeVar:'style', 
  
     headVar: 'head', 
  
     //cssPath
  
     cssPath:'./extjs/resources/css/', 
  
      
  
     initComponent: function() { 
  
         Ext.apply(this, { 
  
             showText: true, 
  
             prependText: ' ', 
  
             items: this.cssItems 
  
         }); 
  
         if(Ext.state.Manager){  
  
             var selectedTheme = Ext.state.Manager.get(this.themeVar);  
  
             if(selectedTheme){  
  
                 for(var i=0; i<this.items.length;i++){ 
  
                     if (this.items[i].file == selectedTheme){ 
  
                         this.items[i].checked = true; 
  
 //                      this.setActiveItem(this.items[i], true); //error ?? 
  
                         this.changeHandler(this, this.items[i]); 
  
 //                      this.changeHandler.defer(1000, this, [this, this.items[i]]); 
  
                         break; 
  
                     } 
  
                 } 
  
             }  
  
         } 
  
         Ext.ux.ThemeCycleButton.superclass.initComponent.apply(this, arguments); 
  
     }, 
  
    
     changeHandler: function(o, i){ 
  
         if(Ext.state.Manager.getProvider()) { 
  
             Ext.state.Manager.set(this.themeVar, i.file); 
  
             Ext.state.Manager.set(this.headVar, i.head); 
  
         } 
  
         Ext.util.CSS.swapStyleSheet(this.themeVar, this.cssPath + i.file); 
  
         Ext.util.CSS.getRule('.x-panel-body', true).style.background = 'url(' + i.head + ')'; 
  
 //      Ext.util.CSS.updateRule('.x-panel-body', 'background', 'url(' + i.head + ')'); 
  
         if(Ext.getCmp('viewport')){ 
  
             Ext.getCmp('viewport').layout.center.panel.setSize(Ext.getCmp('viewport').layout.center.getSize().width + 1); 
  
             Ext.getCmp('viewport').doLayout(); 
  
             Ext.getCmp('viewport').layout.center.panel.setSize(Ext.getCmp('viewport').layout.center.getSize().width - 1); 
  
             Ext.getCmp('viewport').doLayout(); 
  
         } 
  
     } 
  
 }); 
  
 Ext.reg('themecyclebutton', Ext.ux.ThemeCycleButton); 

你可能感兴趣的:(JavaScript,html,css,ext)