什么是ExtJS哲学? 单页面应用程序?

我需要使用ExtJs编写我的下一个项目。 这是一个很好的JavaScript库,但我不完全理解它背后的想法。 以文档页面为例。

我应该用extjs写我的web应用程序吗? 一个永远不会刷新的页面,一切都由AJAX完成?

你如何debugging这样的应用程序,如果得到正确的地方可能需要大量的“点击”和使用它。 您无法修复该错误并在浏览器中进行刷新以查看结果。

有什么build议么?

我是否应该用ExtJS编写我的Web应用程序? 一个永远不会刷新的页面,一切都由AJAX完成?

您不必编写像ExtJS文档那样的应用程序。 如果您查看ExtJS的示例页面,您会看到许多HTML与单个页面上的Ext窗口小部件混合在一起。 在我的工作中,我使用了两个不同的应用程序,我使用的是ExtJS,一个是遗留的站点,我使用小部件来整理页面,另一个是完全成熟的Web应用程序,只是使用ExtJS作为前端。 我肯定比较喜欢后者,但学习曲线非常陡峭。

你如何debugging这样的应用程序,如果得到正确的地方可能需要大量的“点击”和使用它。

这里的关键是模块化您的应用程序。 单独构build每个组件并在真空中进行testing。 不要被误认为这应该是包含整个应用程序的一个巨大的JavaScript文件。 在大多数Web应用程序中,源代码都有几十个或更多的JavaScript文件,这些文件仅用于部署目的。

必须有testing和debugging是萤火虫 。 它允许您检查Ajax请求,debuggingJavaScript以及更多。

这里有一系列关于使用ExtJS编写大型应用程序的文章,这是一个相当不错的阅读,有很多很好的信息。

在ExtJS 4 Part1 Part2 Part3中构build一个示例应用程序

对于ExtJS 3.3及以下的Part1 Part2 Part3

我认为可以用任何一种方式来使用ExtJS,如果你刚刚开始,那么做一些你最喜欢的事情会更有意义,并且一路上添加一些ExtJS的“香料”。 也就是说,一旦你开始使用它来创build单页面应用程序,并且你的后端只输出JSON,那么你可能永远不会回头看你以前做过networking应用程序的方式。

你可以做现代的基于AJAX的应用程序,并使用URL散列来深层链接你的应用程序 。

Gmail就是一个很好的例子。 为了到达我的收件箱,我导航到:

https://mail.google.com/mail/?shva=1#inbox

要去我的联系人pipe理器,我浏览到:

https://mail.google.com/mail/?shva=1#contacts

这两个“页面”都在同一页面上,导航在我使用应用程序时实际上会将我redirect到不同的页面。 散列是所有的变化。

当页面加载时,你需要做的是检查window.location.hash并使用它来更新你的应用程序的状态。

不是单页,而是less量分页的应用程序

我参与了一个复杂的项目,build立在:

  • Asp.net 3.5
  • WCFnetworking服务
  • ExtJS 2.1
  • .netTiers(与CodeSmith)为DAL + DAO
  • SQL 2005 + OLAP多维数据集(有些不要提醒我这个噩梦解决方法必须在应用程序内完成,因为我们使用了一些第三方控件,部分支持UpdatePanels,这件事情本身打破了非常基本的处理我们的应用)
  • 定制的外观和感觉,现有的ExtJS – 这是ExtJS成本最难的部分,所以我build议你坚持提供的主题之一

我们没有做实际的单页面应用程序,但页面数量大大减less了。 应用程序中的每个工作领域通常是一个单独的页面。 所有接口处理都在客户端使用ExtJS完成,或者在向ExtJS客户端接口提供数据的WCF服务中的服务器端完成。

它运作良好。

我今天可能会改变一件事:我会从Asp.net + WCF迁移到Asp.net MVC 。 这是更多的构build这种情况。

关于debugging,我们使用了Firebug(Firefox插件),就像任何其他开发者一样。

但是使用ExtJS库取得了巨大的成功。 这使得创build类似桌面的数据沉重的Web应用程序变得很容易。 这是任何专业Intranet Web应用程序开发的一个很好的统一库。 有了jQuery和它的插件,你总是会被社区提供的那些插件的不同怪癖所独占。 ExtJS在这方面非常统一,提供了一个非常好的外观和感觉。

我认为这个想法在某种程度上与Web环境中的应用程序的桌面感觉相匹配,这意味着几乎所有的应用程序都可以在Ajax中使用。

至于debugging,萤火虫是你的朋友。 但是debugging一个桌面应用程序应该没有什么不同,在这个应用程序中也可能会涉及很多点击来获取错误。

您可以使用onHashChange监听器,加上我所谓的“封闭”格式来加载extjs屏幕。 我写了一篇关于如何构build单个页面extjs应用程序的文章 。

在testingExtJs方面…

这是一个testingExtJs组件的工具(这个工具是用ExtJs制作的!)

Siestatesting工具来testingExtJs

我还没有亲自使用过这个,但是我看了一下演示video,看起来很漂亮!

也许社区成员可能知道任何专门testingExtJs的替代工具?

PS:我与Sencha(ExtJs)或者Bryntum(Siesta)没有任何关系。 我在客户级别使用ExtJs。

你不必这样写。 有时它看起来不错,更快(不刷新新页面)。

你可以做自动logging的JavaScript,做一些自动化testing工具或自己写这些东西你的东西。 通常debugging整个页面不是一个好主意。 当它以模块化的方式构build时,它更容易。 隔离问题,这很容易。

另外考虑使用萤火虫debugging它可能会帮助你。

build议:我要看你在做什么。 如果你正在制作高度互动的网页,那么这样做可能是一个好主意。 速度更快,Ajax请求可以降低服务器的负载。 另一方面,这样做需要更多的时间。

我正在使用ASP.Net MVC与ExtJS。 这不是一个页面的应用程序,但它是接近的,感觉就像一个页面的应用程序。

而且我们还有一个有数百页的网页表单应用程序,我们在这个应用程序上应用了一些ExtJS UI小部件,使用了大量的IFrames,它仍然工作,看起来不错。 但我不喜欢使用网页表单模型,并尽量避免它。

恕我直言;

  1. asp.net mvc平台会比webforms平台更好。
  2. 控制器非常适合动作处理。
  3. 部分是有用的生成html内容(脚手架在这里帮助很多)

ExtJS的

  • 导航,
  • 清单,
  • 检索,
  • 编辑内容,
  • 通知,
  • 几乎所有的东西…

总的来说ExtJS是一个很棒的框架。

在我们的应用程序中,我们编写了一个自定义页面类来处理“页面”之间的切换。 一个页面由一个ExtJS容器组成,它返回你的类,并且通过在URL的末尾设置#hash值来保存历史logging。

使用这种方法,您可以连同所有资产一起加载您的ExtJS库,这样您就可以获得巨大的业绩回报,同时保持应用的stream畅性。