extjs6学习

网址

http://docs.sencha.com/extjs/5.0/core_concepts/theming.html

http://static.uji.es/js/extjs/ext-5.0.0/packages/ext-theme-neptune/sass/src/button/Button.scss

http://dev.sencha.com/ext/5.0.1/examples/index.html http://docs.sencha.com/extjs/6.0/

http://examples.sencha.com/extjs/6.0.1/examples/

$panel-border-color:red; $panel-body-border-color:blue;

//$panel-border-color: $panel-body-border-color;

bodyBorder:true, border: true,

1. 安装试用

（1） 控件Demo地址：

http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#all

（2） 工具准备：

地址：https://10.20.10.231:8443/svn/东泠电子/02开发类/00统一开发平台/DL-UDP1.0/04UI文档

（3） 安装开发工具sencha gpl

（4） 创建项目目录，例如d:\\MyExt，使用命令行，生成ext项目

sencha help 帮助查看

命令如下： sencha -sdk /这里是你的sdk路径/ generate app MyApp 你的App的路径。如 sencha -sdk D:\\ext-6.0.0-gpl\\ext-6.0.0 generate app MyExt d:\\MyExt

生成web项目和手机项目的例子：

sencha generate app -ext -classic MyAppName ./MyAppPath sencha generate app -ext -modern MyAppName ./MyAppPath

（5） Ext项目拷入web工程中，启动，抓包，看启动步骤

注意class.json 中class、path节，path中有类名和路径的对应关系

（6） 看api文档，了解类的属性和方法、事件等

（7） 工程build后，在运行，浏览器抓包，看加载顺序

切换到项目目录，执行sencha app build

执行：http://localhost:8080/ext/MyExt/build/production/MyExt/index.html Build后，在此目录下

抓包：看到classic.json中不在有path和class的节点，所有类都在app.js中，同时在classic.json可以看到cache已经开启，按F5刷新，可以看到app.js不在请求（302-缓存存在）

（8） 开发模式下，添加新的js文件时，需要执行watch操作，来更改class.json的内容

转换到目录执行sencha app watch

（9） Afaf （10） Adfa （11）

2. 控制器单例多例问题

同一个控制器放到

grid列表（button 使用新增修改） 明细（保存，返回）

2个地方，控制器定义个变量，在修改中赋值，在保存中拿不到 说明：控制器是多例的

隔几层，取对方，不好取【回调实现】

3. store proxy 使用，store和后台数据的同步（保持同步）【见udp1.0中字典表的维护】

http://bbs.csdn.net/topics/390754226?page=1

我在store中设置的proxy属性,想使用EXT的CRUD,结果发现如下问题,麻烦高手解决下: 下面是store的代码: JavaScript code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Ext.define('ATM.store.UserInfo',{ extend:'Ext.data.Store', model:'ATM.model.UserInfo', autoLoad:true, pageSize : 10, api:{ read:'finduser.action', update :'update-user-json.do', destory:'deleteuser.action', create:'create.action' }, proxy:{ type:'ajax', url:'default.action', api:{ read:'finduser.action', update :'update-user-json.do', destory:'deleteuser.action', create:'finduser.action' }, reader:{ type:'json', root:'root', successProperty:'success', totalProperty:'totalProperty' } } }); 下面是删除record的代码: JavaScript code ? 1 2 3 4 5 6 Ext.Msg.confirm('删除确认','确定要删除?', function(btn) { if (btn == 'yes') { view.getStore().remove(record); view.getStore().sync(); } });

可是它触发的是store里面配置的默认url,而不是对应的destory,有木有人能给看一下问题出

在哪里呀?万分感谢!

4. 跟我一起学

http://blog.csdn.net/jfok/article/details/35550713

5. 命名规范

http://blog.csdn.net/sushengmiyan/article/details/38479079

类名应该打包到像使用对象属性(.)一样的适当的名称空间中。类名至少应该有一个独特的顶级名称空间中紧随其后。例如:

[javascript] view plaincopy

1. MyCompany.data.CoolProxy 2. MyCompany.Application

顶级名称空间和实际的类名应该驼峰模式其它一切应该都小写，例如:

[javascript] view plaincopy

1. MyCompany.form.action.AutoLoad

源文件命名约定

类的名称直接映射到它们存储的文件路径。因此,必须只有一个类文件。例如: Ext.util.Observable 是在如下目录存储的 path/to/src/Ext/util/Observable.js Ext.form.action.Submit 是在如下目录存储的 path/to/src/Ext/form/action/Submit.js MyCompany.chart.axis.Numeric

是

在

如

下

目

录

存

储

的 path/to/src/MyCompany/chart/axis/Numeric.js

path/to/src是应用程序的类路径。所有类应该在这种共同的根下，,应该给予适当的名称空间以便可以最好的开发、维护和部署。 方法和变量的命名规则

以类似的方式,类名、方法和变量名只能包含字母数字字符。数字被允许但是不被鼓励,除非

他们属于一个技术术语。不要使用下划线、连字符或其他任何非字母数字字符。方法和变量名应该遵循驼峰原则这也适用于缩略词。 例如：

可接受的方法名称: encodeUsingMd5() getHtml()而不是 getHTML()

getJsonResponse()而不是getJsonResponse() parseXmlContent()而不是parseXMLContent() 可接受的变量名: var isGoodName var base64Encoder var xmlReader var httpServer 属性的命名规则

类属性名遵循完全相同的约定时除了静态常量。 静态类常量属性应该全部大写。例如: Ext.MessageBox.YES = \Ext.MessageBox.NO = \MyCompany.alien.Math.PI = \ 类定义

Ext JS 4消除这些缺点为类创建一个方法你需要记住:Ext.define。它的基本语法如下:

[javascript] view plaincopy

1. Ext.define(className, members, onClassCreated);

className:类名

members:一个对象,代表一个类成员的键-值对的集合

onClassCreated:一个可选的回调函数当所有定义的类和类本身是完全做好了准备的时候被

调用。由于类创建的异步本性,这个回调在很多情况下是非常有用的。这些将在第四部分进一步讨论 例如：

[javascript] view plaincopy

1. Ext.define('My.sample.Person', { 2. name: 'Unknown', 3.

4. constructor: function(name) { 5. if (name) {

6. this.name = name; 7. } 8. }, 9.

10. eat: function(foodType) {

11. alert(this.name + \ + foodType); 12. } 13. }); 14.

15. var aaron = Ext.create('My.sample.Person', 'Aaron'); 16.

17. aaron.eat(\); // alert(\

注意:我们创建了一个新的My.sample的实例。使用Ext.create()方法。我们可以使用新的关键字(new My.sample.Person())。不过建议得到的习惯总是使用Ext.create因为它允许您利用动态加载。动态加载的更多信息参见入门指南

6. xtype and alias

http://www.cnblogs.com/loveis715/p/4423502.html

7. 今天在帮一个兄弟检查一段自定义控件的代码时觉得他对xtype以及alias的使用和

ExtJS各示例代码的使用有较多的不一致，而我自己也不是很清楚使用这两个属性时的最佳方法。因此在回家后整理出了这样一篇文档。一方面用来标准化我们自己的代码，另一方面也共享给大家，毕竟对这两个属性进行详细讨论的资料几乎没有。

8. 9. xtype

10. 首先来看看xtype的定义。在ExtJS的官方文档中是这样对它进行定义的： 11. This property provides a shorter alternative to creating objects than

using a full class name. Using xtype is the most common way to define component instances, especially in a container.

12. 也就是说，在定义一个类的时候，如果我们指定了它的xtype，那么我们就可以通

过这个xtype，而不是类型的全名来创建这些类型。例如对于下面的布局声明：

13. 1 items: [

14. 2 Ext.create('Ext.form.field.Text', { 15. 3 fieldLabel: 'Foo' 16. 4 }), 17. 5 ?? 18. 6 ]

19. 其与以下使用xtype声明的布局是等同的：

20.

21. 1 items: [ 22. 2 {

23. 3 xtype: 'textfield', 24. 4 fieldLabel: 'Foo' 25. 5 }, 26. 6 ??.. 27. 7 ] 28.

29. 可以看到，在使用xtype的时候，我们可以不再标明类型的全名，进而减少了在

使用它们时出错的可能，降低了维护的成本。 30. 而在定义一个类型的时候，我们可以指定该类型所具有的xtype：

31. 1 Ext.define('MyApp.PressMeButton', { 32. 2 extend: 'Ext.button.Button', 33. 3 xtype: 'pressmebutton', 34. 4 text: 'Press Me' 35. 5 });

36. 37. alias

38. 而在文档中，alias的定义则如下所示：

39. List of short aliases for class names. An alias consists of a namespace

and a name concatenated by a period as .

40. namespace - The namespace describes what kind of alias this is and must

be all lowercase.

41. name - The name of the alias which allows the lazy-instantiation via the

alias. The name shouldn't contain any periods.

42. 在一个类型定义中，我们可以指定它所使用的alias：

43. 1 Ext.define('MyApp.CoolPanel', { 44. 2 extend: 'Ext.panel.Panel', 45. 3 alias: ['widget.coolpanel'], 46. 4 title: 'Yeah!' 47. 5 });

48. 而对这个类型的使用也非常简单，在xtype中标示该alias即可：

49. 1 Ext.widget('panel', { 50. 2 items: [

51. 3 {xtype: 'coolpanel', html: 'Foo'}, 52. 4 {xtype: 'coolpanel', html: 'Bar'} 53. 5 ] 54. 6 });

55.

56. xtype vs. alias

57. 可以看到，xtype和alias有点像，是吧？那么它们两个有什么区别，什么时候用

xtype，什么时候用alias呢？ 58. 上面的示例也展示了一个比较有趣的事情，那就是通过alias所定义的别名

“coolpanel”可以直接通过xtype引用。也就是说，xtype和alias实际上可以在一定程度上通用的。 59. 最终我在ClassManager类的源码中找到了一系列证据。简单地说，xtype是存

在于widget命名空间下的alias。如果为一个新的UI组成声明了它的xtype，那么就等于在widget命名空间下为其声明了一个alias。例如我们也可以通过下面的代码定义刚刚看到的CoolPanel类：

60. 1 Ext.define('MyApp.CoolPanel', { 61. 2 extend: 'Ext.panel.Panel', 62. 3 xtype: ‘coolpanel’, 63. 4 title: 'Yeah!' 64. 5 });

65. 总的来说，为一个UI组成指定一个xtype实际上就等于为其指定一个在widget

命名空间下的alias。但是alias所能覆盖的类型范围要比xtype广得多。一个alias不仅仅可以用来声明命名空间为widget的各个类型，更可以在plugin，proxy，layout等众多命名空间下声明类型。 66. 而在Sencha论坛中，一位开发人员也解释了为什么在alias已经存在的情况下定

义一个额外的xtype。这仅仅是为了提高性能。在ExtJS的内部实现中常常需要将alias中的命名空间剥离才能得到所需要创建的widget类型。在xtype的帮助下，ExtJS可以摆脱掉耗时的字符串分析工作，从而提高性能。 67. 因此在定义一个自定义widget的时候，我们应当使用xtype，而在定义其它组成

时，我们就不得不使用alias了。由于所有的widget使用同一个命名空间，因此我们需要在为自定义widget指定xtype时标示一个前缀，例如在项目egoods中定义的一个自定义button的xtype就应为egoods-button。 总结：

1、 所有类都可以使用别名（格式：命名空间.xxx.bb.xxx）(命名空间加

类名)或命名空间.自定义

命名空间：store.widget. controller. View.

2、 所有组件，可以使用xtype，controller和store、 view不能使用

xtype

Xtype也是放到对应命名空间之下的

3、 在使用xtype时，如果对应类没有定义xtype，会在对应命名空间下

查找

68. References

69. 本文章中所有示例均来自于ExtJS官方文档：

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/

5. Alias 规定

extjs5以后，增加了MVVM设计思想，就是在extjs4的mvc的基础上多了一个viewmodel 你提到的alias就是这个类的别名，别名的命名要遵守mvvm命名要求，要不然在使用的时候就会报错。

即view的别名用widget.XX controller的别名用'controller.XX viewmodel 的别名用viewmodel.XX

其中widget别名主要用于xtype:XX controller和viewmdel就是在view做绑定的，不能写错的

希望对你有帮助，有问题可以再问我。

6. up and down

up( String selector, [Number/Mixed maxDepth] ) : Ext.core.Element

selector:必选，字符串形式，表示要匹配的组件。 Maxdepth:可选，表示要匹配的最大深度。

up方法的API解释为：通过简单的选择，获得相匹配的dom，使用up方法总是返回一个Ext.core.Element，也就是ext的组件。

down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.core.Element selector:必选，字符串形式，表示要匹配的组件，

returnDom：可选，布尔类型，如果为true，则返回DOM节点，而不是Ext.core.Element。值默认为false。

down方法的API解释，通过选择器,来获得任何深度的子组件，在down方法中，不应该包含组件的id，而应该是组件的xtype。

7. button function

中view = this.getview()

8. initComponent 和 constructor的区别

Ext.define 实现扩展

在Extjs 中使用Ext.define来实现扩展， initComponent 和 constructor的使用方式类似

[html] view plaincopy

1. Ext.define('Ext.oscar999.button.MyButton', { 2. extend : 'Ext.button.Button',

3. initComponent : function() { 4. //do something 5. },

6. constructor : function() { 7. //do something 8. } 9. });

一般状况上，加上 xtype 的定义，类似：

（在旧的Extjs 版本中使用 Ext.extend 实现扩展）

那么这两种用法究竟该如何使用？两者的使用又有什么差别呢？

initComponent 和 constructor区别于联系

1. initComponent这个方法是在Ext.Component的构造函数(constructor)中调用的【注意

2者的调用关系】，只有直接或间接继承自 Ext.Component的

类才会在constructor里调用initComponent方法

看一下 Ext.AbstractComponent的源码文件 src/AbstractComponent.js 在 constructor方法中调用了initComponent 2.

1）自定义类中的 initComponent 函数中必须调用 callParent();否则调用者无法初始化这个对象

2）针对button 这样的扩展组件来说，自定义类中的 constructor ，需要调用callParent( arguments);否则调用者无法初始化这个对象

[html] view plaincopy

1. this.callParent(arguments);

这里的arguments 是需要的。

(在Extjs 4 之前的版本中，可能会看到比较多的XXX.superclass.constructor.call 写法)

sencha 的官网中有一篇针对这两个区别的讨论：

http://www.sencha.com/forum/showthread.php?47210-constructor-Vs-initComponent

不过语法是基于Extjs 3 来讨论的，笔者觉得作用不是很大。

就笔者实际的开发经验来看，基本上使用initComponent 就可以达到开发的要求了。

9. 构造函数

http://blog.csdn.net/kaoa000/article/details/39337803

定义类的方法：define

对于Ext4.X版本来说，采用了新定义类的define方法，而不是延续旧版本的extend方法，那么对于定义一个新的类。我们来了解下define的使用。 Ext.define(classname,properties,callback); - classname:要定义的新类的类名 - properties：新类的配置对象

- callback：回调函数，当类创建完后执行该函数

对于Ext定义一个新的类，那么我们可以想象到，既然是利用Ext.define去创建类，那么创建的类一定是Ext所特有的类，不同于传统的javascript创建一个类，也就是说我们要对于define方法的第二个参数properties配置项进行配置，需要找到Ext对于类支持的API并进行配置

[javascript] view plaincopy

1. Ext.onReady(function(){ 2.

3. //在Ext中如何定义一个类：Ext.define(className,properties,callback) 4. Ext.define('Person',{

5. //这里是是对于这个类的一些配置信息（看Ext.Class的configs） 6. //config属性就是配置当前类的属性内容，并且会加上get和set方法 7. config:{ 8. name:'z3', 9. age:20 10. },

11. //自己定义的方法 12. say:function(){

13. alert('我是方法。。。'); 14. },

15. //给当前定义的类加一个构造器,目的就是为了初始化信息 16. constructor:function(config){ 17. var me = this;

18. for(var attr in config){ //循环显示传递进来的参数 19. alert(attr + ':' + config[attr]); 20. }

21. me.initConfig(config); //真正的初始化传递进来参数 22. } 23. }); 24.

25. var p = new Person(); 26. // alert(p.name); 27. // alert(p.age); 28. alert(p.getName()); 29. p.say(); 30.

31. var p1 = new Person({name:'li4',age:25}); 32. // alert(p.name); 33. // alert(p.age); 34. alert(p1.getName()); 35. p1.say(); 36.

37. //Ext.create 实例化一个对象

38. var p2 = Ext.create('Person',{ 39. name:'wang5', 40. age:40 41. });

42. alert(p2.getName()); 43. p2.say(); 44. });

对于configs： - extend：用于继承 - alias:类的别名

- alternateClassName：备用名，与alias差不多

- requires：需要使用到的类名数组，在动态加载时会根据该属性去下载类，注意需要的类是在当前类之前被加载

- uses：与requires类似但是被引用的类可以在该类之后才加载

- constructor：构造器属性，一般用来初始化类的配置和调用其父类的方法 - mixins：混入属性，多继承

- config：定义类的配置项，会把config里的每个属性加上get和set方法 - statics：定义静态方法，属性不能被子类继承

- inheritableStatics：与statics类似，但是其属性可被子类继承 - singleton：设置该类为单件模式

http://www.cnblogs.com/youring2/archive/2013/08/22/3274135.html

使用Ext.define自定义类

10. 操作dom对象的方法

11. 获取父子容器元素方法

http://chun521521.iteye.com/blog/2067165

纯自用方便

1.当前对象的父对象(上级对象) this.ownerCt:

2.当前对象的下一个相邻的对象 this.nextSibling();

3.当前对象的上一个相邻的对象 this.previousSibling(); 4.当前容器中的第一个子对象 this.get(0); this.items.first();

5.当前容器的最后一个子对象 this.items.last();

6.查找当前对象的所有上级匹配的容器 this.findParentByType(String xtype) 7.查找当前对象的所有下级匹配的组件 this.findByType(String xtype)

12. 启动顺序

在classic.json文件中，已经把app.js、bootstrap.css等文件加进去了，所以，在index.html文件中，只需要加载bootstrap.js文件就行了。

Index.htmlBootstrap.jsClassic.json or modern.json(所有类定义含app.js）执行app.js(创建窗口)->application.js

13. Js加载

、

菜单js可以不加载，在点击的时候，会自动去加载（含require项）

14. Sencha cmd

使用help命令 sencha help

[plain] view plaincopy

1. Sencha Cmd v5.0.n.n 2. ... 3. 4. Options

5. * --cwd, -cw - Sets the directory from which commands should execute 6. * --debug, -d - Sets log level to higher verbosity 7. * --info, -i - Sets log level to default

8. * --nologo, -n - Suppress the initial Sencha Cmd version display 9. * --plain, -pl - enables plain logging output (no highlighting) 10. * --quiet, -q - Sets log level to warnings and errors only

11. * --sdk-path, -s - The location of the SDK to use for non-app commands

12. * --time, -ti - Display the execution time after executing all commands 13.

14. Categories

15. * app - Perform various application build processes

16. * compass - Wraps execution of compass for sass compilation

17. * compile - Compile sources to produce concatenated output and metadata 18. * cordova - Manage Cmd/Cordova integration 19. * fs - Utility commands to work with files

20. * generate - Generates models, controllers, etc. or an entire application

21. * manifest - Extract class metadata

22. * package - Manages local and remote packages 23. * phonegap - Manage Cmd/PhoneGap integration

24. * repository - Manage local repository and remote repository connections 25. * theme - Commands for low-level operations on themes 26. * web - Manages a simple HTTP file server 27.

28. Commands

29. * ant - Invoke Ant with helpful properties back to Sencha Cmd 30. * build - Builds a project from a legacy JSB3 file.

31. * config - Load a properties file or sets a configuration property 32. * help - Displays help for commands

33. * js - Executes arbitrary JavaScript file(s) 34. * upgrade - Upgrades Sencha Cmd

35. * which - Displays the path to the current version of Sencha Cmd

命令如下： sencha -sdk /这里是你的sdk路径/ generate app MyApp 你的App的路径。如 sencha -sdk D:\\ext-6.0.0-gpl\\ext-6.0.0 generate app MyExt d:\\MyExt

sencha generate app -ext -classic MyAppName ./MyAppPath sencha generate app -ext -modern MyAppName ./MyAppPath

启动server： 默认当前目录

sencha web start（stop） sencha web -port 8000 stop 指定目录：

sencha web start -map foo=/path/to/foo,bar=/another/path

http://localhost:8000/foo

当类文件移动目录时，需要，sencha app watch 执行一次，这样，类名和路径的关系会写入到classic.json文件中，根据类名，找路径，得到加载的位置，如下：

{\classic/src/view/main2/List.js\33},{\c/view/main/Main.js\33],\

Build后，原html执行：

在production下的html执行如下：

生成一个app.js，很大，包含所有js，不需要从服务端再拿

由于js全部拿到客户端了，Classic.json中不再有类和路径的定义，小了不少 需要的资源，可能需要手动移动位置 总结：

4、 开发阶段：

Classic.json有类和路径、引用的定义，可以需要时，再加载 提示找不到js时，需要watch一下，重新生成该文件 5、 Build后

所有js放入到app.js文件，classic.json小很到

15. 组件使用

弹出window 基于 Ext.window.Window

Items 内容基于panel

16. Extjs 5 客户端，如何请求找到类的

App.json工程配置文件

Bootstrap.json (抓包，看)

问史超：js如何写到这个json文件中的？

验证是基于类名的路径，进行解析的，如下，移动：

在抓包中，bootstrap.json :

仍然是来的类，

但程序可以运行，说明类ExtFrame.view.login2.Login，解析为 App\\view\\login2\\login.js 默认的解析方法

17. 史超登录方法（注意 listern中scope 【函数查找范围的使用】）

loginController.js1 调用 login方法 this.login({ data: form.getValues(), scope: this, success: 'onLoginSuccess', 触发，返回 root.js failure: 'onLoginFailure' })本地的方法：'onLoginSuccess'onLoginFailure'Login: 成功 调onLoginSuccessLogin.js1 调用 按钮事件Root.js1 new login 窗体，监听login调用，调用 onlogin方法 this.showUI(userId, userName, userOrgs);注：注意scope 使用，定义函数的范围注：返回 root.js的目的，是关闭在root中打开的窗体Scope参数说明：

this.login = new ExtFrame.view.login.Login({

session: session, listeners: {

scope: this, login: 'onLogin' }

在

D:\\MyEclipseWebNew\\ext\\WebContent\\MyExt\\packages\\local\\theme-spotifext\\sass\\src下定义 一些源文件，如下

注：编译时，先编译变量，在编译源文件，目的是为了使用变量，目录下内容可参照 已有主题目录

4、 界面组件的定义，可以放到

文件中，例如：

@include extjs-tab-panel-ui( $ui: 'navigation', 界面组件的名称和extjs-tab-panel-ui 组合使用 $ui-tab-background-color: transparent, 。。。。。。。。。 $ui-strip-height: 0 );

在代码中，可以使用自己定义的 样式，例如：

region: 'center', // 中间面版

xtype: 'tabpanel',

ui: 'navigation', tab_pannel 使用这个名字的样式

5、 自己定义的样式 变量，可以放在 全局的compent.scss 文件中，在自己组件样式定义

中使用这些变量 6、 总结：

（1） 定义主题、sass\\var下目录文件 和 sass\\src下目录文件，需要的全局变量

可以 定义到compent.scss文件中

（2） 在main.scss文件中定义自己的样式（使用主题中的变量，不同主题变量名字

相同，保证主题正常切换）

（3） 在代码中，定义 UI：myUIname，使用自己的样式

子定义样式例子：

7、

8、 主题调试程序须知

（1） 只要json、scss文件有变动，都需要在dos目录下中sencha app watch ，2

重新生成*.css文件

（2） 在eclipse中，需要刷新目录，重新启动server（启动时，sencha app watch

一定要退出，否则，多程序打开一个文件，会启动不成功）

22. 更换主题

http://extjs.eu/lightweight-theming/

http://blog.csdn.net/sushengmiyan/article/details/42016107

(1)项目目录下，执行

sencha generate theme theme-mygreen

sencha generate theme theme-myblue 生成样式 更改继承关系：

package.json文件，创建新的海卫一主题的变种，需要将extend行修改为： \

http://localhost:1841/?platformTags=fashion:true

使用fashion参数，可以动态调试样式，随时看到结果（原理：websocket链接服务器，当服务器端有变化时，会通知客户端刷新）

（2）改变app.json中的主题，执行sencha app watch ，编译生成*.css，注意目录

D:\\MyEclipseWebNew\\ext\\WebContent\\MyExt\\build\\development\\MyExt\\classic\\resources

（3） Copy classic 目录到theme_gray, theme_spotifext等对应目录，不同主题，对应

不同目录，如下

（4） 在程序中，添加切换代码，如下 在Ext工程中

xtype: 'combo', 下拉框

width: '100', labelWidth: '40', fieldLabel: 'Theme', displayField: 'name', valueField: 'value', //labelStyle: 'cursor:move;', //margin: '5 5 5 5',

queryMode: 'local',

store: Ext.create('Ext.data.Store', { fields: ['value', 'name'], data : [

{ value: 'theme_spotifext', name: 'my主题' }, { value: 'theme_gray', name: 'gray主题' } ] }), //value: theme,

listeners: {

select: function(combo) { var theme = combo.getValue(); // varhref =

'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css'; var href = 'build/development/MyExt/'+theme+'/resources/MyExt-all.css'; 不同主题对应不同的目录

var link = Ext.fly('theme'); 拿到一个dom id

if(!link) { 不存在，在首页上创建一个，

link = Ext.getHead().appendChild({ tag:'link', id:'theme', dom id rel:'stylesheet', href:'' }); };

link.set({href:Ext.String.format(href, theme)}); 为dom id 指

定 link 地址，自动刷新 }

}

老外的代码：

onThemeChange:function(combo) {

var theme = combo.getValue() ,href =

'../packages/ext-theme-neptune-{0}/build/resources/ext-theme-neptune-{0}-all.css' {} 参数

,link = Ext.fly('theme') ;

if(!link) {

link = Ext.getHead().appendChild({ tag:'link' ,id:'theme'

,rel:'stylesheet' ,href:'' }); }

if('default' !== theme) {

link.set({href:Ext.String.format(href, theme)}); {}用 theme变量替换

}

else {

link.set({href:''});如果是默认的话，设置为空 }

} // onThemeChange

（5） 图示如下

23. dafsaddsfa

24. dfa

本文来源：https://www.bwwdw.com/article/9bt5.html