Hey all,
So I've been struggling with the 'correct' approach to handling data in the MVVM Approach. I get it in theory and like parts, but am finding the docs lacking in areas.
I've been going with a blend of MVC and MVVM. I created Models and Stores for each request and use that as a global Model and Store as these data sets are not only used with one view and seems redundant to create the same store and proxy for each ViewModel. I am having a little confusion about how to use the ViewModel to mesh the data from multiple 'global' stores to be used in the Views.
This is just how I've found so far to best deal with the data. I'm totally open to suggestions.
So one example scenario that's giving me issues..
I have 2 stores one is loading a list of applications and the other is loading the group names assigned to define a user and an admin.
All I'm trying to do here is load a data view with the application data and group names associated with the application.
Below is just one of many attempts I have made. I've looked at the hasOne, manyToMany, links, multiple stores in stores obj in viewModel (this could work if I could find a way to access both stores at same time from view) for the assigning relationship between the two. I have a bunch of relational situations like this and this is the simplest of them.
So if anyone has any pointers I'd greatly appreciate it.
Code:
Ext.define('App.model.Application', {
extend: 'App.model.Base',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'nickname',
type: 'string'
}, {
name: 'description',
type: 'string'
}, {
name: 'base_url',
type: 'string'
}, {
name: 'route',
type: 'string'
}, {
name: 'app_icon_path',
type: 'string'
}, {
name: 'accessRuleId',
reference: {
type: 'AccessRule',
role: 'AccessRule'
}
}]
});
Code:
Ext.define('App.model.AccessRule', {
extend: 'App.model.Base',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'user',
type: 'string'
}, {
name: 'admin',
type: 'string'
}]
});
Code:
Ext.define('Pnm.view.directory.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.directory-main',
data: {
name: 'Application Directory'
},
formulas: {},
links: {},
stores: {
applicationList: {
storeId:'Applications',
// model: 'App.model.Application',
model:'Application',
autoLoad: true
},
}
});
Code:
Ext.define('App.view.directory.Main', {
extend: 'Ext.view.View',
xtype: 'app-directory',
requires: [
'App.view.directory.MainController',
'App.view.directory.MainModel'
],
controller: 'directory-main',
viewModel: {
type: 'directory-main'
},
bind: {
store: '{applicationList}'
},
width: '100%',
height: '100%',
itemSelector: 'div.directory-item',
emptyText: 'No apps available',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="directory-item">',
'<div>{name}</div>',
'<div>{nickname}</div>',
'<div>{description}</div>',
'<div>{base_url}</div>',
'<div>{route}</div>',
'<div>{app_icon_path}</div>',
'<div>{accessRuleId.user}</div>',
'<div>{accessRuleId.admin}</div>',
'</div>',
'</tpl>'
)
});