天书奇谈炼化铁骨铮铮:ExtJS - Show Framework

原文链接：http://www.sencha.com/blog/2011/01/21/countdown-to-ext-js-4-data-package/

这是ExtJS 4的的重大改变，Data Package相对于Extjs 3里面单纯的Store要更加灵活。

data package中最重要的三个类 Model Store Proxy

Model 模型是一种数据对象，比如电子商务应用中会有用户(Users)，产品(Products)，订单(Orders)等对象，这些对象会有若干属性，在Model中或者Ext 3的Ext.data.Record中就是fields

Ext 4可以用Model来构建Store，分组和排序这些功能已经从Store中分离出来了，标准的Store就可以进行分组和排序，不在需要Ext 3中的GroupingStore了。

Proxy(代理) Ext 4中  Store可以通过配置代理获取数据，代理可以配置Reader，Ext 4中Store不需要直接和Reader和Writer打交道，它们现在由Proxy来处理。现在Model可以直接配置代理。

Model直接配置代理有两点好处：第一，每一个用到User Model的Store都是用相同的方式去载入User数据的，这样就不需要给每一个加载User的Store都配置一个Proxy；第二，现在可以直接读写Model数据，无需借助Store。

Proxy里加入了一些HTML5的新特性，这点很不错

Associations 和 Loading Nested Data  这两点有点ORM ，Ext3中我们加载的数据都是二维表的形式，Ext 4 则可以加载有关联关系的数据，而且提供了一些方法来访问，比如user.posts().each()(详见原文)

总的来说感觉变化倒是很大，功能也更加强大了，不过学习成本也增加了，对于那些本身知识贫瘠的开发人员来说又增加了难度..

Extjs 4 倒计时 Extjs 4新特性跟踪

原文 http://www.sencha.com/blog/2011/01/19/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/

此次Extjs官方博客还是告知了不少新特性，值得一看：

首先是对“类”定义和继承的使用做出了调整。新的类定义方式可以避免未定义的scope下直接声明而产生错误

混合类型：有点多重继承的意思，比如现在的Ext.Window，它的draggable 和 resizable 都是通过config配置的

引进混合类型之后，单纯的Ext.Window 是不能拖拽和改变大小的，但是可以根据需要mixin  draggable和resizeable

Setters and Getters ： 这个没啥好说的，我只是想了解它的实现方式，等源码释出..

Dynamic Loading 动态载入 ：这个特性很赞啊，extjs那600k庞大的身躯会让很多领导感觉“慢”，当然说实在的很多东西确实不必要一次加载完成，ext之前也在源码包里面做过分解，我尝试过分别引入，但是现在ext做的不是很好，还是有些相互依赖的代码没有分开，ext一定在这方面下了不少功夫，说实话，把这么庞大的一个类库分解成自由组合的零件，国内哪个公司能做到我还不知道...

当然，以上所有变动依然可以使用3代的方式，不用担心升级问题啦

让Extjs combobox form submit 提交valueField，而不是displayField

如果用form.submit() 或者form.doAction('submit')

是不是遇到过提交到后台的值，是combobox选中的那个显示的值

这个问题是这样的

ExtJS的ComboBox是它自己通过n多html标签绘制出来的，作为一个纯粹的html的

ExtJS 组件扩展 组件化编程 扩展组件 组件编程

看到很多人搜索这些关键词带来的访问，我觉得有必要专门写一篇文章提供给这些关键词，也算是推广一下ExtJS 组件化编程吧

我是实用ExtDesigner的，所以这里讲讲如何利用ExtDesigner设计自己的组件。

先来一个常用的例子，构建一个自己的Form组件，用ExtDesigner拖拖拽拽，一个简单的From就出来了，如图

之后我们给这个From设定一下参数，在ExtDesigner界面的右下角，其中有一个参数是很重要的，就是jsClass这个参数，这个参数设定的是此Form的对象名称，其他参数可以根据自己对界面样式的要求自定设定，比如宽度高度等，如图

设置好参数后，我们看一下它生成的源代码

他生成了一个叫做MyFormUi的对象，这个对象名称就是根据刚才参数中jsClass设定的。

现在我们保存一下工程，然后点击一下那个导出工程的按钮

找到刚才保存工程的文件夹，它会自动生成几个文件

其中有两个主要的js文件，MyForm.js和MyForm.ui.js，这两个文件一个是界面对象，一个是事件处理对象，ExtDesigner已经帮你把界面和逻辑分离的工作做好了，是不是很高级？如果你不理解为什么这么做，参考一下我的另外一篇文章：ExtJS编程思想和开发方式|ExtJS单页面系统|ExtJS单页面应用

MyForm.ui.js中的代码和上面图片上的是一样的，来看一下MyForm.js这个文件

注意看红框框里面那句话，目前这个文件都是ExtDesigner自动生成出来的。那句话啥意思我就不翻译了。

现在讲讲如何实现事件处理和添加自定义方法：

现在我们把MyForm对象改成这样，如图，红框框的部分是新加的代码

在initComponent方法中增加了一个事件监听，this.addListener('afterrender', this.init,this);，这个目的是增加一个自己的初始化方法（init）我们可以在这个init方法里面尽情的做自己需要做的事情，我在这个init方法里面又调用了一个initListeners方法，因为某些时候我们要增加许多事件处理函数，所以把所有事件处理都放在这个initListeners方法中，比较清晰。

我们的init函数是在afterrender之后调用的，注意：这个afterrender事件，在组件的声明周期内只有一次，所以我们的初始化函数也只会被执行一次，也是因为afterrender，所以我们在刚刚new过之后，在没render之前，init方法里面做的一些设置是无效的：例如init方法里面定义了一个变量this.myVar ='myvar'; 在form = new MyFrom() 之后直接调用form.myVar，这样是无效的。

下面我们做一个初始化操作，并增加一个事件处理，如图：

MyForm = Ext.extend(MyFormUi, {
    initComponent: function () {
        this.addListener('afterrender', this.init, this);
        MyForm.superclass.initComponent.call(this);
    },
    init: function () {
        this.setTitle('this is my first form component');
        this.initListeners();
    },
    initListeners: function () {
        this.get(0).on('focus', this.onFocus, this);
    },
    onFocus: function () {
        alert('you focus me');
    }
});

初始化操作是设置MyForm的标题，

this.setTitle('this is my first form component');

增加了一个响应focus事件的函数

this.get(0).on('focus', this.onFocus, this);

当我们focus第一个文本框的时候，会调用onFocus函数，onFocus函数中执行了一个alert

我们看一下运行效果

以上就是利用ExtDesigner扩展一个原生组件成为自己的组件的简单例子，其他扩展大同小异

以后有时间再介绍如何扩展底层组件成为自己的控件。

此文原创，转载注明出处

Ext.data.Store.find，你了解他的功能吗？

今天遇到了一个勾选GridPanel里面某行总是不对的问题，研究了store的数据结构发现没什么问题，猜测是不是Ext的代码出bug了？看源代码分析了一番......

Ext.data.Store.find的匹配模式，使用的是test方法，源代码片段是

value.test(r.data[property]);

也就是说，store.find('find', 'a');

如果store里面有两行record，一行的find列是'a', 一行的find列是'ab'，那么会返回先匹配到的那一行，而不是你想要的'a'，如果你想用find方法获得你给定的值相等的行，那就错了

如果要用精确匹配，使用Ext.data.Store.findExact()方法

这个方法是这样实现的

findExact: function(property, value, start){
        return this.data.findIndexBy(function(rec){
            return rec.get(property) ===value;
        }, this, start);
    },

注意这里面的匹配使用的是恒等===，所以你要注意你store的fields配置了，如果你配置了int，那么用数字字符串去匹配的返回值永远是-1，这时先做个parseInt处理一下你的数字字符串

在Ext官网的手册里面，上面提到的两个函数的说明，都是下面这句，

Finds the index of the first matching Record in this store by a specific field value.

Finds the index of the first matching Record in this store by a specific field value.

这里Ext可能疏忽了

Ext JS 3.3日历组件(Ext JS 3.3 Calendar Component)

在Ext中设计一个以日历为基础的例子，是件稍微有点麻烦的事情。一个完整的日历可以轻而易举地成为一个产品本身，但是将它实现成一个富有启发性的Ext组件的例子又相当复杂。另一方面，做的太简单了，真实的应用中又没了实用意义。我们感觉我们很好的平衡了复杂性和实用性，希望你们能够认同。

了解CalendarPanel

Extjs tree 如何获得选中的节点

这里说的选中是指鼠标点击一个节点后，节点那一行出现浅蓝色背景的选中，而非checkbox的勾选

方法

Ext.tree.TreePanel.getSelectionModel().getSelectedNode();

Ext.tree.TreePanel.getSelectionModel()获得的是一个TreeSelectionModel对象，

这个TreeSelectionModel目前在Ext中有两个Ext.tree.DefaultSelectionModel和Ext.tree.MultiSelectionModel

Ext.tree.MultiSelectionModel的获取选中节点的方法是getSelectedNodes()，这个返回的是节点数组，Ext.tree.DefaultSelectionModel.getSelectedNode()返回的是单个节点对象。

ExtJS Grid中文字链接点击事件的更合理的处理办法

我们经常会给GridPanel中的某一个column加一个renderer，让它的内容可以变成一个链接，例如：

    resultRenderer: function (value) {
        return '查看';
    }

这样在Grid中，查看那两个字就变成链接了

如果点击这个查看的时候，想弹出窗口，那么我们最普通的方式，就是给链接加一个onclick响应函数，

onclick这里调用的函数，必然是通过全局的方式了，这样做有个缺点，就是全局函数的扩散，造成可维护性下降

其实，有一种更合理的处理办法，不论renderer中生成的是链接，还是其他的内容比如button，都是通用的

代码如下

首先给grid添加一个cellclick事件的响应函数

grid.on('cellclick', grid.onCellClick, grid);

响应函数中做如下处理

    onCellClick: function (grid, rowIndex, columnIndex, e) {
        if (e.getTarget().innerHTML === '查看') { //借助事件的target来判断，这里是链接可以这样判断，其他方式亦可
            var record = grid.getStore().getAt(rowIndex);  // Get the Record
            var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
            var data = record.get(fieldName);//这个data就是点击的单元格的数据了，一定有用的
           
            if (fieldName == 'this_column') {
                //如果是这一列，做这个事
            }
           
            if (fieldName === 'that_column') {
                //如果是另外一列，做另外的事
            }
        }
    }

这个方法，不仅可以处理链接，简化一下就是处理某个单元格点击，onCellClick的作用域还是grid，这个是重点，onCellClick还是在grid这个组件之内，而没有产生全局调用，另外点击onclick的响应函数，只能接收字面参数，想传递一个对象是不可能的，如果应用上述方法，即可解决

ExtJS this.ds.fields.get(i) is undefined 错误

今天遇到了个问题，搞了半天....

Store什么的，都没有错误，firebug看到错误就是标题的内容

结果发现是

GridPanel 的columns配置中 dataIndex一定要每一列都有，即使没有和store对应的也要加上这个属性

例如

            {
                xtype: 'gridcolumn',
                dataIndex: 'bool',
                header: 'Person',
                sortable: true,
                width: 100,
                menuDisabled: true
            }

ExtJS编程思想和开发方式|ExtJS单页面系统|ExtJS单页面应用

唠叨几句：不要认为 EXTJS 就是一个界面改良，在项目中，我仍然用 N 张页面，在 N 张页面部署EXTJS ．这个我不用多讲，效率问题大家都看得出来， EXTJS 是一个集成开发工具，注定他的开发包很大，一个 600 多 K 的 JS文件，打算让它下载多少次呢？应该说， EXTJS 不仅是一个 AJAX 开发框架，也是一个富客户端开发平台， AJAX是可以部署到多个页面，而完整的 EXTJS 是不能这样的做的，但是，他却能和 FLEX 一样，在一张页面中，完成项目中所有事件。

一、单页面
目前的应用方式：一个 Viewport ，点击每个菜单在 Viewport 的 center 区域生成一个 tab ，这个 tab就是一个 panel ， panel 中用 html 属性放置一个 iframe ，用 iframe 去加载另外一个全新的页面。

单页面方式：还是一个 Viewport ，点击每个菜单在 Viewport 的 center 区域生成一个 tab ，这个 tab就是一个 panel ，但是 panel 中不使用 iframe ，而是将原来用 iframe 方式加载的内容，直接“画”在 panel 中。

目前的应用方式的问题：
1.  占用内存超高：每个 tab 都会用 iframe 加载一个全新的页面，每个页面都会载入一套完整的ExtJS 的运行环境，由于浏览器的原因，这些 tab 关闭的时候内存不会完全释放，这样随着 tab 的开关，内存占用越来越多，占用几百 M都没问题。
2.  center 区域内部的宽高，无法随浏览器宽高变化，无法自适应
3.  iframe 内外相互控制，内外沟通非常困难
4. 需要消耗额外的 js 解析时间，速度慢，重新加载要消耗解析 js 的时间
5.  用 iframe 有时候会导致一些莫名其妙的变形问题，滚动条问题

单页面方式：
1. 不用 iframe 加载， ExtJS 自己会释放无用的对象、事件占用的内存，一般一个应用只占用几十 M 内存
2.  由于是在一个页面内， ExtJS 自己可以掌控宽高自适应
3. 单一页面无此问题
4. 只需要第一次载入页面的时候加载 ExtJS 运行库
5.  很容易控制，无此问题

二、组件化
编写 ExtJS 程序，应该像搭积木一样，在 Viewport 这样一个框架中，我们添加各种积木块进去得到我们想要的形状。 Extjs给我们提供了很多最小块的积木，每一块都是一个组件，我们可以将几个最小的组件组合成一个稍微大一点的组件，我们不可能每个功能都从最小的组件从头搭建，我们可以收集一些更大一些的组件，实现这个层面的组件复用，组件是可大可小的，组件的复用也是可大可小的。组件化编程是一个思想，而不是一门技术，这个思想可以用在任何地方。

三、 UI 与逻辑分离
可能大家都已近习惯了将 handler 和 listeners 与一大堆 Config Options 写在一起了。不能说这是一种错误的用法，但是这绝对不是好用法。类似下面这种代码是不是随处可见呢？ 
 

这种写法，再加上全集变量泛滥，就会导致整个 js 文件混乱不堪，一个 js 文件 3000 行代码，全局变量满天飞，想要的时候找不到，我想大家都遇到过吧。 
 

再看一下下面这段代码，不会不感觉清爽很多呢  

UI 与逻辑分离，就是在设计一个组件的时候，将 UI 写成一个类，将事件处理和其他逻辑写成另外一个类，两个类存放在两个不同的 js 文件中 ( 非必须 ) 。这样子的好处：
1.  改动 UI 和逻辑，几乎不会相互影响
2.  代码清晰规范，提高开发速度，降低维护成本
3.  组件可以重用，界面可以重用
4.  有利于开发规范的统一
5.  因为使用继承，内存开销减少，运行速度加快