黄灯桥的专栏

这里写自定义目录标题为什么主要功能演示地址为什么快速模板的想法由来已久，也一直在变化，但就是没时间去完善和更新，这次总算是有时间来实现了，而且Sencha官方也正打算我让做一个示例，也是就行动起来了。主要功能有太多的想法，但这需要时间来实现，目前主要简单实现了以下几个功能：Json格式的本地化；改进Ext.ajax；OAuth2认证与登录；枚举的使用；路由的使用；Crud集成；以后会慢慢添加更多的功能，敬请期待。演示地址https://www.extjs.tech...

在前文，本地化是通过一堆判断语句去切换本地化文本，而且还要记录原文本，比较麻烦，执行起来逻辑比较多，也不畅顺。更重要的是，之前已经实现的表单字段标签的自动化和列标题的自动化很难去实现了，又要加一堆判断逻辑，这样的代码，有很重的异味，必须做改进。要解决判断过多的问题，比较简单，根据对应的类重写相应的类就行了。余下就是要解决localized方法，这方法需要记录属性的原始值，然后做转换，再调用set方法输出，整个流程太麻烦了。现在的焦点就是哪个原始值，如果直接用另外一个属性如langText来记录按钮的原始值

在《基于Modern工具包的本地化方式》一文中实现的本地化方式忽略了在切换语言后，原始的文本值已经改变，要想再切换回去，由于找不到对应的本地化值，最终切换不了，因而，必须在第一次切换的时候记录下原始文本值，这样才能保证每次切换的时候都能找到对应值。在前文中还有一个bug是当本地化先于组件完成初始化时，就不会监听localizedready事件。本文还添加了语言切换按钮，用于切换语言。以下是修正后的代码：Localized.js：Ext.define('CommonShared.service.Lo

上文完虽已完成了组件的本地化，但Ext JS中还有验证类和插件类这些类需要实现本地化。通过研究发现这些类都有一个父类，这就好办了，和组件类一样，在父类中添加监听就可以实现全部子类的本地化了。下面是插件类的重写代码：Ext.define('CommonOverrides.shared.plugin.Abstract',{ override: 'Ext.plugin.Abstract', constructor: function(config) { const me =

新项目需要从服务器下载本地化资源，如果继续使用快速模板的本地化策略就很尴尬了，绝不可能等待本地化资源全部下载后再去加载项目，得另想办法。在研究过了《[Internationalization & Localization with Sencha Ext JS](https://www.sencha.com/blog/internationalization-localization-with-sencha-ext-js/)》一文后，终于有思路了。文章的思路是通过重写`Ext.Component`来

使用Ext JS 7 Modern包，在提交日期值的时候，会发现提交的是带时区的日期值，譬如，选择的是日期值是2019-12-17，那么在提交的时候会根据浏览器的时区（中国区为+8），提交值会修正为2019-12-16 16:00:00（减8个小时），如果在服务器端，不调整时区，直接转换为日期，就会出现错误。为了修正这个错误，需要在定义日期的时候，添加以下配置项，让表单对日期值进行序列化： ...

原文：《Dynamic Package Loading》Sencha Cmd一直以来都支持包的概念，大型应用程序可通过包来封装类、样式和资源，然后通过Sencha Cmd将这些包打包到应用程序中。现在，又有了权限的方式（动态）来使用这些包。如果现在已经使用了包，那会在应用程序的app.json文件中看到类似于以下的“requires”数组：requires: [ 'dashboa...

随着Ext JS 7的发布， 快速模版也需要进行升级了。由于社区版只提供现代工具包，因而在新的快速模版，只能使用现代工具包来开发桌面应用程序。不过，不用太过于担心，因为现在的现代工具包已经很强大了，用来开发桌面应用程序是一点问题没有的。如果还执着于支持IE浏览器，那还是使用6.2版的快速模版比较合适。在目前Angluar、Vue和React快一统江湖的年代，再考虑兼容IE这样的事情，笔者觉得有点脱...

现在来完成文章管理的编辑窗口。在开始之前，先去官方论坛一个名称为Ext.ux.form.TinyMCETextArea的扩展，地址是http://www.sencha.com/forum/showthread.php?198699。该扩展的作用是将TinyMCE封装为一个表单字段。TinyMCE则是一个所见即所得的HTML编辑器，相当好用的一个东西。下载解压缩后，把TinyMCETextArea.

在完成文章管理功能前，先来完成文章列表工作。文章列表，都是在文章分类选择后执行的，因而要从文章类别的选择入手，文章管理的控制器Content.js中，文章类别的选择方法已经有了，是onTreeSelect方法，现在要做的就是完成文章列表的功能。在这里有2种方式可供选择，一种是使用Store的filter方法来实现筛选，一种是利用Proxy的extraParams配置项来完成。第一种方法的好处是可以

现在来完成分类的编辑操作。原来是想用模型加载数据的，但现在想想，用表单加载会方便些。切换到文章管理的控制器，添加onCategoryEdit方法，利用表单来加载数据，代码如下：onCategoryEdit:function () {    var me = this,        tree =me.view.down("treepanel"),        rs =tree.getSelect

要想让Combobox列表显示像树，只要按Ext JS树的形式组织显示文本就行了。因而先用Firebug分析一下Ext JS树的格式就可以了。在浏览器打开Ext JS示例中的Check Tree示例，依次展开Grocery List和Ebergy Foods节点，会看到图53的效果。图53 Check Tree示例的效果因为Combobox中返回的是一个完整的树，其节点全部是展开的，因而可以知道，

上一篇已经完成了分类树的显示，现在开始逐步完成分类的添加、删除和编辑操作。首先要做的是在树面板上添加一个工具栏，放置添加、删除和编辑按钮。切换到文章管理视图的脚本文件view.js，在树的定义内，添加以下代码添加工具栏和按钮：tbar: [    { iconCls: "folder-add", scope:me, tooltip: '增加文章类别',id:"CategoryButtonAdd"}

文章管理的视图与文件管理区别不大，都是分左右两部分。文章管理的左边是树状的分类列表，右边以Grid形式显示的文章列表。基本上重复劳动比较多，使用Sencha Architect这个可视化工具来做这方面的设计，是不错的选择，如果公司收益好，强烈建议使用，一个开发包的价格是399美金，大约2800人民币，还是很划得来的，起码比请多个程序员划得来。废话又有点多了，转回正题，在Scripts\app\vi

有了编写用户管理的控制器的经验，写这个问题应该不大。不过，文章管理的控制器还是要考虑一下怎么写这个问题，因为在视图里涉及分类的操作和文章的操作。这确实是一个比较费神的事。在这里，问题的焦点就是需要不需要拆分的问题了。根据松耦合的原则，必然是拆分的，但是拆得太小，太凌乱，写代码是比较痛苦的，尤其是象Javascript这样灵活但结构不太严谨的语言。笔者开发大型系统经验不多，因而一向比较随心所欲，方便

文章管理涉及T_Category 、T_Content 、T_Tag 和T_TagInContent 这4个表，在客户端，由于标签的两个表的显示会合并到文章内容里，因而文章管理至少需要2个模型和2个Store，一个是分类的，一个是Content的。现在的问题是，文章管理界面左边的分类是以树形式显示的，是否需要用到一个完整的模型？完整的模型肯定是需要的，因为分类也要编辑、修改和新增。但树是否直接使用

现在，图片管理就剩上传文件功能没有完成了。这需要用到swfupload，在《CMS之图片管理（1）》中有它的下载地址和加入项目的说明。使用swfupload最麻烦的地方是要有一个HTML元素让它嵌入加载Flash的HTML代码，而且这个HTML元素必须覆盖住Flash来实现功能，这个有点类似做单按钮的上传按钮。现在，先为swfupload生成一个HTML元素来实现它的功能。实现方法是在显示图片的视

今天来完成排序问题，这个在书中示例不少，不过，在这里啰嗦一下也是有好处的。要实现远程排序，首先要清楚的是排序信息是如何提交到服务器的，而这个，利用Firebug相当简单。在VS，切换到PicManager.js文件，找到filestore的定义，先将renmoteSort修改为true。然后添加sorters配置项，代码如下：sorters: [    { property:"modify" ,

现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称，因而使用Cellediting插件就可完成工作。根据书11.3.2节的示例，要完成这个不难，首先在目录树的定义中加入以下语句隐藏列标题：hideHeaders:true, 接着添加plugins配置项来配置CellEditing插件。因为根目录是不运行编辑的，因而需要监听beforeedit事件，如果当前选择节点是根目录就返回false，不

先来完成树目录的显示。开始前，现在解决方案中创建一个Upload目录用来存放上传的图片，为了便于测试，在Upload目录下随便添加两个目录，这里添加1和2。好，现在创建一个名为FolderController的控制器，添加必要的引用后，先添加一个字符串常量，用来表示根目录：stringroot = "../upload"; 在这里使用虚拟目录是因为可以结合提交数据直接转换为实际目录。这里要注意，当

图片管理要在两个地方使用：一是标签页内的图片管理，一是文章内容编辑时嵌套到插入图片的窗口内。因而，将图片管理做成一个扩展比较方便。当然，做成MVC模式也行，不争论，不讨论。要记住，扩展要写在Scripts\ExtJS\Ux目录下，因为在路径的设置中，扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。图片管理的主要界面分两部分，左边以树的形式列出文件目录，要实现目录的

等下要去坐车，今天就不继续唠叨开发过程了，来谈一下普遍比较关心的后台语言问题。学习Ext JS，笔者一直强调学习的中心思路是“界面与数据是分离”。只要好好掌握这个思路，深入了解Ext JS的运作过程，就不会为后台语言使用什么而困扰了。可以说，只要思路明确，要将一个Ext JS项目迁移到不同的后台语言平台，那是轻而易举的事。下面就以本示例做一个简单的讲述。如果你放下语言的包袱，坚持把本示例的文章看完

现在来完成删除功能。目前的Grid，一次只能选择一行，也就是说，一次只能删除一行，不太方便，因而要设置成使用复选框选择，并允许多选的。在用户视图脚本文件中，添加以下配置项实现这个：    selType: "checkboxmodel",    selModel:{ checkOnly: false, mode: "MULTI" }, 打开页面浏览，会看到如图29所示的效果，已经可以在最左边通过复

昨天还有一个错误，CheckColumn的样式和图片没复制过来，造成最后一列的Checkbox显示不正确。在Ext JS包的examples\ux\css目录下打开CheckHeader.css文件，将文件里的全部样式定义复制到app.css中。然后修改将带背景图片的路径修改为“../images”。最后将image目录下的check.gif和uncheck.gif文件复制到scripts\app

现在，创建视图，在Scripts\app\view目录下先创建目录Users，然后在该目录下创建View.js。要使用Grid显示用户信息，因而要从Grid面板派生出视图。定义的时候要注意视图的类名。还有就是一定要定义别名，因为在控制器中是使用widget方法创建的视图实例。如果不想定义别名，那就要修改创建实例的方式。具体的基本定义代码如下：Ext.define('SimpleCMS.view.U

应用程序的基本框架已经搭建好了，现在要做的是完成一个个的功能模块。先从简单做起，完成用户管理模块，该模块主要功能是使用一个Grid显示用户信息，并使用RowEditing进行用户的编辑、添加操作。Grid的分页则在Grid顶部使用分页工具条实现，在工具条上还要添加3个按钮用来添加用户、删除用户和为用户重置密码。在Grid底部还将添加一个文字说明，说明内容为：双击用户可进入编辑状态，用户密码默认为“

现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的（deferredRender值默认为true），但是它会预加载所有的类，因而当类文件很多的时候，加载时间就是一大问题了。这个，也可通过SDK打包的方式解决，不过在设计阶段还是要考虑的。另一种好的解决方法是，只使用标签页的标签，而不使用其主体加载内容，另外使用一个容器，内部使用CardLayout作为布局，类似书中最后一章的示例实现面

忙活了那么久，终于进入正题，Ext JS MVC开发。开始前，先说说4.1.1的一点点变化。在4.1的时候，要先创建一个扩展于Ext.app.Application的类，然后用create创建它的实例来开始应用程序的。而在4.1.1，则可直接调用application方法开始执行应用程序，简化了。调用application方法，其参数是一个配置对象，主要配置项有以下两个：l name：用来定义应用

登录后，因为只是刷新首页，并没有跳转页面，因而要调整一下首页显示，以便登录后显示系统界面。要区分登录前和登录后，判断Request的IsAuthenticated方法就可以。因为要通过服务器段代码执行不同的脚本，因而要将Loder这些公共代码抽出来独立在一个Script块里，而不同的脚本在不同的代码里，最终代码如下：script>   Ext.Loader.setConfig({       en

登录窗口已经完成了，现在可以完成最后的工作了，主要就是完成Membership提供者的配置。首先打开Web.Config文件，在configuration段内添加一个数据库连接定义，代码如下： >    name="ApplicationServices"connectionString="Data Source=192.168.0.254;InitialCatalog=SimpleCMS;Per

现在可以对登录窗口进行调试了。      打开系统的首页页面文件，Views\Home目录下的Index.cshtml文件。要动态加载登录窗口，需要先设置好加载路径，因而在onReady函数上加入以下代码：    Ext.Loader.setConfig({        enabled: true,        paths: {            'Ext.ux': 'scripts/ex

登录窗口完成后，还需要几个步骤才能完成登录。现在先来完成输出验证码图片的控制器。要完成这个，需要使用VerifyCode类，该类是在网上找的，因为年代久远，出处都忘记了，在此向作者说声抱歉。      先在项目下创建一个Helper目录，该目录将用来放置一些辅助性的类，包括一些自定义的实用方法。然后把VerifyCode.cs文件复制到该目录下，打开该文件，为其添加命名空间“SimpleCMS.H

完成配置后，要做的是完成登录页面。因为要实现登录之后写入认证信息到Cookie，因而必须做一次跳转。当然，不做跳转，或不写入认证信息也行，但问题比较复杂，在这里还是做简单处理比较合适。还有就是写入认证信息的目的是为了在控制器通过特性控制方法的权限。      既然要跳转一次，就有两种思路了，一种是为了快速显示登录页，可不加载Ext JS，而是使用传统的页面，显示一个登录页，这样页面加载快，用户感受

打开VS2010，在主菜单选择文件，新建，项目，在如图1所示的弹出窗口中已安装的模板下选择C#的Web模板，然后选择“ASP.NET MVC 3 Web应用程序”，将项目名称修改为SimpleCMS，单击确定按钮后将显示如图2的窗口。图1 新建项目窗口图2 新建MVC 3项目      在图2窗口中，确保模版为空模板，视图引擎为Razor，最后单击确定按钮完成项目的创建。      创建项目后，首

本管理系统的数据库采用SQL Server2005，主要有T_Category、T_Content、T_Tag和T_TagInContent这4个表。为了简单起见，用户验证功能等将使用Membership提供者实现，因而用户表和角色表将使用aspnet_regsql.exe自动生成，这个可参阅有关的网上资料，在此就不赘述了。以下是4个表格的详细说明。1.        分类表：T_Category

笔者的书《Ext JS权威指南》已经出版了，但唯一遗憾是囿于篇幅，没有完整的示例，因而打算利用博客弥补一下，希望大家喜欢。            本系列博文主要目的是通过一个完整的过程介绍Ext JS MVC的开发过程，而后台则使用Asp.Net MVC 3。由于笔者Java水平实在太次，因而只能使用熟悉的C#语言开发，在此，对所有使用Java的读者说声抱歉。不过，Ext JS的开发基本是与后台无