Question

我有这段代码

class PageResolver extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            page: null
        };
    }

    componentDidMount() {
        this.getPage(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.getPage(nextProps);
    }

    private getPage(props) {
        const { url } = props.match;

        axios({
            method: 'GET',
            url: 'http://localhost:3000/pages',
            params: {
                url
            }
        }).then(({ data }) => {
            this.setState({ page: null });

            if (data[0]) {
                const pageType = data[0].type;

                this.setState(() => ({ page: pages[pageType] }));
            } else {
                this.setState(() => ({ page: NotFound }));
            }
        });
    }

    render() {
        const { page: PageComponent } = this.state;

        return (
            PageComponent ? (
                <PageComponent />
            ) : null
        );
    }
}

日期在网格中设置为定义的格式＆＃39; d / m / Y＆＃39; 03/06/2018，但是当我尝试将该日期发送到数据库时，格式更改为＆＃39; 2018-03-06T00：00：00＆＃39;。

我也设置了这样的模型：

{
                xtype: 'datecolumn',                    
                dataIndex: 'fechaNacimiento',
                itemId: 'fechaNacimiento',
                flex: 1,
                //hidden: true,
                //hideable: false,
                text: 'Fecha de Nacimiento',
                editor: {
                    xtype: 'datefield',
                    format: 'd/m/Y',
                    allowBlank:false,
                }
            },

我需要以格式发送日期：＆＃39; d / m / Y＆＃39;。就像这样：03/06/2018

任何人都知道为什么日期会发生变化以及如何解决这个问题？

Answer 1

您需要对模型字段使用convert配置。在convert配置内，您可以返回所需的输出。

将Reader提供的值转换为将存储在记录中的值的函数。此方法可以由派生类覆盖或设置为convert配置。

如果配置为null，则在读取此字段时，不会对原始数据属性应用任何转换。这将提高性能。但您必须确保数据类型正确且无需转换。

转换函数示例：

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['name', {
        name: 'joindate',
        convert: function(value, record) {
            //if value is not defined then null return
            return value ? Ext.Date.format(value, 'd/m/Y') : null;
        }
    }]
});

在此 FIDDLE 中，我使用grid，cellediting和datefiled创建了一个演示版。我希望这能帮助/指导您达到您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('MyModel', {
            extend: 'Ext.data.Model',
            fields: ['name', {
                name: 'joindate',
                convert: function (value, r) {
                    //if value is not defined then null return
                    return value ? Ext.Date.format(value, 'd/m/Y') : null;
                }
            }]
        });

        Ext.create('Ext.data.Store', {
            storeId: 'myStore',
            model: 'MyModel',
            data: [{
                name: 'Lisa'
            }, {
                name: 'Bart'
            }, {
                name: 'Homer'
            }, {
                name: 'Marge'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'My Data',
            store: 'myStore',
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: 'textfield'
            }, {
                header: 'Join Date',
                dataIndex: 'joindate',
                //You can also use Ext.util.Format.dateRenderer('d/m/Y') for showing required date formate inside grid cell.
                // renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                flex: 1,
                editor: {
                    completeOnEnter: false,
                    field: {
                        xtype: 'datefield',
                        editable: false,
                        //The date format string which will be submitted to the server. The format must be valid according to Ext.Date#parse.
                        submitFormat: 'd/m/Y',
                        //The default date format string which can be overriden for localization support. The format must be valid according to Ext.Date#parse.
                        format: 'd/m/Y',
                        allowBlank: false
                    }
                }
            }],
            selModel: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            renderTo: Ext.getBody(),
            tools: [{
                type: 'plus',
                handler: function () {
                    var grid = this.up('grid'),
                        store = grid.getStore(),
                        rec = Ext.create('MyModel', {
                            name: ''
                        }),
                        context;

                    store.add(rec);

                    //Get Ext.grid.CellContext of first cell using getColumns()[0]
                    context = grid.getView().getPosition(rec, grid.getColumns()[0])

                    //Start editing in first cell
                    grid.setActionableMode(true, context);
                }
            }],
            bbar: ['->', {
                text: 'Save Data',
                handler: function (btn) {
                    var store = this.up('grid').getStore();
                    store.each(rec => {
                        console.log(rec.data);
                    })
                }
            }]
        });
    }
});

网格编辑器中的日期字段

1 个答案: