Javascript ExtJs EditorGridPanel有时不绑定编辑器？

在ext3.4中，动态地向tabpanel添加选项卡时，我遇到了一个问题。以下是正在发生的事情的要点：

“创建”选项卡面板

使用“编辑器网格”面板添加选项卡，并在柱模型中定义适当的编辑器

编辑器绑定到某些选项卡上的某些字段，但不是所有选项卡上的所有字段

有人知道问题是什么吗

我创建了以下plunk（我正在做的事情的非常简单的版本）：

提前感谢你的帮助

我已经在chrome开发工具中验证了所有动态创建的选项卡都有正确的关联网格id，并且每个网格在列模型中都有正确的storeId和正确的编辑器绑定

---

编辑：我在小提琴上玩了一会儿，问题是每个字段一次只能是一个网格上的编辑器字段。例如，如果您在选项卡1上编辑字段1，然后在选项卡2上编辑字段2，则字段2在选项卡1上不可编辑，而字段1在选项卡2上不可编辑。

今天经过无数个小时的修补，我终于找到了答案。我采取了独立声明一切的方法。最后，在扩展列模型时，我找到了问题的根源。这一顿就证明了这一点

定义和重新使用包含编辑器的列模型时，似乎存在错误。对于我来说，解决方法是简单地就地定义它们，或者基于我已经定义的对象“新建”列模型对象

Ext.onReady(function() {
  var scheduleRec = {
   "Sunday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
    "Monday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
    "Tuesday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
    "Wednesday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
    "Thursday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
    "Friday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
    "Saturday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
  };

  //Build a schedule array...
  scheduleArray = [];
  if (scheduleRec) {
    for (srec in scheduleRec) {
      if (scheduleRec.hasOwnProperty(srec)) {
        if (typeof scheduleRec[srec] === 'object' && srec !== 'HolidaySets') {
          scheduleArray.push([srec, scheduleRec[srec]]);
        }
      }
    }
  }

  // simple array store
  var comboStore = new Ext.data.ArrayStore({
    fields: ['day', 'schedule'],
    data: scheduleArray
  });

  var fm = Ext.form;

  Ext.util.Format.timefieldRenderer = function(format) {
    return function(v) {
      if (v instanceof Date) {
        return v.format(format);
      } else {
        return v;
      }
    };
  };

  var cm = new Ext.grid.ColumnModel({
    defaults: {
      sortable: true
    },
    columns: [{
      header: 'Start Time',
      dataIndex: 'StartTime',
      format: 'H:i',
      width: 75,
      renderer: Ext.util.Format.timefieldRenderer('H:i'),
      editor: {
        xtype: 'timefield',
        format: 'H:i',
        increment: 1
      }
    }, {
      header: 'End Time',
      dataIndex: 'EndTime',
      format: 'H:i',
      width: 75,
      renderer: Ext.util.Format.timefieldRenderer('H:i'),
      editor: {
        xtype: 'timefield',
        format: 'H:i',
        increment: 1
      }
    }]
  });

  var createDate = function(H, M) {
    var tmpDate = new Date();
    tmpDate.setHours(H);
    tmpDate.setMinutes(M);
    return tmpDate;
  }

  var gridStoreFields = [{
    name: 'StartTime',
    type: 'date',
    convert: function(v, rec) {
      var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
      return tmpDate;
    }
  }, {
    name: 'EndTime',
    type: 'date',
    convert: function(v, rec) {
      var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
      return tmpDate;
    },
    format: 'H:i'
  }];

  var gridStore = new Ext.data.JsonStore({
    autoLoad: false,
    fields: gridStoreFields
  });

  var panel = new Ext.TabPanel({
    id: 'tabPanelId',
    activeTab: 0,
    height: 300,
    renderTo: Ext.getBody()
  });

  comboStore.each(function(records) {
    var theDay = records.get('day');

    var newStore = new Ext.data.JsonStore({
      storeId: theDay + 'Store',
      data: records.get('schedule'),
      autoLoad: false,
      fields: gridStoreFields
    });

    var newGrid = new Ext.grid.EditorGridPanel({
      id: theDay + 'Grid',
      xtype: 'editorgrid',
      height: 300,
      store: newStore,
      cm: cm,
      border: false,
      clicksToEdit: 1
    });

    Ext.getCmp('tabPanelId').add({
      title: theDay,
      items: newGrid
    });
  });
  Ext.getCmp('tabPanelId').setActiveTab(0);
});

Ext.onReady(function() {
  Ext.util.Format.timefieldRenderer = function(format) {
    return function(v) {
      if (v instanceof Date) {
        return v.format(format);
      } else {
        return v;
      }
    };
  };

  var createDate = function(H, M) {
    var tmpDate = new Date();
    tmpDate.setHours(H);
    tmpDate.setMinutes(M);
    return tmpDate;
  }

  var panel = new Ext.TabPanel({
    id: 'tabPanelId',
    activeTab: 0,
    height: 300,
    items: [{
      title: 'Sunday',
      items: new Ext.grid.EditorGridPanel({
        id: 'sundayGrid',
        xtype: 'editorgrid',
        height: 300,
        store: new Ext.data.JsonStore({
          storeId: 'sundayStore',
          data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
          autoLoad: false,
          fields: [{
            name: 'StartTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
              return tmpDate;
            }
          }, {
            name: 'EndTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
              return tmpDate;
            },
            format: 'H:i'
          }]
        }),
        cm: new Ext.grid.ColumnModel({
          defaults: {
            sortable: true
          },
          columns: [{
            header: 'Start Time',
            dataIndex: 'StartTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }, {
            header: 'End Time',
            dataIndex: 'EndTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }]
        }),
        border: false,
        clicksToEdit: 1
      })
    }, {
      title: 'Monday',
      items: new Ext.grid.EditorGridPanel({
        id: 'mondayGrid',
        xtype: 'editorgrid',
        height: 300,
        store: new Ext.data.JsonStore({
          storeId: 'mondayStore',
          data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
          autoLoad: false,
          fields: [{
            name: 'StartTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
              return tmpDate;
            }
          }, {
            name: 'EndTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
              return tmpDate;
            },
            format: 'H:i'
          }]
        }),
        cm: new Ext.grid.ColumnModel({
          defaults: {
            sortable: true
          },
          columns: [{
            header: 'Start Time',
            dataIndex: 'StartTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }, {
            header: 'End Time',
            dataIndex: 'EndTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }]
        }),
        border: false,
        clicksToEdit: 1
      })
    }, {
      title: 'Tuesday',
      items: new Ext.grid.EditorGridPanel({
        id: 'tuesdayGrid',
        xtype: 'editorgrid',
        height: 300,
        store: new Ext.data.JsonStore({
          storeId: 'tuesdayStore',
          data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
          autoLoad: false,
          fields: [{
            name: 'StartTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
              return tmpDate;
            }
          }, {
            name: 'EndTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
              return tmpDate;
            },
            format: 'H:i'
          }]
        }),
        cm: new Ext.grid.ColumnModel({
          defaults: {
            sortable: true
          },
          columns: [{
            header: 'Start Time',
            dataIndex: 'StartTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }, {
            header: 'End Time',
            dataIndex: 'EndTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }]
        }),
        border: false,
        clicksToEdit: 1
      })
    }, {
      title: 'Wednesday',
      items: new Ext.grid.EditorGridPanel({
        id: 'wednesdayGrid',
        xtype: 'editorgrid',
        height: 300,
        store: new Ext.data.JsonStore({
          storeId: 'wednesdayStore',
          data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
          autoLoad: false,
          fields: [{
            name: 'StartTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
              return tmpDate;
            }
          }, {
            name: 'EndTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
              return tmpDate;
            },
            format: 'H:i'
          }]
        }),
        cm: new Ext.grid.ColumnModel({
          defaults: {
            sortable: true
          },
          columns: [{
            header: 'Start Time',
            dataIndex: 'StartTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }, {
            header: 'End Time',
            dataIndex: 'EndTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }]
        }),
        border: false,
        clicksToEdit: 1
      })
    }, {
      title: 'Thursday',
      items: new Ext.grid.EditorGridPanel({
        id: 'thursdayGrid',
        xtype: 'editorgrid',
        height: 300,
        store: new Ext.data.JsonStore({
          storeId: 'thursdayStore',
          data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
          autoLoad: false,
          fields: [{
            name: 'StartTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
              return tmpDate;
            }
          }, {
            name: 'EndTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
              return tmpDate;
            },
            format: 'H:i'
          }]
        }),
        cm: new Ext.grid.ColumnModel({
          defaults: {
            sortable: true
          },
          columns: [{
            header: 'Start Time',
            dataIndex: 'StartTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }, {
            header: 'End Time',
            dataIndex: 'EndTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }]
        }),
        border: false,
        clicksToEdit: 1
      })
    }, {
      title: 'Friday',
      items: new Ext.grid.EditorGridPanel({
        id: 'fridayGrid',
        xtype: 'editorgrid',
        height: 300,
        store: new Ext.data.JsonStore({
          storeId: 'fridayStore',
          data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
          autoLoad: false,
          fields: [{
            name: 'StartTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
              return tmpDate;
            }
          }, {
            name: 'EndTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
              return tmpDate;
            },
            format: 'H:i'
          }]
        }),
        cm: new Ext.grid.ColumnModel({
          defaults: {
            sortable: true
          },
          columns: [{
            header: 'Start Time',
            dataIndex: 'StartTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }, {
            header: 'End Time',
            dataIndex: 'EndTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }]
        }),
        border: false,
        clicksToEdit: 1
      })
    }, {
      title: 'Saturday',
      items: new Ext.grid.EditorGridPanel({
        id: 'saturdayGrid',
        xtype: 'editorgrid',
        height: 300,
        store: new Ext.data.JsonStore({
          storeId: 'saturdayStore',
          data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
          autoLoad: false,
          fields: [{
            name: 'StartTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
              return tmpDate;
            }
          }, {
            name: 'EndTime',
            type: 'date',
            convert: function(v, rec) {
              var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
              return tmpDate;
            },
            format: 'H:i'
          }]
        }),
        cm: new Ext.grid.ColumnModel({
          defaults: {
            sortable: true
          },
          columns: [{
            header: 'Start Time',
            dataIndex: 'StartTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }, {
            header: 'End Time',
            dataIndex: 'EndTime',
            format: 'H:i',
            width: 75,
            renderer: Ext.util.Format.timefieldRenderer('H:i'),
            editor: {
              xtype: 'timefield',
              format: 'H:i',
              increment: 1
            }
          }]
        }),
        border: false,
        clicksToEdit: 1
      })
    }],
    renderTo: Ext.getBody()
  });

  Ext.getCmp('tabPanelId').setActiveTab(0);
});