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:一个可选的回调函数当所有定义的类和类本身是完全做好了准备的时候被

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' }

});

scope: this,controller 2种定义查找范围，在控制器or 当前对象中，默然controller

controller：说明login 方法在ExtFrame.view.login.Login类的controller中查找 this：说明login 方法在ExtFrame.view.login.Login类中实现查找

18. 查找对象的方法种类

控制器中

1、 lookupReference【史超】

window 中

xtype: 'form',//父窗体

reference: 'form',定义 reference

控制器方法中：

var form = this.lookupReference('form'); if (form.isValid()) {}

2、 up or down itemId【郑冰 点击button】

window中：

xtype : 'form',

itemId : 'gridFrom',

控制器方法中：

saveEmployee : function(btn) { var win = btn.up(\); 标签类

var gridFrom = win.down('form'); 标签类

var currentId = win.down('#id').getValue(); 3、 getView【史超】

在控制器 方法 中：

this.getView().得到控制器所在的容器 （即父容器） down('#hrEmployeeGrid').store.load(); 4、 adfa 5、

itemId

19. 主界面+ 弹出窗口回调示意图

主控制器 方法： Ext,create('extFrame.view.udp.hr.employee.windows.EmployeeWin',{listeners: { 设置win的监听方法 scope: this, saveSuccess: 'saveSuccessed' } });'saveSuccessed'：function 回调函数弹出框 存在窗口级的监听方法 saveSuccess: 弹出框 控制器 方法：this.fireViewEvent('saveSuccess'); 触发窗口级的方法 2触发

主界面控制器：

// 保存成功后的回调

saveSuccessed: function() { },

//新增方法的弹出框

addRecord : function() { },

this.window = Ext

.create('extFrame.view.udp.hr.employee.windows.EmployeeWin',

{

listeners: {

// Ext.getCmp('extFrame_view_udp_hr_employee_Index') this.getView().down('#hrEmployeeGrid').store.load();

this.window.destroy(); // alert('lrllrl');

scope: this,

saveSuccess: 'saveSuccessed'//this-当前控制器范围内 }

}

);

this.window.setTitle('新增员工'); this.window.show();

的saveSuccessed

弹框控制器的，保存方法：

saveEmployee : function(btn) {

var curController = this; 在嵌套使用时，不能用this，定义临时变量

Ext.Ajax.request({ // 判断编码是否重复

success : function(response, opts) {

if (response.responseText == 'true') {

if (gridFrom.form.isValid()) {

gridFrom.form.doAction('submit', {

url : url, method : 'POST',

success : function(form, action) {

if (action.result.msg == \操作成功！\) {

url : udp.getRootPath()+'/employee/verifyCode', method : 'POST', params : { },

'code' : win.down('#code').value, 'id' : win.down('#id').value

curController.fireViewEvent('saveSuccess'); 触发弹框事件，回调主界面控制

器方法

20. 主题样式控制

资源都在根下，watch 或build后，会将应用需要的资源放到build对应的目录下

App.json更改后，需要

编译一下，生成

页面加载需要的样式文件

要点：在app watch 状态下，文件有变化，会动态编译，并通知浏览器更新页面 http://localhost:1841/?platformTags=fashion:true

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

http://www.cnblogs.com/sunjie9606/p/5108943.html

当然，现在也可以使用这种方式来修改modern工具包的主题。运行以下命令： 1.sencha app watch modern

在浏览器打开以下url将打开modern工具包：

1.http://localhost:1841/?toolkit=modern&platformTags=fashion:true 修改以下文件：

modern/sass/var/Application.scss 对应终端下 全局变量

21. 自定义主题

http://blog.csdn.net/tianxiaode/article/details/46927373 创建、编译、发布

1、 项目目录下，执行

sencha generate theme theme-spotifext

或

sencha generate theme --extend theme-neptune theme-neptune-red有继承关系 这将在工作区（workspace）的packages/local文件夹中创建一个主题包。它包含有一个sass/var文件夹，用来存放Sass样式表的变量文件，这些文件会先编译。它还包含一个sass/src文件夹，用来存放使用了混入（mixins）和CSS规则的Sass样式表文件，这些文件的编译时间在后，以便使用预定义的变量。主题包还包含了一个resources文件夹，它可以用来存放诸如图片或字体等文件。包里还包含一个package.json文件，它保存了主题包的元数据，例如，它将包的类型设置为“主题”。此外，还可以编写联系信息和描述。这里还有一件事需要去做，就是创建新的海卫一主题的变种，需要将extend行修改为： \

注：有继承关系

2、 切换主题 改app.json中

\

下一步要做的是使用sencha app build或sencha app build development来生产应用程序（只是生成主题而不是整个应用程序），然后继续。 3、 定义自己的样式

在

D:\\MyEclipseWebNew\\dl-udp1.0\\WebContent\\extFrame\\packages\\local\\theme-spotifext\\sass\\var定义 全局 组件变量（全局的）和 分组件变量（也是全局的），如下

在

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/6lj.html