Unfortunately I don't know how to make an MVVM Modern app work in Fiddle so I'll have to post my code here, but here's a simple app that demonstrates the problem I'm having.
App.js
Ext.application({
extend: 'simple.Application',
name: 'simple',
requires: [
// This will automatically load all classes in the simple namespace
// so that application classes do not need to require each other.
'simple.*'
],
// The name of the initial view to create.
mainView: 'simple.view.main.Main'
});
app/Application.js
Ext.define('simple.Application', {
extend: 'Ext.app.Application',
name: 'simple',
//my understanding is that I need to load my stores here in Application.js
//as opposed to in the controller?
requires: ['simple.store.barcodeInfoStore'],
stores: ['barcodeInfoStore']
});
app/model/Base.js
Ext.define('simple.model.Base', {
extend: 'Ext.data.Model',
schema: {
namespace: 'simple.model'
}
});
app/model/barcodeInfoModel.js
Ext.define('simple.model.barcodeInfoModel', {
extend: 'simple.model.Base',
fields: [
{name: 'barcode', type: 'string'},
{name: 'status', type: 'string'}
]
});
app/store/barcodeInfoStore.js
Ext.define('simple.store.barcodeInfoStore', {
extend: 'Ext.data.Store',
alias: 'store.barcodeInfoStore',
model: 'simple.model.barcodeInfoModel',
data: {
items: [//here I'm just loading some dummy data to start
{barcode:'12345678',status:'GOOD'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
/app/view/main/Main.js
Ext.define('simple.view.main.Main', {
extend: 'Ext.form.Panel',
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
items: [{ xtype: 'formpanel',
reference: 'form',
items: [
{ xtype:'textfield',
label: 'Barcode',
placeholder: 'Barcode',
name: 'barcodeField',
reference: 'barcodeField',
allowBlank: false,
autoComplete: false
},
{ xtype:'textfield',
label: 'Status',
placeholder: 'Status',
name: 'statusField',
reference: 'statusField',
allowBlank: false,
autoComplete: false
},
{ xtype:'displayfield',
label: 'Fixed Data Bound Field',
bind: {
//test display field bound to some hard coded data
//in my viewModel just to verify that that works
//(it does)
value: '{fixedDataBarcode}'
}
},
{ xtype:'displayfield',
label: 'Store Data Bound Field',
bind: {
//test display field that I want to bind to store data
//(this DOES NOT work)
value: '{myStore.barcode}'
}
},
{
xtype:'button',
text:'Update',
handler:'onUpdateClicked'
}
]
}
]
});
app/view/main/MainController.js
Ext.define('simple.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
//get a reference to my store and update the values in it
//with the values from the form
onUpdateClicked: function() {
console.log('onUpdateClicked');
var form = this.lookupReference('form');
var formValues = form.getValues();
var store = Ext.getStore('barcodeInfoStore');
var data = store.getAt(0).data;
data.barcode = formValues.barcodeField;
data.status = formValues.statusField;
console.log('Store Data Is Now ' + data.barcode + ', ' + data.status);
}
});
app/view/main/MainModel.js
Ext.define('simple.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
//this is where I'm trying to get a reference to my store
//so I can bind data to it's values, but am not sure of the correct way
//to do this?
stores:{
myStore: {
data: Ext.getStore('barcodeInfoStore')
}
},
//this is just some hard coded data to verify that I can bind to
//data in my viewModel
data: {
name: 'simple',
fixedDataBarcode: '11111111'
}
});
When I load my app I see the interface, and can see my 2 displayFields, and bound data from my hard coded data in the viewModel, but not seeing the "12345678" I was hoping to see from my store data
I then enter some values in the form fields and click UPDATE and can see that I'm in my controller's function and that the data has been updated, and this is where I'd expect to see my "Store Data Bound Field" in my form updated with the value 55555555
While this is just a simple app to demonstrate my problem, ultimately what I am trying to do is to receive a barcode into the barcode field, query a database via Ajax to get it's data, update the store with that data and display/use that data for further processing.
So I guess my questions are
- Why doesn't this work as is - I'm sure I have something wrong if you can help me correct it?
- Is this method the best way to approach what I'm trying to accomplish or is there a better way?
UPDATE:
I made some progress. I changed my viewModel stores definition to
stores:{
myStore: {
//data: Ext.getStore('barcodeInfoStore')
type: 'barcodeInfoStore'
}
},
and added a formula
formulas:{
getData: function(get){
console.log('in getData');
return Ext.getStore('barcodeInfoStore').first().data;
}
},
and my form field binding to
{ xtype:'displayfield',
label: 'Store Data Bound Field',
bind: {
value: '{getData.barcode}'
}
}
and now when I load my form I see the bound data from the store
The only issue now is that when I enter a barcode/status in my form and click UPDATE, which updates the data in the store, the data in the bound field doesn't update to the new data
See Question&Answers more detail:
os 
