关于 extjs：Ext.ux.form.field.DateTime 问题


Ext.ux.form.field.DateTime questions

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

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

    • enter

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    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)
        }
    })
    相关讨论

    你可以使用弹性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
            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)