Ext.ux.ThemeCycleButton换肤组件示例

crabdave

浏览: 1294935 次
性别:
来自: 北京

最近访客更多访客>>

hwj385327450

ergjss

寒号鸟whpj

linkoog

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT CSS JavaScript HTML

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

ext2样式十二种EXT2的皮肤.rar (1.2 MB)
下载次数: 333

分享到：

ExtJS中editable-column-tree组件的使用 ... | ExtJS编写的youtube视频播放组件示例

2009-02-13 14:04
浏览 3164
评论(1)
查看更多

1 楼 javaAlpha 2009-11-13

最近的项目也有个换皮肤的需求

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论