解决Modern工具包中Ext.field.Date的提交值问题

Posted 2022-12-11 上将军

使用Classic工具包的日期字段，在表单提交的时候，获取的是日期字段的提交值，也就是会在表单提交的时候会将值转换为与定义的格式相符的值。而在Modern工具包中，提交的值是原始值，也就是带有时区属性的日期值，如果在服务器端不进行时区转换，那么日期值就不是预想的值。

要解决Modern工具包中的这个问题，如果不想重写任何基类，就只能在提交前或在服务器端对值进行处理，这无疑增加了代码量。最简单直接的办法就是重写Ext.field.Panel的getValues方法，具体重写代码如下：

    getValues: function (enabled, all) 
        var fields = this.getFields(),
            values = ,
            isArray = Ext.isArray,
            field, value, addValue, bucket, name, ln, i;
        // Function which you give a field and a name, and it will add it into the values
        // object accordingly
        addValue = function(field, name) 
            if (!all && (!name || name === 'null') || field.isFile) 
                return;
            

            if (field.isCheckbox) 
                value = field.getSubmitValue();
             else 
                value = field.getValue();
                if(Ext.isDate(value)) value = Ext.Date.format(value, field.getDateFormat() || Ext.util.Format.defaultDateFormat );
            

            if (!(enabled && field.getDisabled())) 
                // RadioField is a special case where the value returned is the fields valUE
                // ONLY if it is checked
                if (field.isRadio) 
                    if (field.isChecked()) 
                        values[name] = value;
                    
                 else 
                    // Check if the value already exists
                    bucket = values[name];

                    if (!Ext.isEmpty(bucket)) 
                        if (!field.isCheckbox || field.isChecked()) 
                            // if it does and it isn't an array, we need to make it into an array
                            // so we can push more
                            if (!isArray(bucket)) 
                                bucket = values[name] = [bucket];
                            

                            // Check if it is an array
                            if (isArray(value)) 
                                // Concat it into the other values
                                bucket = values[name] = bucket.concat(value);
                             else 
                                // If it isn't an array, just pushed more values
                                bucket.push(value);
                            
                        
                     else 
                        values[name] = value;
                    
                
            
        ;

        // Loop through each of the fields, and add the values for those fields.
        for (name in fields) 
            if (fields.hasOwnProperty(name)) 
                field = fields[name];

                if (isArray(field)) 
                    ln = field.length;
                    for (i = 0; i < ln; i++) 
                        addValue(field[i], name);
                    
                 else 
                    addValue(field, name);
                
            
        

        return values;
    

以上代码主要在获取值之后添加了以下代码：

 if(Ext.isDate(value)) value = Ext.Date.format(value, field.getDateFormat() || Ext.util.Format.defaultDateFormat );

也就是当判断到值是日期值的时候，使用格式化函数，将值转换为与字段定义的日期格式相符的值。

顺便说 一 句：setValues方法实际上是在Ext.field.Manager 中定义的，这是一个混入类，如果重写该类，是没有任何作用的，因为在Ext JS类初始化完成之后，已经将混入的方法全部写到Ext.field.Panel了，因而，需要重写Ext.field.Panel的setValues方法才有效果。