<head runat="server">
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="http://www.cnblogs.com/ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" /> //这个很重要哦
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-lang-zh_CN.js"></script>
</head>
function makeCookie()
{
var themes =
[
['default', '默认'],
['gray', '灰色'],
['green', '绿色'],
['olive', '橄榄绿'],
['pink', '粉色'],
['purple', '紫色'],
['slate', '暗蓝色']
];
var cbThemes = new Ext.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=
"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
document.cookie="css="+css+";expires="+date.toGMTString();
}
});
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()
{
var cookiesArr=document.cookie.split(";");
var css;
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=
"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
};
}
Ext.onReady(makeCookie);
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="http://www.cnblogs.com/ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" /> //这个很重要哦
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-lang-zh_CN.js"></script>
</head>
function makeCookie()
{
var themes =
[
['default', '默认'],
['gray', '灰色'],
['green', '绿色'],
['olive', '橄榄绿'],
['pink', '粉色'],
['purple', '紫色'],
['slate', '暗蓝色']
];
var cbThemes = new Ext.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=
"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
document.cookie="css="+css+";expires="+date.toGMTString();
}
});
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()
{
var cookiesArr=document.cookie.split(";");
var css;
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=
"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
};
}
Ext.onReady(makeCookie);
分享到：
发表评论
-
EXT中Menu和ComboBox的BUG及解决方法
2011-04-26 19:58 1485最近一直在玩Ext,所以可 ... -
tabpanel的激活模式
2011-04-13 00:58 933listeners : { render : func ... -
ExtJs非Iframe框架加载页面实现
2011-04-09 00:32 3911在用Ext开发App应用时，一般的框架都是左边为菜单栏，中 ... -
EXTJS FORM textField emptyText 空值提交的解决办法
2011-04-02 01:10 4832Ext的textField有一个emptyText属性用起来很 ... -
项目开发中遇到的extjs常见问题
2011-03-31 22:16 1931事件触发机制 l ... -
回发或回调参数无效。在配置中使用 enableEventValidation=true或在页面中使用 启用了事件验证。
2011-03-28 23:35 1271回发或回调参数无效。在配置中使用 <pages enab ... -
extjs 如何自动缩放
2011-03-24 00:03 1583例如 可编辑的grid面板 var grid_mate ... -
Extjs 开发使用
2011-03-13 16:24 1957extjs基础 extjs基础 extjs ... -
Extjs ajax实现文本框(TextField)联想功能
2011-03-13 16:19 2347<%@ page language="ja ... -
Extjs EditorGrid 可编辑表格控件
2011-03-03 23:26 1885定义Ext.grid.ColumnModel时，列的信息项ed ... -
Extjs操作Dom
2011-02-25 23:12 12951.获取dom 通过id获取： var el = Ext. ... -
调试ExtJs利器 - Firebug(Firefox插件)
2011-02-25 00:22 1124Firebug是一个Firefox插件,集HTML查看和编辑、 ... -
调试ExtJs利器 - Full Source(IE插件)
2011-02-25 00:19 1009Full Source是一个Internet Explorer ... -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:17 842ExtJs的智能提示插件-Spket(Eclipse) -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:16 1521选择Help -> Software Updates - ... -
EXTJS accordion layout event
2011-02-24 20:14 1260EXTJS 的 accordion layout 布局在API ... -
extjs 相关PPT
2011-02-24 20:13 1030布局介绍和开发相关介绍 -
EXTJS学习系列提高篇:第七篇(转载)作者殷良胜,制作树形菜单之一
2011-02-23 00:01 1053制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返 ... -
去掉修改后extjs中grid 左上角的红三角
2011-02-17 13:54 1466gridpanel.on('afteredit',functi ... -
可输入可联想的下拉列表的实现——Ext ComboBox
2011-02-17 13:36 1890网上这样的控件不少，有很多实现方法，其中不少的很巧妙。 ...
相关推荐
本文将深入探讨如何在ExtJs应用中更换皮肤，以及利用提供的皮肤集来优化用户体验。 首先，皮肤（Skin）在ExtJs中扮演着决定应用外观的关键角色。它包括CSS样式、图像资源和可能的JavaScript代码，这些元素组合在...
extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤 1 直接添加其他css文件换肤 好多皮肤上网就可以收到的 如皮肤文件:xtheme olive zip下载 把皮肤文件解压 把css文件 如xtheme olive css 拷贝到...
在实际应用中，更换EXTJS皮肤通常涉及以下步骤： 1. 引入新的CSS文件：在HTML头部链接新的皮肤CSS，替换原有的皮肤引用。 2. 调整配置：可能需要在EXTJS应用配置中指定新的皮肤名称。 3. 适配图像资源：确保新皮肤的...
在实际应用中，更换ExtJS皮肤通常涉及到以下几个步骤： 1. **导入主题资源**：将下载的主题皮肤解压并引入到你的项目中。这些资源通常包括CSS文件、图片以及可能的JavaScript文件，它们定义了组件的样式和行为。 2...
下面将详细介绍EXTJS皮肤、更换皮肤的方法以及EXTJS主题包的相关知识。 1. EXTJS皮肤： EXTJS的皮肤是一种CSS样式集合，它定义了EXTJS组件的各种视觉元素，如颜色、边框、背景、字体等。EXTJS默认提供了一些预设的...
默认情况下，ExtJS使用的是“Blueprint”蓝皮肤，但通过更换皮肤，我们可以轻松地改变整个应用的视觉风格。 2. **皮肤的应用**：这三套皮肤（红、橙、红灰）可以方便地应用到你的ExtJS项目中。通常，你需要将下载的...
总的来说，“ExtJs灰色皮肤”是一个关于如何在ExtJs应用中更换和使用第三方皮肤的主题，涉及到CSS样式、资源管理和JavaScript配置等多个方面。正确地应用和定制皮肤，不仅可以提升Web应用的视觉效果，也能增强用户...
更换ExtJS的皮肤并不复杂，主要步骤包括： - 在HTML文件中引入新的皮肤CSS文件，替换原有的皮肤引用。 - 如果有自定义组件或者布局，可能需要调整对应的CSS选择器以适应新皮肤。 - 对于使用了非标准样式的组件，可能...
总的来说，这款多颜色风格的EXTJS插件皮肤资源包为EXTJS开发者提供了一种快速改变应用外观的方式，通过简单地更换皮肤，可以创建出与项目主题或品牌相符的用户界面，提高应用的专业性和吸引力。在实际开发中，灵活...
在ExtJS中，皮肤是改变应用程序视觉外观的重要手段，通过更换不同的皮肤，可以轻松调整UI风格以满足不同项目需求或用户偏好。本篇文章将详细探讨ExtJS的17种皮肤及其应用。 1. Classic Skin：这是ExtJS的默认皮肤，...
7. **兼容性问题**：在更换或定制皮肤时，需要注意与EXTJS版本的兼容性。不同的EXTJS版本可能支持不同的皮肤，或者对某些皮肤进行了更新，因此在升级EXTJS版本时，可能需要检查并更新皮肤。 8. **示例和文档**：...
本文将深入探讨如何在 EXTJS 4.2 中更换主题，包括视图层的样式编辑、控制层的事件处理以及如何从 Cookie 中读取和保存主题设置。 1. **视图层的样式编辑** 在 EXTJS 应用中，视图层是用户界面的呈现部分，它包含了...
extjs (ext) 变更主题。。13种皮肤主题 有教程，可移植到ext 2.0.2+任何版本，轻松实现换肤， 是从本人做的系统中抠下来的， 通过ie firfoe opera等测试可用，10分不为过~~好东西。留给有心人~~~
在实际应用中，更换皮肤不仅能够改变应用程序的整体色调和风格，还可以优化用户体验。例如，一款企业级应用可能需要更专业、简洁的皮肤，而一款面向年轻人的产品则可能需要更加活泼、色彩丰富的设计。通过AOM3.2提供...
通过更换皮肤，开发者可以快速改变整个应用程序的颜色方案、字体样式和布局细节，而无需修改核心代码。这对于创建符合企业品牌形象或满足用户个人喜好的应用程序非常有用。 在提供的压缩包文件中，我们可以看到一...
皮肤在ExtJS中是一个可更换的层，它可以覆盖默认的CSS样式，以实现特定的视觉效果。每个皮肤都包含一系列CSS文件，这些文件定义了不同组件的样式。通过切换皮肤，开发者可以快速改变整个应用程序的外观，而无需深入...
4. **更换皮肤**: EXTJS支持多皮肤，每个皮肤包含一系列CSS和图片资源。开发者可以为EXTJS应用指定不同的皮肤路径，实现皮肤更换。用户可以通过选择不同的皮肤选项，动态加载对应的CSS和图片资源。 5. **数据验证与...
通过更换皮肤，开发者可以在不修改代码的情况下，快速改变应用的整体视觉效果。 2. **皮肤分类**：这19种皮肤可能包括了多种风格，例如经典、现代、扁平化、暗色、亮色等。每种皮肤都有其独特的设计特点，可能适用...
在ExtJS中，皮肤是一种可更换的外观层，它定义了组件的颜色、字体、边框和布局等视觉属性。通过切换皮肤，开发者可以快速改变整个应用的视觉风格，而无需改动核心代码。这对于创建多品牌或者多主题的应用非常有用。...
更换ExtJs皮肤并不复杂，开发人员可以通过修改CSS样式或者配置文件来实现。每个皮肤都可能对控件的边框、颜色、字体等样式进行调整，以适应不同的设计美学。同时，选择合适的皮肤不仅能提升应用的美观度，还能提高...