令人头痛的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] 即可看到如下效果：

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

3 部分问题及解决

3.1 label和时间框不在一行？

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

未对齐的情况

 

项目中对齐的情况

 

猜测是引用的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多了，我才发表了一篇博客，这样可不行。当然，可以说项目太紧，下班后太累……，找这样一大堆借口的借口是没有意义的。一定坚持写博客，自己定的计划是每个月至少四篇博客（嘿嘿，这样就可以一直得到持之以恒奖了）。顺便将最近的一些做项目的感悟写在这了。

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

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