<html>
<head>
<title>定制个性化风格</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//定义使用改变个性化定制的控件
//该控制实际上为一个可供选择样式表值的下拉框
//当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
editable : false,
displayField : 'theme',
valueField : 'css',
typeAhead : true,
mode : 'local',
value : '默认',
readonly : true,
triggerAction : 'all',
selectOnFocus : true,
initComponent : function(){
var themes = [
['默认', 'ext-all.css'],
['黑色', 'xtheme-black.css'],
['巧克力色', 'xtheme-chocolate.css'],
['深灰色', 'xtheme-darkgray.css'],
['浅灰色', 'xtheme-gray.css'],
['绿色', 'xtheme-green.css'],
['橄榄色', 'xtheme-olive.css'],
['椒盐色', 'xtheme-peppermint.css'],
['粉色', 'xtheme-pink.css'],
['紫色', 'xtheme-purple.css'],
['暗蓝色', 'xtheme-slate.css'],
['靛青色', 'xtheme-indigo.css'],
['深夜', 'xtheme-midnight.css'],
['银白色', 'xtheme-silverCherry.css']
];
this.store = new Ext.data.SimpleStore({
fields : ['theme', 'css'],
data : themes
});
},
initEvents : function(){
this.on('collapse', function(){
//实际改变风格样式的处理
Ext.util.CSS.swapStyleSheet('theme', 'resources/css/ext/'+ this.getValue());
});
}
});
Ext.reg('xthemeChange', Ext.ux.ThemeChange);
Ext.onReady(function(){
//实例化一个可以改变风格样式的组件
var pan = new Ext.Panel({
title:'定制个性化风格',
items:new Ext.ux.ThemeChange()
,
height:200,
width:300
});
pan.render("hr_panel");
});
</script>
</head>
<body>
<table cellspacing="5" cellpadding="5"><tr><td><div id="hr_panel"></div></td></tr></table>
</body>
</html>
- 大小: 4.9 KB
分享到：
相关推荐
在EXTJS这个强大的JavaScript框架中，用户自定义换肤功能是一项非常吸引人的特性。EXTJS允许用户根据个人喜好调整界面的色彩和样式，为应用程序提供更个性化的用户体验。这一功能的实现基于EXTJS的皮肤机制，它使得...
EXTJS的换肤功能使得开发出符合用户审美的应用程序变得简单而高效。通过理解和利用这些预设主题，开发者可以快速调整应用的视觉风格，提升用户体验。同时，EXTJS还提供了强大的工具，如Sencha Themer，帮助开发者更...
在“改变字体大小”和“换肤”这两个主题上，ExtJS 提供了多种方法来实现这些需求。 ### 改变字体大小 在 ExtJS 应用程序中，改变全局字体大小通常涉及到调整 CSS 样式。你可以通过以下几种方式实现： 1. **...
通过更换皮肤，开发者可以在不修改代码的情况下，实现界面的快速换肤。 在“Ext界面风格大全”这个压缩包中，每个子文件可能代表一个独特的样式主题。例如，可能会有“经典风格”、“现代风格”、“暗色主题”等，...
5. **测试和调整**：更改皮肤后，运行应用并检查所有组件是否正常显示，没有样式错乱或者功能异常。如有必要，你可能需要对个别组件进行微调以适应新皮肤。 此外，参考链接中的博客文章...
16.6 为项目换肤 16.7 商品信息管理 16.7.1 商品信息的查询 16.7.2 商品信息的添加 16.7.3 商品信息的删除 16.7.4 商品信息的更新 第17章 ExtJS案例：企业任务管理系统 17.1 系统概述 17.2 需求分析 17.3 ...
1. **换肤机制**：ExtJS 3.3.1支持皮肤更换，允许用户根据需求调整应用程序的外观和风格。这通常是通过CSS样式和主题实现的，开发者可以轻松地切换或创建新的皮肤，以满足不同用户界面的需求。 2. **登录功能**：...
- EXT JS默认使用一个空白图片作为占位符，并通过CSS配置背景图片实现动态换肤。如果图片路径配置错误或网络请求失败，就会出现图片无法显示的情况。 - **解决方案**：参照`examples.js`中的配置，修改`Ext.BLANK_...
"ext3.3.1换肤实例"指的是EXTJS 3.3.1版本中的皮肤更换教程或资源包。 EXTJS 3.3.1是该框架的一个早期版本，它包含了丰富的组件和功能，但可能在视觉设计上不如后续版本现代。换肤是提升EXTJS应用视觉吸引力和用户...
### Extjs换肤 Extjs提供了强大的主题功能，允许开发者轻松更改应用程序的整体外观和感觉。这通常通过修改CSS样式表和图像资源来实现。可以通过以下步骤更换主题： 1. **选择主题**：首先确定要使用的主题。Extjs...
16.6 为项目换肤 16.7 商品信息管理 16.7.1 商品信息的查询 16.7.2 商品信息的添加 16.7.3 商品信息的删除 16.7.4 商品信息的更新 第17章 ExtJS案例：企业任务管理系统 17.1 系统概述 17.2 需求分析 17.3 ...
"Ext皮肤样式 实现完美换肤效果"的主题主要围绕如何利用ExtJS的皮肤系统，实现应用界面的多样化和个性化。 1. **皮肤机制**：ExtJS的皮肤系统允许开发者通过更换CSS样式文件和图像资源来改变组件的外观。每个皮肤...
在前端开发领域，特别是使用Ext JS框架时，换肤功能是非常常见且实用的一项需求。用户可以根据个人喜好选择不同的主题风格，这对于提升用户体验非常有帮助。本文将详细介绍如何在Ext JS项目中实现换肤功能，并确保...
在ExtJS的系统框架模板中，换肤功能的实现可能涉及到CSS样式表的切换，使得应用可以呈现出多种视觉效果，提升用户的使用体验。 标签系统则可能是模板中的一种多视图管理机制，用户可以在同一页面上打开多个窗口或...
java的权限管理系统，用spring+springmvc+ibatis+extJS 实现，还有换肤功能。 很好的学习资料，项目用maven管理，代码写的非常有学习价值。（数据库脚本在工程下的readme目录里面） 希望对大家有帮助。
3. **Sencha Ext JS**：Sencha是由ExtJS、jQTouch和Raphael合并的项目，主要用于构建富互联网应用。它提供了强大的图表和绘图能力，适合开发复杂、高性能的Web界面。 4. **Prototype**：Prototype.js由Sam ...