使用Ext JS，不要使用页面做组件重用，尽量不要做页面跳转

2019独角兽企业重金招聘Python工程师标准>>>

使用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代码，那就要考虑为什么要用、是否有替代办法、怎么用这样问题。

转载于:https://my.oschina.net/muyexia/blog/170072

使用Ext JS，不要使用页面做组件重用，尽量不要做页面跳转相关推荐

Ext JS 3.2.1 字段组件父类 Ext.form.field.Base
划重点 Ext.form.field.Base 是组件元素类的父类,一般不直接使用 xtype是field 对应的类是 Ext.form.field.Base,而不是 Ext.form.field.F ...
Ext js 2.0 Overview(3) 组件生命周期
Component Life Cycle(组件生命周期) In general, the Component architecture in 2.0 will "just work.&quo ...
[Ext JS] 组件浮动一篇通（floating、alignTo）
文章目录标准的CSS浮动的概念无浮动效果有浮动的效果 Ext JS中的浮动浮动组件定义方式对其位置(position) 其他配置对其代码示例实战的问题: 标准的CSS浮动的概念浮动是C ...
5.10 Ext JS Grid中 WidgetColumn(组件列)的使用
本篇介绍组件列 (widgetcolumn ) 的基本使用, 以及对同一列, 不同的行显示不同的组件的功能实现进行演示. 为什么需要组件列 (widgetcolumn ) Ext JS 的Grid ...
【翻译】Ext JS——高效的编码风格指南
原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字 ...
Ext JS 容器Containers
Ext JS 容器可以容纳其他组件的组件叫容器(Containers).容器里面可以运用不同的布局方式来随意添加,插入或删除子组件.Ext.container.Container这个类是所有容器类的 ...
Ext JS 4预览：重构和规范渲染过程()
Over the past 4 years, the Ext JS codebase has evolved; new components have been added and coding st ...
【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码
原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码 ...
【翻译】对于Ext JS 5，你准备好了吗？
原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...

使用Ext JS，不要使用页面做组件重用，尽量不要做页面跳转

使用Ext JS，不要使用页面做组件重用，尽量不要做页面跳转

使用Ext JS，不要使用页面做组件重用，尽量不要做页面跳转相关推荐

最新文章

热门文章