Skip to content


给extjs的grid添加一个动作按钮的列,搞不定

extjs非常好,真的非常好,他的代码写的也很好,很多东西用起来很舒服。

我说的是用起来舒服,并不代表学习使用的时候舒服,其实学习使用extjs真是一个恶心的事情,文档乍看上去很美,但是组织的并不是很好。就好像我写一个FormPanel的时候,里面的items,我需要指定他的显示类型(xtype)就找了半天也无法找到一个完整的类型列表,还是在别人提示下终于抠出来了,原来给放在Ext.Component当中了。好吧,我承认我没有完整的度过API文档,但是你不觉得API文档应该是一个速查手册么?

好了,不啰嗦了,说一下我遇到的问题。
实话实说Extjs的Grid还是很不错的,我现在要实现一个很简单的grid,就是前面的几列都是显示相关内容,但是最后一列显示的是几个动作按钮,比如”查看”、”删除”。相信这些都是非常显而易见的东西吧。但是在extjs当中却无法实现。

我想要的

Name Email Action
Tom tom@tom.com

但是我在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,很无奈。

总结:

  1. Extjs代码很不错,是一个优秀的代码,可以用来学习
  2. Extjs代码逻辑严谨,很多思想跟我以前在Hansky时候写的HFC(Hansky Foundational Component,一套类似Extjs的UI框架)的想法都是一样的,说明我没走错路。
  3. 给Extjs的建议
    1. 提供对Component每一个style向的精准读取设置功能,最简单的增加一个setStyle/getStyle方法就可以了
    2. 提供对Grid的更多的支持,允许renderer返回类型为Mixed,这样可以实现更加丰富的grid展示效果
    3. 把文档再写好点吧,求求你了。

 

Posted in extjs.

Tagged with , , .


One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. xxxing says

    那么为何不让她产生一个占位的div,然后在grid render之后再操作这些占位div呢?
    你好,这点我不是很明白,能帮我解释下吗?说说你具体是怎么做的,谢谢了!



Some HTML is OK

or, reply to this post via trackback.