ExtJs换肤

最新推荐文章于 2020-11-20 17:18:23 发布

good_lgcheng

最新推荐文章于 2020-11-20 17:18:23 发布

阅读量2.1k

点赞数

分类专栏： ExtJs 文章标签： extjs stylesheet resources border ext css

本文链接：https://blog.csdn.net/good_lgcheng/article/details/3371042

版权

ExtJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ExtJs的默认皮肤很好看，但是有时候根据需要修要变换一下，我做了个例子如下：

一.页面中的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
  <title>ExtJs演示换肤</title>
  <link rel="stylesheet" type="text/css" href="resource/ext2.1/resources/css/ext-all.css" />
  <link rel="stylesheet" type="text/css" href="css/common.css" />
  <script src="resource/ext2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
  <script src="resource/ext2.1/ext-all.js" type="text/javascript"></script>
  <script src="resource/ext2.1/source/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
  <script src="resource/ext2.1/examples.js" type="text/javascript"></script>
  <script src="js/prototype.js" type="text/javascript"></script>
  <script src="js/commons.js" type="text/javascript"></script>
    <script type="text/javascript">
   Ext.onReady(function(){
        new Ext.Viewport({
               layout:'border',
               items:[
                      new Ext.BoxComponent({
                           region:'north',
                           el: 'north',//填充指定id的区域内容到north区域，若不设该属性，请通过html:'内容'，设置区域内容
                          height:35
                     }),new Ext.BoxComponent({
                           region:'south',
                           el: 'south',
                           height:25
                     }),{
                          region:'center',
                          title:'中央面板'
                     },{
                         region:'west',
                         width:100,
                         title:'左边面板'
                     },{
                        region:'east',
                        width:100,
                        title:'右边面板'
                     }]
         });
  });
  </script>
</head>

<body>

<div id="lib-bar" class="x-toolbar" style="border-width:0 1px 1px; text-align:right; width:150px; position:absolute; right:0px;left:auto; top:2px; "><div id="lib-bar-inner">
<span>Theme:</span>
<select id="exttheme">
<option value="default">Ext Blue</option>
<option value="gray">Gray Theme</option>
<option value="black">Black Theme</option>
<option value="darkgray">Darkgray Theme</option>
<option value="olive">Olive Theme</option>
<option value="purple">Purple Theme</option>
<option value="slate">Slate Theme</option>
<option value="slickness">Slickness Theme</option>
</select></div></div>

</html>

二.效果如下：

默认效果：

变换后的效果：

三.修改JS文件

在ExtJs源文件中找到examples.js文件中的40行：

将 Ext.getBody().addClass('x-'+theme);修改为：

Ext.util.CSS.swapStyleSheet("theme", "resource/ext2.1/resources/css/xtheme-" + theme + ".css");(自己项目的相对路径)；

四.下载皮肤

下载地址如下：

http://download.csdn.net/source/808008

皮肤中的images下的文件和CSS下的文件放在ExtJs文件下的resources目录下的images和CSS文件夹下面，例如：ext2.1/resources/css，ext2.1/resources/images

good_lgcheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs换肤

ExtJs的默认皮肤很好看，但是有时候根据需要修要变换一下，我做了个例子如下：一.页面中的代码如下： ExtJs演示换肤 type="text/javascript"> type="text/javascript"> type="text/javascript"> type="text/javascript"> type="text/javas
复制链接

扫一扫