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