How to load non model data in ExtJS viewmodel?

Question

We've been slowly getting accustomed to ExtJS and we recently started using view models to bind data to our form panels. In general we are trying to keep our ExtJS models consistent with our backend java models, and any conversion required is done via view model formulas. When viewing general data this works perfectly however when we want to show more specific data that don't really exist in any kind of model, we are not sure how to approach their loading and creation in the client. For example:

I have a folder model with id and description properties. When loading a folder model via a read request the model loads the description from the database etc. Same thing with a User model. Two properties id and username. My question is, what if I have a form panel where I show the user and his associated folder. As far as the database layer is concerned, there is a 1:1 table where a user id is connected to a folder id to match the user and his personal folder. However we do not have this information available in any of the models. There is a specific service called getUserFolder which returns a folder object for the specific user id given. How should I put this in my panel's view model and how do I tackle the loading process?

Should I create a new model representing the table and use a get request to get the association, then use formulas to get the matched folder id for the given user? Should I just use a normal Ext.Ajax.request to get a folder id and then load the folder model? Should I create a general service that returns all the data (user and folder) and then match them in the client side on the request callback via setData of both models? What is the best practice?

TL;DR: Loading model data in viewmodels works fine but how to tackle loading non-model data in view models? They are only required in specific scenarios and are not included in the model's creation.

Answer 1

Your task has very little to do with view. It's all model, data model :) There is a concept of associations in ExtJS, including the 1:1 scenario. So I'd recommend to look into it.

Answer 2

Data binding and the ViewModel that powers it are powerful additions to Ext JS.

Ext.create('Ext.panel.Panel', {
    title: 'Simple Form',

    viewModel: {
        type: 'test'
    },

    layout: 'form',
    defaultType: 'textfield',

    items: [{
        fieldLabel: 'First Name',
        bind: '{firstName}' // uses "test" ViewModel from parent
    },{
        fieldLabel: 'Last Name',
        bind: '{lastName}'
    }]
});