今天,有人请教我处理办法,问题是:

一个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,不要使用页面做组件重用,尽量不要做页面跳转的更多相关文章

  1. Ext JS 6学习文档-第5章-表格组件(grid)

    Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...

  2. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

  3. 【翻译】Ext JS——高效的编码风格指南

    原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字 ...

  4. 【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码

    原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码 ...

  5. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  6. 【翻译】对于Ext JS 5,你准备好了吗?

    原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...

  7. 整合 Ext JS 和第三方类库

    介绍 ExtJS提供了许多高度可定制化内置组件.如果它不在框架(framework)里面,你可以很容易的扩展这些类,或者浏览Sencha市场(Sencha Market) 寻找你可能需要的任何东西.那 ...

  8. 谈谈Ext JS的组件——布局的用法续二

    绝对布局(Ext.layout.container.Absolute) 绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样.通过设置控件的左上角坐标(x.y)和宽度来进行的,由于 ...

  9. 谈谈Ext JS的组件——布局的使用方法续二

    绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为 ...

随机推荐

  1. 解决HTML外部引用CSS文件不生效问题

    作为一个前端小白,鼓捣了几天前端..今天突然发现我深信不疑的东西,竟然出现了问题..就比如我在css目录下面写了一个css样式文档:style.css.这时里面只有一句话: body { backgr ...

  2. Java程序员的Golang入门指南(上)

    Java程序员的Golang入门指南 1.序言 Golang作为一门出身名门望族的编程语言新星,像豆瓣的Redis平台Codis.类Evernote的云笔记leanote等. 1.1 为什么要学习 如 ...

  3. eclipse安装和中文汉化,以及配置

    官网下载 eclipse http://www.eclipse.org/downloads/eclipse-packages/ ----选择 "Eclipse IDE for Java De ...

  4. Activtiy完全解析(二、layout的inflate过程)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/52457893 本文出自:[openXu的博客]   在上一篇文章<Activtiy完全 ...

  5. Thread Pools

    许多程序会动态创建数十个设置上百个线程.举个例子,一个web服务器可能在每一个新到来的请求时创建一个新线程,然后在请求完成后将其终止. 然而,创建一个新线程将会带来一定的耗费:它需要在内核中创建自身必 ...

  6. SQLite 分离数据库(http://www.w3cschool.cc/sqlite/sqlite-detach-database.html)

    SQLite 分离数据库 SQLite的 DETACH DTABASE 语句是用来把命名数据库从一个数据库连接分离和游离出来,连接是之前使用 ATTACH 语句附加的.如果同一个数据库文件已经被附加上 ...

  7. Struts1应用、实现简单计算器、使用DispatchAction、显示友好的报错信息、使用动态Form简化开发

    实现简单的支持加.减.乘.除的计算器 复制一份Struts1Demo修改:Struts1Calc 方案1: Struts1Calc 创建ActionForm: CalcForm extends Act ...

  8. ubuntu mysql表名大小写区分

    近期开发线上操作系统用的ubuntu,数据库用的mysql,突然发现mysql表名大写报错,找一下原因,看了下mysql的配置,果真可以设置,窃喜. 先找到你MySQL的my.cnf配置文件并修改,当 ...

  9. iPhone全部设备分辨率速查

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交 ...

  10. Unity插件 - MeshEditor(六) 变形动画状态机

    变形动画状态机--MeshAnimator,是针对MeshAnimation的状态管理器,有大量类似Unity animator的功能,但MeshAnimator操作会更加简便,更加直观,居家旅(zh ...