PDA

View Full Version : Error Adding a record to a Panel Grid Store



drgaryholland
1 Jan 2016, 1:59 PM
I am getting an error when trying to add a record to a panel grid store. The error "Object doesn't support property or method 'getView' "

The function that adds the record to the store :

onAddBomRecordButtonClick1: function(button, e, eOpts) {
var panel = Ext.getCmp('panelBomPanel1');
var store = panel.store;
var model = new app.model.PanelBomModel();


if (!Ext.getCmp('customerMinMaxCombo').value || !Ext.getCmp('parentCombo1').value){
alert("You must select a Customer and Panel before adding a BOM record.");
return;
}




store.add(model);


},

jdkhamba
2 Jan 2016, 7:40 AM
If all you are trying to do is add records to store then there is no need to create a model every time you want to add a record. Take a look :

https://fiddle.sencha.com/#fiddle/137o

Simply add json data to the "add" function of the store as a parameter.

drgaryholland
2 Jan 2016, 2:55 PM
Yes but why the error message?

jdkhamba
2 Jan 2016, 2:58 PM
It is hard to say without some more code. Can you post a fiddle?

drgaryholland
2 Jan 2016, 3:15 PM
Here is the tabbed panel code, there is a add record button that when clicked causes the error:Ext.define('app.view.PanelBomTabPanel', { extend: 'Ext.tab.Panel', height: 742, width: 1090, activeTab: 0, initComponent: function() { var me = this; Ext.applyIf(me, { items: [ { xtype: 'panel', width: 1000, autoScroll: true, layout: { type: 'absolute' }, title: 'Shipset Effectivity Panel BOM', tabConfig: { xtype: 'tab', listeners: { click: { fn: me.onEndItemTabClick, scope: me } } }, dockedItems: [ { xtype: 'gridpanel', dock: 'top', autoRender: false, height: 815, id: 'panelBomPanel', padding: '0,0,0,0', width: 1000, autoScroll: true, title: 'Panel BOM Maintenance Screen for Ship Set Effectivity', store: 'PanelBomStore', dockedItems: [ { xtype: 'toolbar', dock: 'top', height: 32, width: 1190, items: [ { xtype: 'button', text: 'Add BOM Line', listeners: { click: { fn: me.onAddBomRecordButtonClick, scope: me } } }, { xtype: 'tbseparator' }, { xtype: 'button', text: 'Save Panel BOM', listeners: { click: { fn: me.onPanelSaveButtonClick, scope: me } } }, { xtype: 'tbseparator' }, { xtype: 'combobox', id: 'programCombo', fieldLabel: 'Program', labelAlign: 'right', labelWidth: 70, displayField: 'value', store: 'ProgramLookUpStore', typeAhead: true, valueField: 'id', listeners: { collapse: { fn: me.onProgramComboCollapse, scope: me } } }, { xtype: 'tbseparator' }, { xtype: 'combobox', id: 'parentCombo', fieldLabel: 'Parent Part No', labelAlign: 'right', labelWidth: 80, displayField: 'value', store: 'ParentLookUpStore', valueField: 'id', listeners: { collapse: { fn: me.onParentComboCollapse, scope: me } } }, { xtype: 'tbseparator' }, { xtype: 'button', text: 'Delete Entire Panel BOM', listeners: { click: { fn: me.onDeletePanelBomButtonClick, scope: me } } }, { xtype: 'button', text: 'Add Panel BOM', listeners: { click: { fn: me.onButtonClick, scope: me } } } ] } ], viewConfig: { width: 1290, listeners: { itemadd: { fn: me.onViewItemAdd, scope: me } } }, columns: [ { xtype: 'checkcolumn', dataIndex: 'deleteFlag', text: 'Delete Flag', listeners: { checkchange: { fn: me.onDeleteCheckcolumnCheckChange, scope: me } } }, { xtype: 'gridcolumn', draggable: false, hidden: true, dataIndex: 'id', text: 'Id' }, { xtype: 'gridcolumn', width: 57, dataIndex: 'bomSeq', text: 'Bom Seq', editor: { xtype: 'numberfield', allowDecimals: false, allowExponential: false, decimalPrecision: 0 } }, { xtype: 'gridcolumn', width: 197, dataIndex: 'componentNo', text: 'Component No', editor: { xtype: 'combobox', id: 'itemNoCombo', displayField: 'partNumber', forceSelection: true, minChars: 10, store: 'PartsLookupStore', typeAhead: true, valueField: 'partNumber', listeners: { change: { fn: me.onItemNoComboChange, scope: me }, collapse: { fn: me.onItemNoComboCollapse, scope: me }, expand: { fn: me.onItemNoComboExpand, scope: me }, blur: { fn: me.onItemNoComboBlur, scope: me } } } }, { xtype: 'gridcolumn', disabled: true, width: 56, dataIndex: 'componentEcl', text: 'Revision', editor: { xtype: 'displayfield' } }, { xtype: 'gridcolumn', width: 54, dataIndex: 'qtyPer', text: 'Qty Per', editor: { xtype: 'numberfield' } }, { xtype: 'gridcolumn', width: 53, dataIndex: 'alternateFlag', text: 'Alt Flag', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', width: 76, dataIndex: 'endItemUnitNoFrom', text: 'EI Unit From', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', width: 72, dataIndex: 'endItemUnitNoThru', text: 'EI Unit Thru', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', width: 148, dataIndex: 'supercedeItemNo', text: 'Supercede Item No', editor: { xtype: 'combobox', displayField: 'item', queryMode: 'local', store: 'CurrentItemStore', valueField: 'item', listeners: { focus: { fn: me.onComboboxFocus, scope: me } } } }, { xtype: 'gridcolumn', hidden: true, width: 151, dataIndex: 'supercedeHoldOperCode', text: 'Supercede Hold Oper Code', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', hidden: true, width: 84, dataIndex: 'udfStdOpnMatl', text: 'Std Opn Matl', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'attachmentNo', text: 'AttachmentNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'attributeKey', text: 'AttributeKey' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'billType', text: 'BillType' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'bkfBin', text: 'BkfBin' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'bkfWhse', text: 'BkfWhse' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'commentFlag', text: 'CommentFlag' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'componentEclExplode', text: 'ComponentEclExplode' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'componentPlant', text: 'ComponentPlant' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'dfltDeficiencyCode', text: 'DfltDeficiencyCode' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'dfltRepairScheme', text: 'DfltRepairScheme' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'dfltSurveyAction', text: 'DfltSurveyAction' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'ecoRef', text: 'EcoRef' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'effectiveFrom', text: 'EffectiveFrom' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'effectiveThru', text: 'EffectiveThru' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'endItemEcl', text: 'EndItemEcl' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'endItemNo', text: 'EndItemNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'failureFactor', text: 'FailureFactor' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'floorstockFlag', text: 'FloorstockFlag' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'forecastFactor', text: 'ForecastFactor' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'leadTime', text: 'LeadTime' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'operSeq', text: 'Oper Seq', editor: { xtype: 'numberfield' } }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'osPercent', text: 'OsPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'parentEcl', text: 'ParentEcl' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'parentNo', text: 'ParentNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'parentPlant', text: 'ParentPlant' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'qtyLostInSetup', text: 'QtyLostInSetup' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'repairPercent', text: 'RepairPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'rotOsPercent', text: 'RotOsPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'rotRepairPercent', text: 'RotRepairPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'scrapPercent', text: 'ScrapPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'sectionCode', text: 'SectionCode' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'specDrawingNo', text: 'SpecDrawingNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'apiRecModifiedBy', text: 'ApiRecModifiedBy' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'apiRecModificationDate', text: 'ApiRecModificationDate' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'executionOrder', text: 'ExecutionOrder' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'cartItemNo', text: 'CartItemNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'cartEcl', text: 'CartEcl' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'cartFamily', text: 'CartFamily' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'schedulingConstraint', text: 'SchedulingConstraint' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'preConstraintTaktTime', text: 'PreConstraintTaktTime' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'constraintTaktTime', text: 'ConstraintTaktTime' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'postConstraintTaktTime', text: 'PostConstraintTaktTime' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'slotNo', text: 'SlotNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'positionNo', text: 'PositionNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'udfOpenMoldLife', text: 'UdfOpenMoldLife' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'udfWorkingLife', text: 'UdfWorkingLife' } ], plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1, listeners: { validateedit: { fn: me.onCellEditingValidateedit, scope: me } } }) ] } ] }, { xtype: 'panel', width: 1000, autoScroll: true, title: 'Date Effectivity Panel BOM', tabConfig: { xtype: 'tab', listeners: { click: { fn: me.onDateEffTabClick, scope: me } } }, dockedItems: [ { xtype: 'gridpanel', dock: 'top', autoRender: false, height: 815, id: 'panelBomPanel1', padding: '0,0,0,0', width: 1056, autoScroll: true, title: 'Panel BOM Maintenance Screen for Min/Max Date Effectivity', store: 'PanelBomMmStore', dockedItems: [ { xtype: 'toolbar', dock: 'top', height: 32, width: 1190, items: [ { xtype: 'button', text: 'Add BOM Line', listeners: { click: { fn: me.onAddBomRecordButtonClick1, scope: me } } }, { xtype: 'tbseparator' }, { xtype: 'button', text: 'Save Panel BOM', listeners: { click: { fn: me.onPanelSaveButtonClick1, scope: me } } }, { xtype: 'tbseparator' }, { xtype: 'combobox', id: 'customerMinMaxCombo', fieldLabel: 'Customer', labelAlign: 'right', labelWidth: 70, displayField: 'value', store: 'CustomerMinMaxLookupStore', typeAhead: true, valueField: 'id', listeners: { collapse: { fn: me.onProgramComboCollapse1, scope: me } } }, { xtype: 'tbseparator' }, { xtype: 'combobox', id: 'parentCombo1', fieldLabel: 'Parent Part No', labelAlign: 'right', labelWidth: 80, displayField: 'value', store: 'ParentLookUpStore', valueField: 'id', listeners: { collapse: { fn: me.onParentComboCollapse1, scope: me } } }, { xtype: 'tbseparator' }, { xtype: 'button', text: 'Delete Entire Panel BOM', listeners: { click: { fn: me.onDeletePanelBomButtonClick1, scope: me } } }, { xtype: 'button', text: 'Add Panel BOM', listeners: { click: { fn: me.onButtonClick1, scope: me } } } ] } ], viewConfig: { width: 1290, listeners: { itemadd: { fn: me.onViewItemAdd1, scope: me } } }, columns: [ { xtype: 'checkcolumn', dataIndex: 'deleteFlag', text: 'Delete Flag', listeners: { checkchange: { fn: me.onDeleteCheckcolumnCheckChange1, scope: me } } }, { xtype: 'gridcolumn', draggable: false, hidden: true, dataIndex: 'id', text: 'Id' }, { xtype: 'gridcolumn', width: 57, dataIndex: 'bomSeq', text: 'Bom Seq', editor: { xtype: 'numberfield', allowDecimals: false, allowExponential: false, decimalPrecision: 0 } }, { xtype: 'gridcolumn', width: 197, dataIndex: 'componentNo', text: 'Component No', editor: { xtype: 'combobox', id: 'itemNoCombo1', displayField: 'partNumber', forceSelection: true, minChars: 10, store: 'PartsLookupStore', typeAhead: true, valueField: 'partNumber', listeners: { change: { fn: me.onItemNoComboChange1, scope: me }, collapse: { fn: me.onItemNoComboCollapse1, scope: me }, expand: { fn: me.onItemNoComboExpand1, scope: me }, blur: { fn: me.onItemNoComboBlur1, scope: me } } } }, { xtype: 'gridcolumn', disabled: true, width: 56, dataIndex: 'componentEcl', text: 'Revision', editor: { xtype: 'displayfield' } }, { xtype: 'gridcolumn', width: 54, dataIndex: 'qtyPer', text: 'Qty Per', editor: { xtype: 'numberfield' } }, { xtype: 'gridcolumn', width: 53, dataIndex: 'alternateFlag', text: 'Alt Flag', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { if (!value){ return; } return Ext.Date.format(value, 'Y-m-d'); }, dataIndex: 'effectiveFrom', text: 'Effective From', editor: { xtype: 'datefield', format: 'Y-m-d' } }, { xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { if (!value){ return; } return Ext.Date.format(value, 'Y-m-d'); }, dataIndex: 'effectiveThru', text: 'Effective Thru', editor: { xtype: 'datefield', format: 'Y-m-d' } }, { xtype: 'gridcolumn', hidden: true, width: 76, dataIndex: 'endItemUnitNoFrom', text: 'EI Unit From', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', hidden: true, width: 72, dataIndex: 'endItemUnitNoThru', text: 'EI Unit Thru', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', width: 148, dataIndex: 'supercedeItemNo', text: 'Supercede Item No', editor: { xtype: 'combobox', displayField: 'item', queryMode: 'local', store: 'CurrentItemStore', valueField: 'item', listeners: { focus: { fn: me.onComboboxFocus1, scope: me } } } }, { xtype: 'gridcolumn', hidden: true, width: 151, dataIndex: 'supercedeHoldOperCode', text: 'Supercede Hold Oper Code', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', hidden: true, width: 84, dataIndex: 'udfStdOpnMatl', text: 'Std Opn Matl', editor: { xtype: 'textfield' } }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'attachmentNo', text: 'AttachmentNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'attributeKey', text: 'AttributeKey' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'billType', text: 'BillType' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'bkfBin', text: 'BkfBin' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'bkfWhse', text: 'BkfWhse' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'commentFlag', text: 'CommentFlag' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'componentEclExplode', text: 'ComponentEclExplode' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'componentPlant', text: 'ComponentPlant' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'dfltDeficiencyCode', text: 'DfltDeficiencyCode' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'dfltRepairScheme', text: 'DfltRepairScheme' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'dfltSurveyAction', text: 'DfltSurveyAction' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'ecoRef', text: 'EcoRef' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'endItemEcl', text: 'EndItemEcl' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'endItemNo', text: 'EndItemNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'failureFactor', text: 'FailureFactor' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'floorstockFlag', text: 'FloorstockFlag' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'forecastFactor', text: 'ForecastFactor' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'leadTime', text: 'LeadTime' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'operSeq', text: 'Oper Seq', editor: { xtype: 'numberfield' } }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'osPercent', text: 'OsPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'parentEcl', text: 'ParentEcl' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'parentNo', text: 'ParentNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'parentPlant', text: 'ParentPlant' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'qtyLostInSetup', text: 'QtyLostInSetup' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'repairPercent', text: 'RepairPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'rotOsPercent', text: 'RotOsPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'rotRepairPercent', text: 'RotRepairPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'scrapPercent', text: 'ScrapPercent' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'sectionCode', text: 'SectionCode' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'specDrawingNo', text: 'SpecDrawingNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'apiRecModifiedBy', text: 'ApiRecModifiedBy' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'apiRecModificationDate', text: 'ApiRecModificationDate' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'executionOrder', text: 'ExecutionOrder' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'cartItemNo', text: 'CartItemNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'cartEcl', text: 'CartEcl' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'cartFamily', text: 'CartFamily' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'schedulingConstraint', text: 'SchedulingConstraint' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'preConstraintTaktTime', text: 'PreConstraintTaktTime' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'constraintTaktTime', text: 'ConstraintTaktTime' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'postConstraintTaktTime', text: 'PostConstraintTaktTime' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'slotNo', text: 'SlotNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'positionNo', text: 'PositionNo' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'udfOpenMoldLife', text: 'UdfOpenMoldLife' }, { xtype: 'gridcolumn', hidden: true, dataIndex: 'udfWorkingLife', text: 'UdfWorkingLife' } ], plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1, listeners: { validateedit: { fn: me.onCellEditingValidateedit1, scope: me } } }) ] } ] } ] }); me.callParent(arguments); }, onEndItemTabClick: function(button, e, eOpts) { var store = Ext.getStore('PanelBomStore'); store.removeAll(); }, onAddBomRecordButtonClick: function(button, e, eOpts) { var bomStore = Ext.getStore('PanelBomStore'); var model = new app.model.PanelBomModel(); if (!Ext.getCmp('programCombo').value || !Ext.getCmp('parentCombo').value){ alert("You must select a program and panel before adding a BOM record."); return; } bomStore.add(model); //bomStore.sync(); }, onPanelSaveButtonClick: function(button, e, eOpts) { var store = Ext.getStore('PanelBomStore'); var records = store.getRange(); var dirty = false; for(var i =0; i < records.length; i++){ var rec = records[i]; var errors = []; var eclError = ""; records[i].data.parentNo = Ext.getCmp('parentCombo').value; if(rec.dirty === true){ dirty = true; } // Check qty var check = rec.data.qtyPer; if (check === null || check === "") { errors[errors.length] = "Qty Per"; } // Check Component Number check = rec.data.componentNo; if (check === null || check === "") { errors[errors.length] = "Component No"; } // Check the Bom Seq check = rec.data.bomSeq; if (check === null || check === "") { errors[errors.length] = "Bom Seq"; } // Check EI Unit From check = rec.data.endItemUnitNoFrom; if (check === null || check === "") { errors[errors.length] = "EI Unit From"; } // Check if ECL is defined check = rec.data.componentEcl; if (check === null || check === "") { eclError = "No Revision set. Please retype Component No to reattempt revision retrieval"; } if (errors.length > 0) { var errorString = "Must enter the following information for Bom Seq " + rec.data.bomSeq + ":\n" + errors.join("\n"); if (eclError !== null && eclError !== "") { errorString += "\n" + eclError; } alert(errorString); return false; } if (eclError !== null && eclError !== "") { alert(eclError); return false; } } if (dirty === true){ var w = Ext.MessageBox.wait("Updating Panel BOM Table...", 'Please Wait'); store.sync({ success: function() { alert("Changes have been applied."); }, failure: function() { alert("Unable to save changes. Please refresh page, since your session may have been invalidated. This is a known issue."); }, callback: function(){ w.hide(); store.reload(); } }); } else { alert("No changes detected for saving."); } }, onProgramComboCollapse: function(field, eOpts) { var parentStore = Ext.getCmp('parentCombo').store; var itemStore = Ext.getStore('ItemLookupStore'); if (!field.value){ alert("You must select a program"); return; } var url = "/PanelBom/jaxrs/services/getParentList?program=" + field.value; parentStore.setProxy({ type: 'rest', url: url, appendApi: false }); parentStore.load(); url2 = '/PanelBom/jaxrs/services/getItemList?program=' + field.value; itemStore.setProxy({ type: 'rest', appendApi: false, url: url2 }); itemStore.load(); }, onParentComboCollapse: function(field, eOpts) { if (!field.value){ alert("You must select a parent"); return; } var url = "/PanelBom/jaxrs/services/readBomRecords?parent=" + field.value; var bomStore = Ext.getStore('PanelBomStore'); bomStore.setProxy({ type: 'rest', api: { create: '/PanelBom/jaxrs/services/createBomRecord', read: url, update: '/PanelBom/jaxrs/services/updateBomRecord' }, timeout: 120000, appendId: false }); bomStore.load(); }, onDeletePanelBomButtonClick: function(button, e, eOpts) { var w = new app.view.DeletePanelBomWindow(); w.show(); }, onButtonClick: function(button, e, eOpts) { var w = new app.view.AddPanelBomWindow(); w.show(); }, onViewItemAdd: function(records, index, node, eOpts) { this.getView().focusRow(index); }, onDeleteCheckcolumnCheckChange: function(checkcolumn, rowIndex, checked, eOpts) { var store = Ext.getStore('PanelBomStore'); var record = store.getAt(rowIndex); if (checked === true) { record.data.id = record.data.id + .9; store.getAt(rowIndex).setDirty(); //console.log(checked + " " + rowIndex + " " + record.data.id); } if (checked === false){ record.data.id = parseInt(record.data.id); store.getAt(rowIndex).setDirty(); //console.log(checked + " " + rowIndex + " " + record.data.id); } }, onItemNoComboChange: function(field, newValue, oldValue, eOpts) { var store = Ext.getStore('PartsLookupStore'); if (newValue.length < 10){ return; } if (newValue) { newValue = newValue.toUpperCase(); } url2 = '/ProxyServices/jaxrs/part/findPartsLike?partNo=' + newValue.toUpperCase(); store.setProxy({ type: 'rest', appendApi: false, url: url2, reader: { type: 'json', root: 'parts' } }); }, onItemNoComboCollapse: function(field, eOpts) { var store = Ext.getStore('PartsRevLookupStore'); var panelStore = Ext.getStore('PanelBomStore'); var panelRecs = panelStore.getRange(); var partNumber = field.rawValue; url2 = '/ProxyServices/jaxrs/part/findPartsRevisionLike?partNo=' + field.rawValue + '&revision='; store.setProxy({ type: 'rest', appendApi: false, url: url2, reader: { type: 'json', root: 'parts' } }); var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Retrieving Revision..."}); myMask.show(); store.load({ callback: function() { myMask.hide(); }, partNumber: partNumber }); }, onItemNoComboExpand: function(field, eOpts) { var newValue = field.getValue(); if (newValue === null || newValue.length < 10){ return; } url2 = '/ProxyServices/jaxrs/part/findPartsLike?partNo=' + newValue; var store = field.getStore(); store.setProxy({ type: 'rest', appendApi: false, url: url2, reader: { type: 'json', root: 'parts' } }); store.load(); }, onItemNoComboBlur: function(component, e, eOpts) { var partStore = Ext.getStore('PartsLookupStore'); var panelStore = Ext.getStore('PanelBomStore'); var records = panelStore.getRange(); if (records !== null && records !== "" && records.length > 0) { for (var iter = 0; iter < records.length; iter++) { var rec = records[iter]; partStore.add({ partNumber: rec.data.componentNo, revision: null, description: null }); } } }, onComboboxFocus: function(component, e, eOpts) { var panelBomStore = Ext.getStore('PanelBomStore'); var currentItemStore = Ext.getStore('CurrentItemStore'); // Clear the current item store currentItemStore.loadData([], false); panelBomStore.each(function(item) { if (typeof item.data.componentNo != "undefined" && item.data.componentNo !== null && item.data.componentNo !== '') { currentItemStore.add({ item: item.data.componentNo }); } }); }, onCellEditingValidateedit: function(editor, e, eOpts) { var bomSeqExists = false; var duplicateParts = false; if (e.field === "bomSeq") { e.store.each(function(row) { if (row !== e.record && row.data.bomSeq === e.value) { bomSeqExists = true; } }); } else if (e.field === "componentNo") { e.store.each(function(row) { if (row !== e.record && row.data.componentNo === e.value) { duplicateParts = e.value; } }); } if (bomSeqExists) { alert("Cannot enter the same Bom Seq as another row"); return false; } else if (duplicateParts !== false) { alert("Cannot enter the same Component No multiple times. Part: " + duplicateParts); return false; } return true; }, onDateEffTabClick: function(button, e, eOpts) { var store = Ext.getStore('PanelBomStore'); store.removeAll(); }, onAddBomRecordButtonClick1: function(button, e, eOpts) { var panel = Ext.getCmp('panelBomPanel1'); var mod = new app.model.PanelBomModel(); if (!Ext.getCmp('customerMinMaxCombo').value || !Ext.getCmp('parentCombo1').value){ alert("You must select a Customer and Panel before adding a BOM record."); return; } panel.store.insert(0,mod); }, onPanelSaveButtonClick1: function(button, e, eOpts) { var store = Ext.getStore('PanelBomMmStore'); var records = store.getRange(); var dirty = false; for(var i =0; i < records.length; i++){ var rec = records[i]; var errors = []; var eclError = ""; records[i].data.parentNo = Ext.getCmp('parentCombo').value; if(rec.dirty === true){ dirty = true; } // Check qty var check = rec.data.qtyPer; if (check === null || check === "") { errors[errors.length] = "Qty Per"; } // Check Component Number check = rec.data.componentNo; if (check === null || check === "") { errors[errors.length] = "Component No"; } // Check the Bom Seq check = rec.data.bomSeq; if (check === null || check === "") { errors[errors.length] = "Bom Seq"; } // Check EI Unit From /* check = rec.data.endItemUnitNoFrom; if (check === null || check === "") { errors[errors.length] = "EI Unit From"; } */ // Check Effective From check = rec.data.effectiveFrom; if (check === null || check === "") { errors[errors.length] = "Effective From"; } // Check if ECL is defined check = rec.data.componentEcl; if (check === null || check === "") { eclError = "No Revision set. Please retype Component No to reattempt revision retrieval"; } if (errors.length > 0) { var errorString = "Must enter the following information for Bom Seq " + rec.data.bomSeq + ":\n" + errors.join("\n"); if (eclError !== null && eclError !== "") { errorString += "\n" + eclError; } alert(errorString); return false; } if (eclError !== null && eclError !== "") { alert(eclError); return false; } } if (dirty === true){ var w = Ext.MessageBox.wait("Updating Panel BOM Table...", 'Please Wait'); store.sync({ success: function() { alert("Changes have been applied."); }, failure: function() { alert("Unable to save changes. Please refresh page, since your session may have been invalidated. This is a known issue."); }, callback: function(){ w.hide(); store.reload(); } }); } else { alert("No changes detected for saving."); } }, onProgramComboCollapse1: function(field, eOpts) { var parentStore = Ext.getCmp('parentCombo1').store; var itemStore = Ext.getStore('ItemLookupStore'); if (!field.value){ alert("You must select a Customer"); return; } var url = "/PanelBom/jaxrs/services/getParentListMinMax?customer=" + field.value; parentStore.setProxy({ type: 'rest', url: url, appendApi: false }); parentStore.load(); url2 = '/PanelBom/jaxrs/services/getItemList?program=' + field.value; itemStore.setProxy({ type: 'rest', appendApi: false, url: url2 }); itemStore.load(); }, onParentComboCollapse1: function(field, eOpts) { if (!field.value){ alert("You must select a parent"); return; } var url = "/PanelBom/jaxrs/services/readBomRecords?parent=" + field.value; var bomStore = Ext.getStore('PanelBomMmStore'); bomStore.setProxy({ type: 'rest', api: { create: '/PanelBom/jaxrs/services/createBomRecord', read: url, update: '/PanelBom/jaxrs/services/updateBomRecord' }, timeout: 120000, appendId: false }); bomStore.load(); }, onDeletePanelBomButtonClick1: function(button, e, eOpts) { var w = new app.view.DeletePanelBomWindow(); w.show(); }, onButtonClick1: function(button, e, eOpts) { var w = new app.view.AddPanelBomWindow(); w.show(); }, onViewItemAdd1: function(records, index, node, eOpts) { this.getView().focusRow(index); }, onDeleteCheckcolumnCheckChange1: function(checkcolumn, rowIndex, checked, eOpts) { var store = Ext.getStore('PanelBomStore'); var record = store.getAt(rowIndex); if (checked === true) { record.data.id = record.data.id + .9; store.getAt(rowIndex).setDirty(); //console.log(checked + " " + rowIndex + " " + record.data.id); } if (checked === false){ record.data.id = parseInt(record.data.id); store.getAt(rowIndex).setDirty(); //console.log(checked + " " + rowIndex + " " + record.data.id); } }, onItemNoComboChange1: function(field, newValue, oldValue, eOpts) { var store = Ext.getStore('PartsLookupStore'); if (newValue.length < 10){ return; } if (newValue) { newValue = newValue.toUpperCase(); } url2 = '/ProxyServices/jaxrs/part/findPartsLike?partNo=' + newValue.toUpperCase(); store.setProxy({ type: 'rest', appendApi: false, url: url2, reader: { type: 'json', root: 'parts' } }); }, onItemNoComboCollapse1: function(field, eOpts) { var store = Ext.getStore('PartsRevLookupStore'); var panelStore = Ext.getStore('PanelBomMmStore'); var panelRecs = panelStore.getRange(); var partNumber = field.rawValue; url2 = '/ProxyServices/jaxrs/part/findPartsRevisionLike?partNo=' + field.rawValue + '&revision='; store.setProxy({ type: 'rest', appendApi: false, url: url2, reader: { type: 'json', root: 'parts' } }); var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Retrieving Revision..."}); myMask.show(); store.load({ callback: function() { myMask.hide(); }, partNumber: partNumber }); }, onItemNoComboExpand1: function(field, eOpts) { var newValue = field.getValue(); if (newValue === null || newValue.length < 10){ return; } url2 = '/ProxyServices/jaxrs/part/findPartsLike?partNo=' + newValue; var store = field.getStore(); store.setProxy({ type: 'rest', appendApi: false, url: url2, reader: { type: 'json', root: 'parts' } }); store.load(); }, onItemNoComboBlur1: function(component, e, eOpts) { var partStore = Ext.getStore('PartsLookupStore'); var panelStore = Ext.getStore('PanelBomMmStore'); var records = panelStore.getRange(); if (records !== null && records !== "" && records.length > 0) { for (var iter = 0; iter < records.length; iter++) { var rec = records[iter]; partStore.add({ partNumber: rec.data.componentNo, revision: null, description: null }); } } }, onComboboxFocus1: function(component, e, eOpts) { var panelBomStore = Ext.getStore('PanelBomStore'); var currentItemStore = Ext.getStore('CurrentItemStore'); // Clear the current item store currentItemStore.loadData([], false); panelBomStore.each(function(item) { if (typeof item.data.componentNo != "undefined" && item.data.componentNo !== null && item.data.componentNo !== '') { currentItemStore.add({ item: item.data.componentNo }); } }); }, onCellEditingValidateedit1: function(editor, e, eOpts) { var bomSeqExists = false; var duplicateParts = false; if (e.field === "bomSeq") { e.store.each(function(row) { if (row !== e.record && row.data.bomSeq === e.value) { bomSeqExists = true; } }); } else if (e.field === "componentNo") { e.store.each(function(row) { if (row !== e.record && row.data.componentNo === e.value) { duplicateParts = e.value; } }); } if (bomSeqExists) { alert("Cannot enter the same Bom Seq as another row"); return false; } else if (duplicateParts !== false) { alert("Cannot enter the same Component No multiple times. Part: " + duplicateParts); return false; } return true; }});Here is the model:Ext.define('app.model.PanelBomModel', { extend: 'Ext.data.Model', fields: [ { name: 'alternateFlag' }, { name: 'attachmentNo', type: 'int', useNull: true }, { name: 'attributeKey', type: 'int', useNull: true }, { name: 'billType', useNull: true }, { name: 'bkfBin', useNull: true }, { name: 'bkfWhse', useNull: true }, { name: 'bomSeq', type: 'int', useNull: true }, { name: 'commentFlag', useNull: true }, { name: 'componentEcl', useNull: true }, { name: 'componentEclExplode', useNull: true }, { name: 'componentNo', useNull: true }, { name: 'componentPlant', useNull: true }, { name: 'dfltDeficiencyCode', useNull: true }, { name: 'dfltRepairScheme', useNull: true }, { name: 'dfltSurveyAction', useNull: true }, { name: 'ecoRef', useNull: true }, { dateFormat: 'Y-m-d', dateWriteFormat: '', name: 'effectiveFrom', type: 'date', useNull: true }, { dateFormat: 'Y-m-d', dateWriteFormat: '', name: 'effectiveThru', type: 'date', useNull: true }, { name: 'endItemEcl', useNull: true }, { name: 'endItemNo', useNull: true }, { name: 'endItemUnitNoFrom', useNull: true }, { name: 'endItemUnitNoThru', useNull: true }, { name: 'failureFactor', type: 'float', useNull: true }, { name: 'floorstockFlag', useNull: true }, { name: 'forecastFactor', type: 'float', useNull: true }, { name: 'leadTime', type: 'int', useNull: true }, { name: 'operSeq', type: 'int', useNull: true }, { name: 'osPercent', type: 'float', useNull: true }, { name: 'parentEcl', useNull: true }, { name: 'parentNo', useNull: true }, { name: 'parentPlant', useNull: true }, { name: 'qtyLostInSetup', type: 'float', useNull: true }, { name: 'qtyPer', type: 'float', useNull: true }, { name: 'repairPercent', type: 'float', useNull: true }, { name: 'rotOsPercent', type: 'float', useNull: true }, { name: 'rotRepairPercent', type: 'float', useNull: true }, { name: 'scrapPercent', type: 'float', useNull: true }, { name: 'sectionCode', useNull: true }, { name: 'specDrawingNo', useNull: true }, { name: 'apiRecModifiedBy', useNull: true }, { name: 'apiRecModificationDate', useNull: true }, { name: 'executionOrder', type: 'int', useNull: true }, { name: 'cartItemNo', useNull: true }, { name: 'cartEcl', useNull: true }, { name: 'cartFamily', useNull: true }, { name: 'schedulingConstraint', useNull: true }, { name: 'preConstraintTaktTime', type: 'float', useNull: true }, { name: 'constraintTaktTime', type: 'float', useNull: true }, { name: 'postConstraintTaktTime', type: 'float', useNull: true }, { name: 'slotNo', type: 'int', useNull: true }, { name: 'positionNo', type: 'int', useNull: true }, { name: 'supercedeItemNo', useNull: true }, { name: 'supercedeHoldOperCode', useNull: true }, { name: 'udfOpenMoldLife', type: 'int', useNull: true }, { name: 'udfWorkingLife', type: 'int', useNull: true }, { name: 'udfStdOpnMatl', useNull: true }, { name: 'deleteFlag', persist: false }, { name: 'id' } ]});And the store:Ext.define('app.store.PanelBomStore', { extend: 'Ext.data.Store', requires: [ 'app.model.PanelBomModel' ], constructor: function(cfg) { var me = this; cfg = cfg || {}; me.callParent([Ext.apply({ autoLoad: false, model: 'app.model.PanelBomModel', storeId: 'PanelBomStore', proxy: { type: 'rest', api: { create: '/PanelBom/jaxrs/services/createBomRecord', read: '/PanelBom/jaxrs/services/readBomRecords', update: '/PanelBom/jaxrs/services/updateBomRecord' }, timeout: 120000, appendId: false }, listeners: { load: { fn: me.onStoreLoad, scope: me } } }, cfg)]); }, onStoreLoad: function(store, records, successful, eOpts) { var partStore = Ext.getStore('PartsLookupStore'); if (records !== null && records !== "" && records.length > 0) { for (var iter = 0; iter < records.length; iter++) { var rec = records[iter]; partStore.add({ partNumber: rec.data.componentNo, revision: null, description: null }); } } }});and the other store:Ext.define('app.store.PanelBomMmStore', { extend: 'Ext.data.Store', requires: [ 'app.model.PanelBomModel' ], constructor: function(cfg) { var me = this; cfg = cfg || {}; me.callParent([Ext.apply({ autoLoad: false, model: 'app.model.PanelBomModel', storeId: 'PanelBomMmStore', proxy: { type: 'rest', api: { create: '/PanelBom/jaxrs/services/createBomRecord', read: '/PanelBom/jaxrs/services/readBomRecords', update: '/PanelBom/jaxrs/services/updateBomRecord' }, timeout: 120000, appendId: false }, listeners: { load: { fn: me.onStoreLoad, scope: me } } }, cfg)]); }, onStoreLoad: function(store, records, successful, eOpts) { var partStore = Ext.getStore('PartsLookupStore'); if (records !== null && records !== "" && records.length > 0) { for (var iter = 0; iter < records.length; iter++) { var rec = records[iter]; partStore.add({ partNumber: rec.data.componentNo, revision: null, description: null }); } } }});

jdkhamba
2 Jan 2016, 3:28 PM
Didn't ask for your entire application source code :)). A small working example would suffice ;)

drgaryholland
2 Jan 2016, 4:27 PM
Sorry about that, this is my first time basically posting my code on this forum, again my Apologies. I have a data grid, a model and store with a button that when clicked adds a record to the store. I have tried both insert and add methods to add a record to the store. I have never run into this issue , I have written many apps with the same logic without a problem. In fact I didn't run into this issue until I transformed the panel into a tabbed panel. I don't think the problem is with adding a record to the store, it's after the record is added to the store and rendering the new record in the grid is the problem but not sure.

drgaryholland
2 Jan 2016, 4:29 PM
How do you post code on the forum in a format that suits the eyes?

jdkhamba
2 Jan 2016, 4:32 PM
You could use code tags around the code ... by clicking on the "#" symbol in the html editor before posting by highlighting your code then clicking on the symbol. Better yet post a working example in a fiddle:

fiddle.sencha.com

No reason why a tabbed panel should cause any problem.. You are probably missing something trivial. Which version of ExtJS are you using?

drgaryholland
2 Jan 2016, 5:30 PM
I am using version 4.2, I really appreciate your help on this btw.

jdkhamba
2 Jan 2016, 5:34 PM
No problem. Just post a fiddle demonstrating your issue and then some one can help you fix it.

drgaryholland
4 Jan 2016, 9:34 AM
Found the issue, I had converted a panel to a tabbed panel and when adding a new row an event listener referenced this.getView where for some reason this was scoped to the viewport. Once I changed it to reference the grid panel everything worked.