令人头痛的ExtJS日期时间控件

1 缘由

Ext提供了日期、时间的控件,但没有将日期和时间组合在一起的控件。在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码。不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当时是怎样研究的,但不得不服啊。

之前网上提供的代码,我没有详细研究重写的实现方法。但我不太赞成之前的路径组织或者架构的实现方式。因为要使用这个起始结束时间控件,需要在一个页面中包含好几个js文件,这多不方便啊。经常遇到的情况是,纠结了半天,调试了半天,最后才发现少包含了一个 js 文件。况且,extjs 拥有 这么强大的类使用框架,不利用下岂不可惜。所以,我现在采用的解决办法:将这些类都重新命名,并依此放到对应的文件路径上。能够解决这个问题,非常感谢我同事GW的帮助。当时,我实在是被这几个文件中的命名方式弄得晕头转向。现在的解决办法是我自认为比较满意的了。

2 使用方法

原来CSDN的博客不能添加附件,所以,我将示例代码防到http://download.csdn.net/detail/lvye1221/5999545了.

我在 apache 目录下部署了测试示例。将附件中的测试用例,按照以下方式部署好,即可成功访问:

apache 根目录包含: extjs 4.0.7 的文件夹,再新建一个测试用的文件夹 test-form, 根目录的目录列表如下所示:

ext-4.0.7-gpl
test-form/

test-form 文件夹里的列表如下所示,即为解压后的测试示例代码。

test-container.html 
zhiyuan/

部署成功后,访问地址为: [http://localhost/test-form/test-container.html] 即可看到如下效果:

令人头痛的ExtJS日期时间控件

当然,上述部署的方式只是为了配合 test-container.html 中能够让代码找到正确的库文件,同时部署在 apache 也只是我个人比较偏爱的方式。读者可以采用自己的方式即可。但如果按照上述的方式部署是测试通过的。

3 部分问题及解决

3.1 label和时间框不在一行?

采用新的路径组织的结构,发现在测试代码中出现如下图所示的情况,标题、时间框、选择按钮,三个不位于同一行,但是,在工作项目中使用时,却出现了满意的情况。

令人头痛的ExtJS日期时间控件

未对齐的情况

令人头痛的ExtJS日期时间控件

项目中对齐的情况

猜测是引用的CSS样式问题,这时发现我的测试代码中是引用的 extjs 4.1 的样式,而实际项目中所采用的是 extjs 4.0.7 版本,同时,测试用例和实际项目都是所采用 extjs 4.0.7 版本的代码。找到原因就好办了,参照项目将 CSS 文件替换过来,问题就解决了。

再想深一些,如果不是存在参照项目中的代码,那么遇到这种问题真的有些不知所措,通过浏览器的元素查看器,会发现时间控件的宽度一直都固定在225,不管我怎样修改控件的总体宽度,但中间存在议程 x-box-inner 的宽度一直都是 255,这样,因为放不下元素,所以它们就竖排并列显示了。

可能还可以考虑继续找下去,v4.0.7 和 v4.1 两者之间的 css 文件到底是相差了什么呢?为什么会造成生成的 DOM 元素的宽度被限制下了。这可能需要花费更多的时间来研究。如果有读者知道原因,请在留言中告诉我,谢谢。

3.2 只显示一个时间选择控件

当我们只需要提供一个日期时间控件,而不是同时包含起始和结束这样中间的控件时,怎么办呢?我当时直接使用 DateTime 控件,日期倒是设置成了当前日期,但是却时间却是一片空白。并且整个控件在加载时就将已经弹出显示了。

通过查看提供起始时间和结束时间的控件代码,找到了。

myContainer.add({
xtype: 'datetimefield',
format: 'Y-m-d H:i:s'
}); Ext.create('zhiyuan.form.DateTimeField', {
renderTo: 'dateTimePicker',
format: 'Y-m-d H:i:s'
});

4 总结

在遇到问题时,能够主动去搜索解决办法来解决问题,这是很不错的。只是在团队合作中,真不能随便更改大家一起使用的库文件,如果随意更改或删除一些文件,将会给其他正在使用的同事造成很大的麻烦,他不知道这个库被修改了,花费很多时间来找出错的原因。又或者他知道被修改了,但是修改的文件不能完全适用他的情况,他将会要花费更多的时间来修改。不管怎样,这两种情况都会让同事很不爽的。

在探索解决实现日期和时间同时选的过程中,我发现解决网页问题的流程是:先网上搜索,能够让网上的示例跑起来;发现别人写的不好,对参考代码进行修改;最后发现自己写的不好,再进行修改。只是这段过程有些漫长,还时不时遇到一些头痛的问题。为什么会头痛呢?其实是因为对编程的语言和不熟悉库的使用情况。当解决完问题后,就不头痛了,就高兴啦。

当然,不要只顾着高兴了,在解决完一个问题时,一定要对问题进行及时的整理。解决遇到的这个问题时,总觉得这个问题很简单,而觉得没有必要整理,但当再次遇到这个问题时,发现完全不知道解决办法,这就会让人很头大。因为我就有这样的经历,当时解决这个时间控件路径的问题,但没有及时整理,等这次再需要解决同样的问题时,居然一点都不记得了,又重新解决并痛苦了一遍,这也是我写这篇博客的原因。

5 最近的感悟

八月过了2/3多了,我才发表了一篇博客,这样可不行。当然,可以说项目太紧,下班后太累……,找这样一大堆借口的借口是没有意义的。一定坚持写博客,自己定的计划是每个月至少四篇博客(嘿嘿,这样就可以一直得到持之以恒奖了)。顺便将最近的一些做项目的感悟写在这了。

当有需要增加新的需求时,通常我们就会加一点代码,再或者修改功能时候再加一点代码。其实也没什么特别好的办法,因为添加代码可以很快地实现需求。可是一定不要忘记:在项目有空余时间的时候好好地整理代码,能简化地就简化,能删除的就删除。可通常情况下,我们好像只要解决了问题,谁还记得当时很粗糙的代码需要修改呢?我想,优秀的程序员是知道的。

又想对我的程序员人生发发感叹了,有时真觉得我们不需要太聪明,只需要多多记录,多多思考,多花点有用时间来学习即可。人生有很多的事情,程序、音乐、演讲、爱情、家庭,只要自己真心付出了,恰当地使用利用好时间,就会有收获,就会成功。加油!

上一篇:Linux中同步互斥机制研究之原子操作


下一篇:linux中yum与rpm区别