很长一段时间内,写EXTJS代码都是按着下载下来的example来写的。到最后JS文件中充斥各种的var和各种的id。可怕的是,在项目做了一年多两年经历各种新增功能和BUG修改之后,有的js文件居然达到了5000多行。。。
偶然间在做一个新模块的时候用上了EXT Designer。发现导出的文件结构是:数据、UI、事件分离的三个文件。再配合storeId,ref等等属性之后,代码结构回非常清晰。
数据部分:一般在EXT中采用继承Store,并定义storeId方便引用。
TestJsonStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
TestJsonStore.superclass.constructor.call(this, Ext.apply({
storeId: 'TestJsonStore',
fields: [
{
name: 'field'
}
]
}, cfg));
}
});
UI部分:采用组件对象继承,xtype加快启动速度,ref属性用来方便引用到组件对象。
TestViewUi = Ext.extend(Ext.Viewport, {
layout: 'fit',
initComponent: function() {
Ext.applyIf(this, {
items: [
{
xtype: 'panel',
ref: 'testPanel',
height: 518,
width: 846,
layout: 'border',
items: [
]
}
]
});
TestViewUi.superclass.initComponent.call(this);
}
});
事件绑定部分:
TestView = Ext.extend(TestViewUi, {
initComponent: function() {
TestView.superclass.initComponent.call(this);
//TODO add event
}
});
分享到:
相关推荐
extjs 项目样例 extjs 模板式代码 结构清晰
整个项目是作者本人在实际工作中完成的项目部分功能,项目中设计的的技术: 1.ExtJs 常用控件使用 2.ExtJs 日期控件的重写与列表表头菜单控件的重写 3.ExtJs 结合Jquery修改样式和自定义样式 4.JavaScript 伪继承的...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3、...
[Apress] Ext JS 项目实战 (Gears 实现) (英文版) [Apress] Practical Ext JS Projects with Gears (E-Book) ☆ 出版信息:☆ [作者信息] Frank Zammetti [出版机构] Apress [出版日期] 2009年07月08日 [图书...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
这个项目实现了开发中常见的所有功能,物有所值看了就知道有多好。
数据库在项目里面的一个sql文件里面 1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王...
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
按照Ext开发团队的说法,ExtJS从应用角度上讲是一个用户界面库,而不是一个JavaScript ...但是对于解释执行的javascript来讲性能损耗问题却始终无法避免,因此个人不建议在要求响应速度的项目中使用ExtJS进行开发。
该项目是通过改装desktop插件包下的app.js和desktop.js完成的桌面化项目!采用的动态加载的方式、100%保证能在myeclipse环境下跑起来!
由于最近在研究Extjs4.1.1,没想到Extjs没有自带的iconCls所使用的图标样式css,就是用那个写那个的,纠结了半天,网上也找了好久,还是自己写了个批量处理程序,集合了1713个png小图标,都是Extjs原生态的,直接...
本工程涵盖了 Ext Js Modern 开发的各方面的基础知识, 比如开发环境搭建, 项目结构详解, 如何使用 api, 数据的增删查该基本示例, 以实际操作为主,非常好的入门项目 本书的各章节之间有一定的知识关联, 由浅至...
资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式...ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
ExtJS入门实例、包含各种详细代码,非常适合初学者学习
1采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3分别封装...
ExtJS3.3版本的API.此版本为Ext JS 3.3正式版API的翻译,大体完成了翻译的工作。我们把当前已完成汉化的公开。另有基于源码的翻译版本,请到项目站点下载;
extjs是一套完整的富客户端解决方案,也因为功能完整,造成ext-all.js有400多k,请注意,这还是压缩后的大小,而且因为是基于js和css的功能实现,对客户端机器性能也有一定的要求,比如不支持ie6以下的版本。...
ExtJs 的日期控件不带清空功能,项目有可能需要一个带清空功能的日期控件。
Ext在最开始的时候,是作为YUI的一个扩展存在的,所以那个时候它的名称是YUI.Ext,后来,Ext作为一个独立的项目进行开发,并不再依赖于YUI。适合企业级开发,能实现复杂的Layout布局,界面效果可以和backbase媲美,...