很长一段时间内,写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
}
});
分享到:
相关推荐
8. **源代码结构**:EXTJS项目通常遵循一定的目录结构,包括源代码、样式、资源配置等。"extjspro"可能是项目源代码的根目录,包含了所有的组件、控制器、模型、视图、样式文件以及配置文件。 9. **响应式设计**:...
ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。6.6 版本是其历史上的一个重要版本,提供了许多增强的功能和改进。在这个"extjs6.6项目示例"中,我们可以深入理解ExtJS的用法,并学习如何构建...
EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...
在SSH_ExtJS项目中,Ext JS 4被用来创建前端界面,实现与后端的交互,例如通过AJAX进行数据的异步加载和提交,以及动态表格和图表的显示。 5. **项目结构**:一个典型的SSH_ExtJS项目通常会包含以下几个部分:源...
在本项目中,jar包可能包含了ExtJs库本身、依赖的第三方库以及运行该项目所需的其他组件。 项目源码通常包含以下几个部分: 1. **源代码文件**:这些文件(通常为.js结尾)包含了应用的逻辑,包括组件的定义、事件...
在EXTJS项目中,图标扮演着重要的角色,它们不仅可以提升用户界面的视觉吸引力,还能帮助用户快速识别和理解功能。 标题 "EXTJS 项目图标" 指的是EXTJS框架中专门用于项目的各种图标集合。这通常包括一系列预定义的...
ExtJS是一种基于JavaScript的开源富客户端框架,用于构建桌面级的Web应用程序。它提供了一整套组件化的用户界面元素和强大的数据绑定机制,使得开发者能够创建功能丰富的、交互性强的Web应用。本文档集合包括了...
**Spring+Hibernate+Extjs项目实例详解** 在Java企业级应用开发中,Spring、Hibernate和Extjs这三种技术的组合非常常见,形成了所谓的"SSH+Extjs4"框架。这个项目实例是基于这些技术实现的一个典型应用,展示了如何...
总的来说,这个压缩包提供了两种不同版本的ExtJS,代表了该框架在不同时期的发展水平,开发者可以根据项目需求选择合适的版本。通过学习和使用这两个版本,可以深入理解ExtJS的设计理念,提高JavaScript编程技能,并...
这个标题暗示了这是一个综合性的IT项目,主要涉及EXTJS框架、JavaScript(js)、Struts框架以及Ajax技术。EXTJS是一个用于构建用户界面的前端JavaScript库,它提供了丰富的组件和布局管理,常用于企业级Web应用开发...
在这个项目中,我们深入探讨EXTJS2.2的各种控件及其在实际开发中的应用,同时结合Java和JavaScript技术,实现了一个完整的公司级项目。以下是对该项目的详细解析: 1. **EXTJS2.2核心概念**:EXTJS2.2提供了丰富的...
extjs 项目样例 extjs 模板式代码 结构清晰
extJS4 MVC demo项目入门涉及的是前端开发领域的技术要点,主要介绍了extJS4框架中的MVC(Model-View-Controller)模式在实际开发项目中的应用方法,并着重讲述了如何实现前端资源的按需加载和动态加载。在了解这些...
整个项目是作者本人在实际工作中完成的项目部分功能,项目中设计的的技术: 1.ExtJs 常用控件使用 2.ExtJs 日期控件的重写与列表表头菜单控件的重写 3.ExtJs 结合Jquery修改样式和自定义样式 4.JavaScript 伪继承的...
这个"ExtJS4 MVC演示项目"是一个很好的学习资源,可以帮助开发者了解如何在实际应用中组织和管理代码。 **MVC模式** 1. **模型(Model)**:在ExtJS4中,模型用于存储和管理数据。它可以与后台服务器进行交互,...
在本项目中,"ExtJS桌面化(desktop)插件Demo项目"展示了如何利用ExtJS的桌面化功能创建一个类似于传统桌面应用的用户界面。这个Demo项目的核心在于对"desktop"插件的定制和应用,该插件提供了构建桌面样式的应用程序...
- **设置ExtJS**:安装完成后,通过Sencha Cmd可以轻松搭建一个新的ExtJS项目,并配置必要的文件结构和依赖关系。 - **应用体系结构**:了解ExtJS应用的基本结构是非常重要的,这有助于开发者更有效地组织代码和管理...
该项目是基于Extjs的个人理财管理系统,结合了S2SH(Struts2、Spring、Hibernate)框架和MySQL数据库,提供了一套完整的前后端解决方案。以下将详细解析该项目涉及的主要技术点和实现流程。 1. Extjs:Extjs是一个...
在“自己动手的EXTJS项目”中,"demon"通常指的是演示或示例,这表明这个项目包含了一些EXTJS的实际应用案例。开发者可以通过这些例子学习如何创建和配置EXTJS组件,以及如何组织和管理EXTJS应用的结构。 在压缩包...
Spring以其强大的企业级应用支持和模块化设计,成为Java开发的主流选择,而ExtJS则是一款功能丰富的JavaScript前端框架,擅长构建富交互的用户界面。当这两者结合,能够构建出高效、用户体验优良的人力资源管理系统...