Ext.ux.form.field.DateTime 问题 [英] Ext.ux.form.field.DateTime questions

问题描述

我创建了一个 Ext.ux.form.field.DateTime 插件，但这里有一些问题:

I create a Ext.ux.form.field.DateTime plugin, but here is some questions:

1. 如果我不设置宽度/高度，则工具栏中的 DateTime 将丢失
2. 无法在 RowEditing 插件中显示正确的宽度

Ext.define('Ext.ux.form.field.DateTime', {
    extend:'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.datetimefield',
    layout: 'hbox',
    width: 200,
    height: 22,
    combineErrors: true,
    msgTarget :'side',

    dateCfg:{},
    timeCfg:{},

    initComponent: function() {
        var me = this;
        me.buildField();
        me.callParent();
        this.dateField = this.down('datefield')
        this.timeField = this.down('timefield')
        me.initField();
    },

    //@private
    buildField: function(){
        this.items = [
            Ext.apply({
                xtype: 'datefield',
                format: 'Y-m-d',
                width: 100
            },this.dateCfg),
            Ext.apply({
                xtype: 'timefield',
                format: 'H:i',
                width: 80
            },this.timeCfg)
        ]
    },

    getValue: function() {
        var value,date = this.dateField.getSubmitValue(),time = this.timeField.getSubmitValue();
        if(date){
            if(time){
                var format = this.getFormat()
                value = Ext.Date.parse(date + ' ' + time,format)
            }else{
                value = this.dateField.getValue()
            }
        }
        return value
    },

    setValue: function(value){
        this.dateField.setValue(value)
        this.timeField.setValue(value)
    },

    getSubmitData: function(){
        var value = this.getValue()
        var format = this.getFormat()
        return value ? Ext.Date.format(value, format) : null;
    },

    getFormat: function(){
        return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
    }
})

推荐答案

可以使用flex

        Ext.apply({
            xtype: 'datefield',
            format: 'Y-m-d',
            width: 100,
            flex: 2
        },this.dateCfg),
        Ext.apply({
            xtype: 'timefield',
            format: 'H:i',
            width: 80,
            flex: 1
        },this.timeCfg)

这篇关于Ext.ux.form.field.DateTime 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！