EXTJS编辑器日期栏在将其添加到网格后未呈现

Question

当我将包含datefield的编辑器添加为Xtype到我的网格时，日期栏不呈现。

我的问题是，我必须验证基于两个日期的日期范围。当我点击其中一个选项时，检查另一个选择器的值，但我无法获得其他日期字段的值，因为不是呈现（点击它后呈现的日期字段）。

此外，如果验证器与undefined一起崩溃，则datefield会变得疯狂并且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 
     }) 
     ] 
} 

Greetings-

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>