使用Ext JS,不要使用页面做组件重用,尽量不要做页面跳转
今天,有人请教我处理办法,问题是:
一个Grid,选择某条记录后,单击编辑后,弹出编辑窗口(带编辑表单),编辑完成后单击保存按钮保存表单,并关闭窗口,刷新Grid。
这,本来是很简单的,但囿于开发人员对Ext JS的理解不到位,搞得相当的复杂了。
主要复杂的地方在以下几点:
- 为了实现编辑表单的可重用,把表单做成了页面,然后在Window中套IFRAME打开页面。
- 表单的提交不是用Ajax提交,而是使用习惯的页面跳转方式提交,于是,一切都复杂起来了。
要这样实现,也不是不可以,在最后的提交页面,调用parent对象操作父页面的对象关闭窗口并刷新Grid。不过,这样实在太复杂了。
这里存在的问题是对Ext JS的开发理解不到位,还是根据老的开发方式去来写Ext JS的应用程序,因而本来简单的东西一下子就复杂化了,这也是很多初学者经常犯的错误。
要很好的使用Ext JS进行开发,要牢记以下几点:
- Ext JS的数据交互,基本上是以Ajax为工具,以JSON或XML格式数据进行交互,这个过程,不需要任何的页面跳转来实行,数据的处理都以一种很标准化的数据格式进行处理,如错误处理、成功保存等等信息,都可通过JSON或XML格式的数据来告诉客户端,让客户端去进行处理。
- 使用Ext JS(尤其是4)编写自己的扩展,实现组件的重用,非常的方便,不需要把重用部分做成一个页面那么麻烦。
- 使用Ext JS 4可以很容易实现单页面的应用程序,也就是只需要一个页面就行了,客户端与服务器端的数据交互都是遵循第一点来处理的。当然,担心性能问题的,也会以IFRAME形式来实现多页面的应用程序,但是,必须明白的是,这也是以单页面为基础的,意思就是,一个IFRAME页面的流程,基本就是一个单页面的应用程序的流程,不需要类似习惯的Web开发方式那样进行多个页面的控制。理解这点很重要,不然,还真不如不用Ext JS,直接使用习惯的Web开发方式来开发。
- Ext JS在客户端也是数据与UI分离的,千万别在UI中找数据。
- 使用Ext JS,是基于组件形式来组织UI的,而不是以HTML代码来组织UI的,尽管最终生成的都是HTML代码。一般情况下,是不需要直接编写HTML代码就能实现应用程序的,如果确实需要使用使用HTML代码,那就要考虑为什么要用、是否有替代办法、怎么用这样问题。
以上纯个人观点,可能还有没考虑到的地方,忘大家斧正。
使用Ext JS,不要使用页面做组件重用,尽量不要做页面跳转的更多相关文章
- Ext JS 6学习文档-第5章-表格组件(grid)
Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
- 【翻译】Ext JS——高效的编码风格指南
原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字 ...
- 【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码
原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码 ...
- 【翻译】在Ext JS和Sencha Touch中创建自定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- 【翻译】对于Ext JS 5,你准备好了吗?
原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...
- 整合 Ext JS 和第三方类库
介绍 ExtJS提供了许多高度可定制化内置组件.如果它不在框架(framework)里面,你可以很容易的扩展这些类,或者浏览Sencha市场(Sencha Market) 寻找你可能需要的任何东西.那 ...
- 谈谈Ext JS的组件——布局的用法续二
绝对布局(Ext.layout.container.Absolute) 绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样.通过设置控件的左上角坐标(x.y)和宽度来进行的,由于 ...
- 谈谈Ext JS的组件——布局的使用方法续二
绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为 ...
随机推荐
- 一起聊聊什么是P问题、NP问题、NPC问题
概念 P问题:如果一个问题可以找到一个能在多项式的时间里解决它的算法,那么这个问题就属于P问题.通常NOI和NOIP不属于P类问题,我们常见到的一些信息奥赛的题目都是P问题. NP问题:可以在多项式的 ...
- Android源码分析—深入认识AsyncTask内部机制
本文转载http://blog.csdn.net/singwhatiwanna/article/details/17596225该博主博文,谢谢该博主提供的好文章! 前言 什么是AsyncTask,相 ...
- 剑指Offer——网易笔试之不要二——欧式距离的典型应用
剑指Offer--网易笔试之不要二--欧式距离的典型应用 前言 欧几里得度量(euclidean metric)(也称欧氏距离)是一个通常采用的距离定义,指在m维空间中两个点之间的真实距离,或者向量的 ...
- 02基于注解开发SpringMVC项目(jar包,异步,request,参数传递,多选的接收,Model传参,map传参,model传参,ajax,重定向,时间日期转换)
1 所需jar包 项目结构如下: 2 web.xml配置文件的内容如下: <?xmlversion="1.0"encoding="UTF-8"?&g ...
- 【一天一道LeetCode】#374. Guess Number Higher or Lower
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 We are ...
- Android ClassLoader详解
我们知道不管是插件化还是组件化,都是基于系统的ClassLoader来设计的.只不过Android平台上虚拟机运行的是Dex字节码,一种对class文件优化的产物,传统Class文件是一个Java源码 ...
- 每个程序员都应该用MBP
换笔记本的想法很久了,前段时间换工作就想看换工作之后是什么情况吧.可能工作配的笔记本就是MBP.后来发现是想多了,新工作的笔记本是Thinkpad X240, 配置完全够用了,8G内存+128G的FL ...
- Android开发模式之MVC,MVP和MVVM的简单介绍与区别
相信大家对MVC,MVP和MVVM都不陌生,作为三个最耳熟能详的Android框架,它们的应用可以是非常广泛的,但是对于一些新手来说,可能对于区分它们三个都有困难,更别说在实际的项目中应用了,有些时候 ...
- Android性能优化之常见的内存泄漏
前言 对于内存泄漏,我想大家在开发中肯定都遇到过,只不过内存泄漏对我们来说并不是可见的,因为它是在堆中活动,而要想检测程序中是否有内存泄漏的产生,通常我们可以借助LeakCanary.MAT等工具来检 ...
- Synchronize 和 Lock 的区别与用法
一.synchronized和lock的用法区别 (1)synchronized(隐式锁):在需要同步的对象中加入此控制,synchronized可以加在方法上,也可以加在特定代码块中,括号中表示需要 ...