ExtJS选择日期时间的一个解决方法

　　ExtJS是一个ajax框架，它是用javascript写的，与后台技术无关，主要用于创建前端用户界面。
　　ExtJS的功能非常强大，但是在form表单中它的日期和时间控件是单独的，没有可以直接选择日期和时间的控件，那么怎么办呢?虽然网上有改进版的日期时间控件下载，但星石觉得还是原生态比较好，所以想了一个不需要修改任何代码的方法。
　　其实呢，挺简单，就是将日期和时间控件放在同一行，保留一个fieldLabel，然后分别选择数值，保存到数据库中，再进行其他操作。下面是星石的开发步骤：
首先，设计日期时间在数据库中的存储。在MySQL数据库中，有date、time、datetime字段类型，所以，可以设计成2个字段，1个是date、1个是time；也可以设计成1个字段，类型是datetime，当然也可以设置为int，保存时间戳。星石这里选择的是1个datetime字段，这便于日期时间的条件判断。
　　然后，在form表单中，将datefield和timefield放在同一行，代码如下：

fp = new Ext.form.FormPanel({
width: 400,
height: 300,
layout: ‘form’,
buttonAlign:’center’,
labelAlign:’right’,
labelWidth:100,
frame:true,
bodyStyle:’padding:5px 0 0 0;’,
items: [{
xtype: 'panel',
layout: 'form',
autoWidth: true,
autoHeight: true,
items: [{
layout: 'column',
items: [{
columnWidth:.5,
layout:'form',
items:[{
xtype: 'datefield',
fieldLabel: '开始时间',
name: 'starttime_date',
id: 'starttime_date',
altFormats: 'Y-m-d',
format: 'Y-m-d',
width: 100
}]
},{
columnWidth:.5,
layout:’form’,
items: [{
xtype: 'timefield',
hideLabel: true,
name: 'starttime_time',
id: 'starttime_time',
altFormats: 'H:i:s',
format: 'H:i:s',
width: 100
}]
}]
}]
}],
buttons: [{
text: '提交',
type: 'submit',
handler: function(){...}
},{
text: '取消',
type: 'button',
handler: function(){...}
}]
});

　　数据post到后台后，将date和time的值连接成datetime值，保存到数据库中。
　　最后，编辑记录的时候，在form表单loadRecord之前，取datetime的前10位赋给date，后8位赋给time，类似于下面的代码：

var records = selModel.getSelections();
Ext.getCmp(‘starttime_date’).setValue(Ext.util.Format.substr(records[0].data.starttime,0,10));
Ext.getCmp(‘starttime_time’).setValue(Ext.util.Format.substr(records[0].data.starttime,11,8));
fp.getForm().loadRecord(records[0]);

　　就是这样了，O(∩_∩)O~，只要在表现形式、保存和编辑数据之前做一些处理，就能把date和time当成datetime似的使用啦！
原创文章请注明转载于知蚁博客，本文地址：http://www.letuknowit.com/archives/66

相关文章