`
crabdave
  • 浏览: 1278907 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext.ux.ThemeCycleButton换肤组件 示例

EXTCSSJavaScriptHTML 
阅读更多

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); 

分享到：
| ExtJS编写的youtube视频播放组件 示例
评论
1 楼 javaAlpha 2009-11-13  
最近的项目也有个换皮肤的需求
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics