读书人

ExtJs2.2兑现的日期时间控件

发布时间: 2012-11-22 00:16:41 作者: rapoo

ExtJs2.2实现的日期时间控件

/** * 日期时间输入框,实则是由日期输入框+时间输入框组成。 * @class Ext.form.DateTimeFieldUx * @extends Ext.form.Field * @author fbchen 陈富冰 * @version 1.0 2011-07-21 * 需要引用相关的文件:<pre> * <script type="text/javascript" src="<%=request.getContextPath()%>/ext/ux/Ext.form.DateTimeFieldUx.js"></script> * </pre> */Ext.form.DateTimeFieldUx = Ext.extend(Ext.form.Field, {    datetimeFormat: '{date} {time}',    dateFormat: 'Y-m-d',    timeFormat: 'H:i:s',        dataField: null,    timeField: null,        // private    initComponent : function() {        Ext.form.DateTimeFieldUx.superclass.initComponent.call(this);                this.defaultProps = ['allowBlank', 'blankText', 'disabled', 'readOnly', 'disabledClass',            'emptyClass', 'emptyText', 'fieldClass', 'focusClass', 'invalidClass', 'overCls'];                    this.fieldTpl = new Ext.Template(            '<table border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed"><tbody><tr>',            '<td nowarp="" width="50%" width="50%" name="code"><script type="text/javascript" defer="defer">Ext.onReady(function(){    Ext.QuickTips.init();    // turn on validation errors beside the field globally    Ext.form.Field.prototype.msgTarget = 'side';    var bd = Ext.getBody();    /*     * ================  Simple form  =======================     */    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});    var simple = new Ext.FormPanel({        labelWidth: 75, // label settings here cascade unless overridden        frame:true,        title: 'Simple Form',        bodyStyle:'padding:5px 5px 0',        width: 350,        defaults: {width: 230},        defaultType: 'textfield',        items: [{            fieldLabel: 'First Name',            name: 'first',            allowBlank:false        },{            fieldLabel: 'Last Name',            name: 'last'        }, {            fieldLabel: 'Date Time',            name: 'datetime1',            xtype:'datetimefield'        }],        buttons: [{            text: 'Save'        },{            text: 'Cancel'        }]    });    simple.render(document.body);});</script>

读书人网 >JavaScript

热点推荐