`
ll_feng
  • 浏览: 389444 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs开发的一点套路总结

    博客分类:
  • ajax
阅读更多
春节后开始在新的项目里用extjs做前台开发的。到现在也三个月了。从完全不会,到有样学样。总算是基本掌握了。(虽然远谈不上精通,甚至熟练的程度都还不好说)现在总结一下开发的心得和一些套路。

extjs 讲究是的组件化开发。任何界面都是可以做成一个复用的组件。所以一个功能模块里基本都是一些各类组件的布局和组合,所有的业务功能都是这些组件之间的交互。

大体上常用的组件包括:tabpanel、panel、formpanel、grid、window等,分别用来实现以选项卡片的形式组织子模块,子模块的主界面、输入表单、查询列表、弹出窗口等ui元素。

基本的开发套路大致是:
一、从大到小,细分出各类组件,分别定义它们

1、确定该模块要划分为几个子模块,这决定需要几个选项标签,通过点击不同的标签切换到不同的子模块中。
适用组件类型:Ext.TabPanel

2、在确定好各个子模块后,为每个子模块定义一个主界面。用来布局各类功能点,包括:查询表单、查询结果的展示列表、相关功能点的按钮,比如增删改等等。
适用组件类型:Ext.Panel

3、分别定义各类界面元素,包括基本表单、查询表单、工具条、列表、窗口等等
适用组件类型:Ext.FormPanel,Ext.grid.toolbar, Ext.gridPanel

二、根据已有细分的组件,组成各类界面,并进行布局。
1、将formpanel组合到window中,可以形成新增或编辑窗口,可以用grid实例或oid作为参数
2、将查询表单、grid等组件组合到为子模块定制的panel中,形成进入该子模块后的主界面,一切操作重这里开始
3、将各子模块的主界面panel组合到模块的索引界面(即tabpanel)中。形成一个完整的功能模块。

以上套路是个人总结,不一定最合适,先到这里。

本想发一张uml图来说明这些关系的。没找到合适的工具。
分享到:
评论

相关推荐

    EXTJS开发总结.pdf

    EXTJS注重客户端的复杂应用开发,提供了丰富的组件和功能,使得开发者能够构建出功能强大的Web应用程序,类似于Isomorphic SmartClient或Backbase Enterprise Ajax等更重量级的框架。 在EXTJS开发中,与服务器端的...

    extjs开发文档学习资料

    extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料

    extjs开发包开发手册

    extjs2.0版本的开发包,包括开发手册,手册提供了extjs的大部门功能的使用,对初级开发者尤其有用

    ExtJS开发实战-详解

    ExtJS开发实战 ExtJS开发实战 上传只能选资源分,没办法,我想免费分享的

    Extjs开发工具(包含Dreamweaver、Eclipse、VS)

    Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)

    extjs 开发工具

    EXTJS是一种基于JavaScript的前端开发框架,用于构建富互联网应用程序(RIA)。它提供了一系列组件,如表格、面板、菜单、窗口等,使开发者能够创建功能丰富的、交互性强的Web界面。EXTJS的开发工具通常包括Sencha ...

    ExtJs 开发指南书籍 实例 可视化工具

    总结起来,这个资源包为ExtJs开发者提供了一个全面的学习环境,从理论知识到实践案例,再到辅助工具,帮助他们迅速掌握ExtJs并应用到实际项目中。无论是初学者还是有经验的开发者,都能从中受益匪浅。在学习过程中,...

    ExtJs开发实战

    ExtJs是一种基于JavaScript的前端开发框架,它的全称是Ext JavaScript framework,通常简称为ExtJs。ExtJs提供了一套丰富的用户界面组件,用于开发富互联网应用(RIA)或单页应用(SPA)。它允许开发者使用...

    windows下Extjs开发环境搭建说明

    ### Windows 下 Extjs 开发环境搭建说明 #### 一、概述 本文档旨在详细介绍如何在 Windows 操作系统环境下搭建 Extjs 的开发环境,并通过 Spket 实现代码智能提示功能,最后通过一个简单的 HelloWorld 示例来验证...

    extjs开发实例 extjs教程

    extjs开发实例 extjs教程 extjs开发实例 extjs教程

    extjs开发平台.rar

    本平台是经本人对javascript,extjs多年经验的积累和感悟的一个产物,主要架构是在jquery+extjs+c#+sql2000平台上搭建起来的。主要特色是web前端可以动态编辑表格数据,表格列有多种数据格式的控件,很方便进行各种...

    ExtJS开发插件及Ext包

    总结,ExtJS开发插件和管理Ext包是构建高效、可扩展的Web应用的关键技术。通过学习和熟练掌握这些技能,开发者能够利用ExtJS的强大功能构建出功能丰富、用户体验优秀的应用程序。同时,利用如Spket这样的专业IDE,...

    extjs开发必备利器

    ExtJS是一种基于JavaScript的富客户端应用开发框架,用于构建功能丰富的、交互性强的Web应用程序。在深入探讨ExtJS4开发的必备工具之前,先要理解这个框架的核心特性。ExtJS4提供了一套完整的组件模型,包括各种用户...

    ExtJS开发详细手册

    ExtJS开发详细手册ExtJS开发详细手册ExtJS开发详细手册ExtJS开发详细手册ExtJS开发详细手册ExtJS开发详细手册ExtJS开发详细手册

    extJs4.0 开发手册源码

    这个"EXTJS4.0开发手册源码"包含了EXTJS4.0框架的源代码,以及与其配套的开发指南,是深入理解EXTJS4.0内部机制和进行实际项目开发的重要参考资料。 EXTJS4.0的核心特性包括组件化开发、数据绑定、可扩展性、丰富的...

    最新extjs开发包

    在"最新extjs开发包"中,ext-2.2版本可能包含以下关键知识点: 1. **组件系统**:ExtJS的核心是其组件化的设计理念。它提供了一系列预定义的UI组件,如表格(Grid)、树形视图(Tree)、窗口(Window)、菜单(Menu...

    ExtJS与.NET结合开发实例

    ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例

    php+ExtJS 开发实战

    - **最佳实践**: 分享了一些在开发过程中积累的最佳实践,包括代码优化、性能提升等方面的经验总结。 #### 6. 学习资源与进阶指南 对于初学者来说,本书不仅提供了详细的理论介绍,还附带了丰富的实践指导。 - **...

    extjs开发需要的最少文件

    "extjs开发需要的最少文件"这一主题意味着我们要探讨在Java环境下使用ExtJS开发时所必需的基础资源。 首先,`ext-3.4.0`这个文件名表明我们讨论的是ExtJS框架的3.4.0版本。这个版本可能包含以下关键文件和目录: 1...

    Extjs4.0开发包

    这个“Extjs4.0开发包”包含了开发人员需要的所有资源,包括库文件、示例和API文档,以便于理解和使用ExtJS 4.0。 首先,让我们深入了解ExtJS的核心概念。ExtJS基于MVC(Model-View-Controller)架构模式,这是一种...

Global site tag (gtag.js) - Google Analytics