javascript - ExtJs EditorGridPanel sometimes not binding editor? -

javascript - ExtJs EditorGridPanel sometimes not binding editor? -

i have been encountering problem when dynamically adding tabs tabpanel in ext 3.4. here gist of going on:

create tab panel add tabs editor grid panel proper editor defined in column model editor bound fields on tabs, not fields on tabs

anybody know issue might be?

i created next plunk (very simple version of i'm doing): fiddle here

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 schedule array... schedulearray = []; if (schedulerec) { (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) { homecoming function(v) { if (v instanceof date) { homecoming v.format(format); } else { homecoming 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); homecoming tmpdate; } var gridstorefields = [{ name: 'starttime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.starttimehours, rec.starttimeminutes); homecoming tmpdate; } }, { name: 'endtime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.endtimehours, rec.endtimeminutes) homecoming 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); });

thanks in advance help.

i've verified in chrome dev tools of dynamically created tabs have right grid id associated , each grid has right storeid , right editor bound in column model.

edit: did little playing around fiddle, problem appears each field can editor field on 1 grid @ time. instance, if edit field 1 on tab 1 , edit field 2 on tab 2, field 2 not editable on tab 1 , field 1 not editable on tab 2.

i figured out after endless hours of tinkering today. took approach of independently declaring everything. finally, when expanding out column model, arrived @ root of issue. plunk proves it!

there appears bug when defining , re-using column model containing editors. workaround me either define them in place or 'new' column model object based on object i've defined.

plunk here

ext.onready(function() { ext.util.format.timefieldrenderer = function(format) { homecoming function(v) { if (v instanceof date) { homecoming v.format(format); } else { homecoming v; } }; }; var createdate = function(h, m) { var tmpdate = new date(); tmpdate.sethours(h); tmpdate.setminutes(m); homecoming 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); homecoming tmpdate; } }, { name: 'endtime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.endtimehours, rec.endtimeminutes) homecoming 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); homecoming tmpdate; } }, { name: 'endtime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.endtimehours, rec.endtimeminutes) homecoming 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); homecoming tmpdate; } }, { name: 'endtime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.endtimehours, rec.endtimeminutes) homecoming 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); homecoming tmpdate; } }, { name: 'endtime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.endtimehours, rec.endtimeminutes) homecoming 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); homecoming tmpdate; } }, { name: 'endtime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.endtimehours, rec.endtimeminutes) homecoming 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); homecoming tmpdate; } }, { name: 'endtime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.endtimehours, rec.endtimeminutes) homecoming 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); homecoming tmpdate; } }, { name: 'endtime', type: 'date', convert: function(v, rec) { var tmpdate = createdate(rec.endtimehours, rec.endtimeminutes) homecoming 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); });

javascript extjs extjs3