`
lingyibin
  • 浏览: 196329 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Extjs复习笔记(十一)--换肤

阅读更多

换肤功能


首先写一个文件(这个文件的源码看不懂也没关系,拿着用就是了),文件名:themeChange.js

内容如下:

 

Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox, {
	editable : false,
	displayField : 'theme',
	valueField : 'css',
	typeAhead : true,
	mode : 'local',
	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']
		];
		this.store = new Ext.data.SimpleStore( {
			fields : ['theme', 'css'],
			data : themes
		});
		this.value = '默认';
	},
	initEvents : function() {
		this.on('collapse', function() {
			Ext.util.CSS.swapStyleSheet('theme', '../resources/css/'+ this.getValue());
		});
	}
});
Ext.reg('themeChange', Ext.ux.ThemeChange);

 把下面包内.css的皮肤文件放到ext/resources/css目录下。当然放到其它目录下也行,不过得修改上面代码中的地址。

 

之后再把前一篇日志内的代码 中Viewport里面items的第二个{}代码修改如下:

 

{
                region:'west',		
				title : '功能菜单',
				layout: 'accordion',
                width:198,
				collapsible: true,
				autoScroll:true,
				split:true,
				items : [
					new Ext.Panel({
						title: '更换皮肤:',
						tbar : [
							'皮肤选择:',
							{
								xtype : 'themeChange',
								width : 120,
								listWidth : 120
							},
							'->'
						],
						html: '',
						cls:'empty'
					})
				]
            }
  • css.rar (29.5 KB)
  • 下载次数: 37
  • 大小: 75.4 KB
分享到:
评论

相关推荐

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    Extjs复习笔记(十八)-- TreePanel

    在本篇ExtJS复习笔记中,我们聚焦于TreePanel组件,它是ExtJS库中的一个核心组件,用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型,还支持交互操作,如节点的选择、展开与折叠等。在...

    extjs2----关于extjs 的使用,操作

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容...

    EXTJS开发包ext-3.2.0

    EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0

    Extjs复习笔记(二十)-- tree和grid结合

    在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...

    Extjs复习笔记(十七)-- 给grid里面的内容分组

    本篇复习笔记将聚焦于EXTJS Grid中的一个重要特性——内容分组,帮助你深入理解如何实现这一功能。 内容分组在EXTJS Grid中允许你将数据按照特定字段进行分类,这样可以更清晰地组织和展示数据。这在处理大量数据时...

    Extjs复习笔记(十五)-- JsonReader

    在“Extjs复习笔记(十五)-- JsonReader”这篇博文中,博主探讨了ExtJS中的JsonReader,这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包(Ext.data)的一部分,用于从服务器获取JSON格式的数据,...

    extJs例子-------

    ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...

    ssh+extjs开发crud--经典

    ### SSH+ExtJS开发CRUD功能详解:从理论到实践 #### 核心知识点概览 在《ssh+extjs开发crud--经典》这一主题下,我们深入探讨如何结合SSH框架(即Struts2、Spring、Hibernate)与ExtJS前端框架来实现CRUD操作(即...

    extjs oracle分页---Json转换

    标题“ExtJS Oracle分页---Json转换”涉及的是在Web应用程序开发中,使用ExtJS框架与Oracle数据库进行分页数据交互,并通过Json格式进行数据转换的技术。以下是对这个主题的详细解释: ExtJS是一个强大的JavaScript...

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    ExtJS 4.1.0 是一款流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据绑定机制、MVC架构以及强大的布局管理。社区版是开源的,允许开发者免费使用和定制,适合开发复杂的企业级应用...

Global site tag (gtag.js) - Google Analytics