Behind the Code

今天又差点被extjs搞死了，好吧，我承认是已经搞死了。具体的事情是这样的，我有一个页面是填写数据，就是一个Form啊，里面有下拉列表，使用extjs里面的ComboBox，然后就发现鸟几个诡异的事情。 一旦选中了某一个选项，就无法选择其他的了，因为下拉选项里面只有这个当前选中的备选项。 无论我怎么提交，提交过去的都是显示的选项而不是对应的value。 第一个问题抄了别人的代码看明白了，原来是在设置ComboBox的时候需要把参数triggerAction设置成为’all’，它默认的是’query’。这是表示我下面显示的是全部内容还是根据当前ComboBox里面输入的内容进行筛选的内容。 下面来说说第二个问题，折腾了我几个小时的问题。我们看一下原来的<select>的写法，其中的选项<option value=”value”>Text</option>。给用户看到的是Text，而post到server的是value。但是extjs的ComboBox呢？我尝试了n次，他都是把Text给我传回去了。翻文档，google，也没有个所以然，最后继续祭出hack大法。用firebug看一下生成的页面，ComboBox是由一个input和一个div组成的，这个input的名字就是你在ComboBox里面设定的名字，随着你的选择，你选中项的Text也就写进了这个input。也就是说明在提交的时候，form用的是这个内容。这里面有两个疑惑我的问题。 文档上说默认情况下FormPanel（其实是FormPanel内置的BasicForm）会使用BasicForm的Action方法进行Ajax提交。 文档上说ComboBox的值，由制定的valueField从Store里面获取。 看到这两个文档说，你会想到什么，至少我是下意识的想到，form提交的时候，遍历他的所有的孩子，然后获取各自的value，组织一下，用Ajax post到服务器。多make sense。Bingo，恭喜你，跟我一样，答错了。我从BasicForm的submit一路寻找到底，才发现他到底怎么做的。我说说，你听听，在想当初。 submit的方法都是归并到doAction方法，然后根据你是submit，再去寻找Ext.form.Action.Submit类的run方法。 Ext.form.Action.Submit.run里面有一个方法是getParams用来拼接参数，这是继承自Ext.form.Action.getParams Ext.form.Action.getParams调用Ext.lib.Ajax.serializeForm方法。在这里我却找了半天没找到这个方法，因为我是直接grep Ext.lib.Ajax.serializeForm，未果，全是调用。最后grep Ext.lib.Ajax，才发现在每一个adapter里面有这么一个类，进去才找到serializeForm方法。 因为我使用的adapter是ext-base，所以分析他的serializeForm方法，是根据传入的form遍历所有的孩子 恍然大悟，原来拼接的参数也是从form里面抠出来的，而不是各个组件自己维护的value。 既然这样，那就得从ComboBox如何能够正确的生成input下手了。查看Ext.form.ComboBox.onRender方法，对一个叫做hiddenName的变量进行判断，然后根据判断的结果生成input。并且里面的数据是取自hiddenField的值，而hiddenField的值是在定义了hiddenValue时候使用，没定义的时候使用ComboBox的value，所以也就是ComboBox的valueField定义的。修改代码，在生成ComboBox的时候，添加hiddenName参数，这时候生成的form终于对了，post到server的内容也对了。太不容易了。 这时候我还有一个疑问，根据文档，如果我在生成BasicForm的时候，给定参数standardSubmit为true，那么就会使用默认的DOM的form.submit()方法，也就是标准的刷新页面的提交方法。但是这个和非standardSubmit的区别仅仅是方法的不同，而不是一个原生的（native）的提交方法和Ajax（自组织value）的提交方法。 对extjs的建议 对文档和名称再标准化一些，至少要比较make sense吧（也许是以前我自己写UI框架时候中毒太深吧） 最好给一个设计的文档出来，要知道OO的代码看上去是比较费劲的 ComboBox很不错，就是文档糟糕了点，至少例子里面的注释多点好伐

extjs非常好，真的非常好，他的代码写的也很好，很多东西用起来很舒服。 我说的是用起来舒服，并不代表学习使用的时候舒服，其实学习使用extjs真是一个恶心的事情，文档乍看上去很美，但是组织的并不是很好。就好像我写一个FormPanel的时候，里面的items，我需要指定他的显示类型（xtype）就找了半天也无法找到一个完整的类型列表，还是在别人提示下终于抠出来了，原来给放在Ext.Component当中了。好吧，我承认我没有完整的度过API文档，但是你不觉得API文档应该是一个速查手册么？ 好了，不啰嗦了，说一下我遇到的问题。实话实说Extjs的Grid还是很不错的，我现在要实现一个很简单的grid，就是前面的几列都是显示相关内容，但是最后一列显示的是几个动作按钮，比如”查看”、”删除”。相信这些都是非常显而易见的东西吧。但是在extjs当中却无法实现。 我想要的 Name Email Action Tom tom@tom.com View 但是我在extjs当中却无法找到如何实现。因为这个View按钮加不上。看文档，未果；Google之，依然未果。只能祭起最后的绝招了，hack源代码。 Grid有两个可以调整的地方，在ColumnModel里面的renderer和editor，但是通过阅读源代码发现renderer只是针对最基本的值类型的，也就是他只是在最终要显示之前的东西进行一下再包装，但是再包装的结果必须是一个值类型（你可以理解成就是一个字符串），如果不是值类型，那么会调用Object.toString()方法。至于editor属性是当grid的一个cell需要有编辑动作时候提供的一个对当前值的编辑器。他必须是一个Ext.Form.Field的子类，而Button不是Field的子类，故，无法使用。我曾经想通过hack extjs的源代码让他按照类似editor的方法添加一个button，但是发现比较麻烦。是因为extjs的代码写的不错，逻辑很严密，这也就说明如果不能把他的结构了然于胸就很难下手去进行大幅度的修改，而模拟editor添加button这个动作，就算是一个大修改，我放弃了。 既然都不可以，那么怎么办？看来只能使用一些龌龊的招数了。既然renderer只能返回一个文本，而这个文本又是会按照innerHTML塞进Cell中的，那么为何不让她产生一个占位的div，然后在grid render之后再操作这些占位div呢？好想法，很容易实现，但是效果不好，生成的Ext.Button太高，把Cell都撑破了，每个Row都有自己的小滚动条了，真是恶心啊。其实这时候只要能修改一下这个row的css，让她的height再高一些就好了，但是发现extjs无法只修改其中一个css，要改就是整个的css class。作罢。 最后采用连接的形式替换了这个button，很无奈。 总结： Extjs代码很不错，是一个优秀的代码，可以用来学习 Extjs代码逻辑严谨，很多思想跟我以前在Hansky时候写的HFC（Hansky Foundational Component，一套类似Extjs的UI框架）的想法都是一样的，说明我没走错路。 给Extjs的建议 提供对Component每一个style向的精准读取设置功能，最简单的增加一个setStyle/getStyle方法就可以了 提供对Grid的更多的支持，允许renderer返回类型为Mixed，这样可以实现更加丰富的grid展示效果 把文档再写好点吧，求求你了。