I have a grid which i am binding to store and I am using MVVM. Inside my view model i have formula that checks for store dirty which returns true/false which is bind to save button. When i make any change to any cell it should immediately trigger the change event and my save button should be enabled. Which is not working.
Instead what is happening is after making change i have to click elsewhere and my save button is getting enabled.
Here is how my binding looks.
This is inside a panal.
items: [
{
margin : '0 0 0 0',
xtype : 'grid',
reference:'benefitPlanGrid',
id: 'benefitPlanGrid',
autoHeight: true,
modelValidation: true,
bind: {
store: '{benefitPlanStore}'
},
listeners: {
beforeselect: 'onBenefitPlanGridBeforeSelect'
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1,
pluginId: 'cellEditing',
listeners: {
beforeedit : 'onBeforeEdit',
afteredit: 'onAfterEdit'
}
})
],
columns: [{
text: 'Product Type',
flex: 1.25,
sortable: false,
dataIndex: 'prodTypCd',
reference: 'prodTypCd',
align: 'center',
editor:{
xtype:'combobox',
id: 'cboField1',
editable:false,
triggerAction: 'all',
valueField: 'prodTypeCode',
displayField: 'prodTypeCode',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['prodTypeCode'],
storeId:'benefitPlanComboStore'
}),
bind: '{currentBenefitPlan.prodTypCd}',
listeners : {
focus : 'onProductTypeComboFocus'
}
}
}, {
text: 'Plan Nbr',
flex: 1,
sortable: false,
dataIndex: 'benPlanNbr',
reference: 'benPlanNbr',
align: 'center',
editor :{
xtype:'textfield',
bind: '{currentBenefitPlan.benPlanNbr}',
allowBlank: false
}
}, {
text: 'Plan Code',
flex: 1,
sortable: false,
dataIndex: 'benPlanAbbrCd',
reference: 'benPlanAbbrCd',
id: 'benPlanAbbrCd',
align: 'center',
editor :{
xtype : 'textfield',
bind: '{currentBenefitPlan.benPlanAbbrCd}',
allowBlank: false
}
},
{
text: 'Plan Description',
flex: 2,
sortable: false,
dataIndex: 'planDesc',
reference: 'planDesc',
id: 'planDesc',
align: 'left',
editor : {
xtype : 'textfield',
bind: '{currentBenefitPlan.planDesc}',
allowBlank: false
}
},
{
text: 'Effective Date',
flex: 1.25,
sortable: false,
dataIndex: 'effDt',
xtype: 'datecolumn',
align: 'center',
editor: {
xtype: 'datefield',
allowBlank: false,
bind: '{currentBenefitPlan.effDt}'
},
renderer: function(value){
if (Ext.isEmpty(value)) {
return '00/00/0000';
}
return Ext.Date.format(value, 'm/d/Y');
}
},
{
text: 'Last Offer Date',
flex: 1.3,
sortable: false,
dataIndex: 'lastOfferDt',
xtype: 'datecolumn',
align: 'center',
editor: {
xtype: 'datefield',
allowBlank: false,
bind: '{currentBenefitPlan.lastOfferDt}'
},
renderer: function(value){
if (Ext.isEmpty(value)|| value === null) {
return '00/00/0000';
}
return Ext.Date.format(value, 'm/d/Y');
}
}
]
}]
My view Model Looks Something likes this:
Ext.define('BenefitPlanViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.benefitplan',
requires: [
'BSCORP.model.BenefitPlan',
'BSCORP.store.BenefitPlans'
],
data: {
//modifiedItems:[]
benefitPlanCount:0
},
links: {
newBenefitPlan: {
type: 'BSCORP.model.BenefitPlan',
create: true
}
},
stores: {
benefitPlanStore: {
type: 'benefitPlanStore',
autoLoad: false // false because we will load this onShow
//,data: [{}, {}]
}
},
formulas: {
statusText: {
get: function(get) {
var lcCount = get('benefitPlanCount')
return lcCount +' Benefit Plans Successfully Retrieved.'
}
},
currentBenefitPlan: {
bind: {
bindTo: '{benefitPlanGrid.selection}',
deep: true
},
get: function(benefitplan) {
return benefitplan
},
set: function(benefitplan) {
if (!benefitplan.isModel) {
benefitplan = this.get('benefitPlanStore').getById(benefitplan)
}
this.set('currentBenefitPlan', benefitplan)
}
},
storeDirty: {
bind: {
bindTo: '{currentBenefitPlan}',
deep: true
},
get: function(benefitplan) {
theStore = this.get('benefitPlanStore')
var isDirty = false;
if(theStore.getModifiedRecords().length>0){
isDirty = true
}
return isDirty;
}
}
}
});
I am binding save button something like this :
xtype: 'button',
text: 'Save',
id: 'btnSave',
reference:'benPlanSaveBtn',
disabled:true,
style: 'padding: 4px 3px 4px;',
listeners:{
click : 'onSave'
},
bind: {
disabled: '{!storeDirty}'
}
this works fine when i modify any grid cell and clicks outside or tab out. But it is not working while i am modifying item ie change event.
Binding is not working properly while making change to grid cell.
Aucun commentaire:
Enregistrer un commentaire