ExtJS6学习文档.docx

Ext JS 6学习文档第1章–ExtJS入门指南/archives/1211.html2015年12月3日?/archives/author/adminadmin％1 $ SExt JS 入门指南前言本来我是打算自己写一个系列的 ExtJS 6 学习笔记的，因为 ExtJS 6 目前的中文学习资料还很少。google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example]。这份资料在?/all/?search=ext%20js%206PACKT?上卖 35.99 刀的，当然了万能的 google 还是帮我下载到了 PDF 文档。大概看了一下，讲的很详细，例子也比较简单，容易理解，现我准备利用工作之余翻译这份文档，为自己学习加深理解，也希望能帮助更多的人学习。翻译时，我并不会 100% 按照原文照搬，而是可能加上我的理解和我自己的看法，所谓求其上而得其中，求其中而得其下，如果你看到这个文章，也不要以此作为标准，保持你的意见和思想。转载请注明出处：/archives/1211.html/archives/1211.html正文现在如果你打算学习 Ext JS 了，那你应该告别使用普通的 JavaScript 了。JavaScript 是一个伟大，卓越的语言，但是随着 web 应用越来越大，我们的代码也越来越难以维护，这是十分困难并耗费时间的。普通的 JavaScript 非常的灵活，这有很多优点，同时这样也会带来很多问题，随着你的应用越来越大，参与的人就越来越多，普通的 JavaScript 让 10 个人来写，就会有 10 种不同的风格，往往有些代码只有写代码的当事人知道为什么这么写，如果这个人不再负责这个功能，就会成为后来人的坑。所以在代码上的约束和规范是十分有必要的。这也是为什么我一直喜欢 ExtJS 的原因，ExtJS 写起来代码就像 Java 一样，非常严谨，非常面向对象。缺点就是在前端 JS 库中属于比较重量级，学习曲线相对陡峭。当涉及到 JavaScript 框架时，有客户端的 JavaScript 框架以及服务端的 JavaScript 框架。Ext JS 就是一个客户端的 JavaScript 框架。在本章基本上是讲述关于如何使用我们所需的工具来设置开发环境以及Ext JS 的基本介绍。在这一章，我们主要涉及以下几点：使用 Ext JS 的优点对 Ext JS 的介绍安装设置 Sencha Cmd 和 Ext JS使用 SenchaCmd 搭建 Ext JS 应用Ext JS 应用的体系结构探索 Sencha Cmd 命令如何调试 Ext JS 应用使用开发工具 IDE为什么使用 Ext JS?既然推荐你使用，自然要告诉你使用 Ext JS 都有哪些看得见的好处。现在让我们瞧一瞧，在你的应用里使用 Ext JS 相较普通 JavaScript 有哪些优点。跨浏览器支持只要你做 web 开发，你一定解决过浏览器兼容问题，这有多么消耗时间和影响工作进度你一定有体会，你可能会花上几小时甚至几天来解决跨浏览器 bug。你为什么不把这些时间用来关注你的业务功能呢？相反，如果使用?Ext JS 这个 JavaScript 框架，这种事情将由它去考虑，而你可以专注于业务功能。丰富的 UI 组件Ext JS 提供了大量丰富的 UI 控件，如 data grid ，tab panels,tree 控件，日期选择工具，图表 等等，Ext JS 作为一站式的前端框架，有很多优秀且实用的控件，尤其是表格对复杂数据展示的支持是其他的 JavaScript 框架不具备的， 这些都能大量节省你的开发时间。双向数据绑定双向数据绑定意味着当视图 view 的数据发生变化，你的模型 model 将自动更新。同样的，当你的应用更新这个模型 model，这个数据也将自动传递到 view。就拿编辑页面来举栗。 当这个页面(view)加载，这时已经渲染了来自模型(model) 的数据到 HTML，并且当用户在页面(view)上更新这个数据，这时候你需要更新你的模型(model)，但如果你使用 Ext JS 将不需要你自己去做这些编程。JavaScript 的架构模式(MVC/MVVM)随着越来越多的代码转移到客户端，维护客户端的 JavaScript 代码变的非常困难。通过在客户端使用?MVC?(Model View Controller)/MVVM?(Model View, View Model)? 使维护客户端的 JavaScript 变得更容易，并提高了生产效率。关于 MVC 和 MVVM 架构模式会在本章后面解释。简化复杂的操作想象一下使用纯 JavaScript 写一个 AJAX 调用，你需要