Question

当我将带有日期字段的编辑器添加到我的网格时，日期字段不会呈现。

我的问题是我必须根据两个日期验证日期范围。当我点击其中一个dafields时检查另一个选择器的值，但是我无法获得另一个日期字段的值，因为它不是渲染（单击它后会显示日期字段）。

此外，如果验证器与undefined崩溃，则日期字段会生气，DOM上的位置会随机变化。

代码是这样的：

{ xtype: 'form',
defaults: {
     labelAlign: 'top',
     width: '95%'
},
items: [
     Ext.create('Ext.grid.Panel', {
          id: '<the id>',
          selModel: Ext.create('Ext.selection.CheckboxModel', {
              singleSelect: false,
              sortable: false,
              checkOnly: true
          }),
          store: myStore,
          plugins: {
              ptype: 'celledititing',
              pluginId: 'celledit',
          },
          columns: [
              { text: 'Field 1', dataIndex: 'FIELD_1', width: '25%' },
              { text: 'Field 2', dataIndex: 'FIELD_2', width: '25%' },
              { text: 'Date 1', dataIndex: 'DATE_1', width: '25%',
                renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                editor: {
                     xtype: 'datefield',
                     id: '<date id>',
                     vtype: 'daterange',
                     endDateField: '<date 2 id>',
                     dateRangeMin: '',
                     flex: 1
               },
               { text: 'Date 2', dataIndex: 'DATE_2', width: '25%',
                 renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                 editor: {
                     xtype: 'datefield',
                     id: '<date 2 id>',
                     vtype: 'daterange',
                     startDateField: '<date id>',
                     dateRangeMin: '',
                     flex: 1
               }
          ],
          plugins: {
              ptype: 'cellediting',
              clicksToEdit: 1
          },
          height: 200
      })
      ]
 }

问候 -

Answer 1

你是对的。您无法从其他日期字段获取值，因为它未呈现，您可以在网格的属性中保存字段并在网格的validateedit事件上手动验证它。这里几乎是准备好的片段，您只需要在网格的validateedit监听器中添加验证逻辑

var myStore = Ext.create('Ext.data.Store', {

    data: [{
        FIELD_1: 'voluptas',
        FIELD_2: 'consequatur',
        DATE_1: '12/15/2013',
        DATE_2: '4/18/2008'
    }, {
        FIELD_1: 'eveniet',
        FIELD_2: 'modi',
        DATE_1: '4/7/2008',
        DATE_2: '7/26/2004'
    }, {
        FIELD_1: 'ea',
        FIELD_2: 'voluptas',
        DATE_1: '7/3/2012',
        DATE_2: '9/2/2008'
    }, {
        FIELD_1: 'minima',
        FIELD_2: 'iste',
        DATE_1: '3/3/2002',
        DATE_2: '7/15/2013'
    }, {
        FIELD_1: 'consequatur',
        FIELD_2: 'beatae',
        DATE_1: '3/3/2013',
        DATE_2: '10/20/2014'
    }],
    fields: [{
        name: 'FIELD_1'
    }, {
        name: 'FIELD_2'
    }, {
        name: 'DATE_1',
        type: 'date'
    }, {
        name: 'DATE_2',
        type: 'date'
    }]
});



Ext.create("Ext.panel.Panel", {
    title: "test",
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'form',
        defaults: {
            labelAlign: 'top',
            width: '95%'
        },
        items: [
            Ext.create('Ext.grid.Panel', {
                id: '<the id>',
                selModel: Ext.create('Ext.selection.CheckboxModel', {
                    singleSelect: false,
                    sortable: false,
                    checkOnly: true
                }),
                store: myStore,
                plugins: {
                    ptype: 'celledititing',
                    pluginId: 'celledit',
                },
                parseDate: function(value) {
                    var me = this,
                        val = value,
                        altFormats = me.altFormats,
                        altFormatsArray = me.altFormatsArray,
                        i = 0,
                        len;

                    if (value && !Ext.isDate(value)) {
                        val = me.safeParse(value, me.format);

                        if (!val && altFormats) {
                            altFormatsArray = altFormatsArray || altFormats.split('|');
                            len = altFormatsArray.length;
                            for (; i < len && !val; ++i) {
                                val = me.safeParse(value, altFormatsArray[i]);
                            }
                        }
                    }

                    // If configured to snap, snap resulting parsed Date to the closest increment.
                    if (val && me.snapToIncrement) {
                        val = new Date(Ext.Number.snap(val.getTime(), me.increment * 60 * 1000));
                    }
                    return val;
                },
                listeners: {
                    validateedit: {
                        fn: function(editor, e) {
                            var grid = editor.grid;
                            var date = grid.parseDate(e.value);

                            if(e.field=="DATE_1"){
                              field = grid.startField
                            }else{
                              field = grid.endField
                            }
                            if (!date) {
                                return false;
                            }
                            ///// validate your Fields HERE
                            
                            return true;
                        }
                    }
                },
                startField: null,
                endField: null,
                    columns: [{
                              text: 'Field 1',
                              dataIndex: 'FIELD_1',
                              width: '25%'
                          }, {
                              text: 'Field 2',
                              dataIndex: 'FIELD_2',
                              width: '25%'
                          }, {
                              text: 'Date 1',
                              dataIndex: 'DATE_1',
                              width: '25%',
                              renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                              editor: new Ext.create("Ext.form.field.Date",{
                                xtype: 'datefield',
                                id: '<date id>',
                                dateRangeMin: '',
                                flex: 1,
                                listeners: {
                                    change: function(field) {
                                        this.up("gridpanel").startField = field;
                                    }
                                },
                              })
                          }, {
                              text: 'Date 2',
                              dataIndex: 'DATE_2',
                              width: '25%',
                              renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                              editor: {
                                  xtype: 'datefield',
                                  id: '<date 2 id>',
                                  dateRangeMin: '',
                                  dateRangeMax:'',
                                  flex: 1,
                                  listeners: {
                                      change: function(field) {
                                          this.up("gridpanel").endField = field;
                                      }
                                  }
                              }
                          }],
                
                plugins: {
                    ptype: 'cellediting',
                    clicksToEdit: 1
                },
                height: 200
            })
        ]
    }]
})

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
    
    <script src="https://cdn.sencha.com/ext/gpl/4.2.0/ext-all-dev.js"></script>
    
    </head>
  </html>

将其添加到网格后，EXTJS编辑器日期字段未呈现

1 个答案: