Results 1 to 3 of 3

Thread: Combine Stores for use in ViewModels for View specific rendering?

  1. #1
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    64
    Answers
    2

    Default Combine Stores for use in ViewModels for View specific rendering?

    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>'
        )
    });
    Shayne Trosdahl
    @Trozdol
    CodePen

  2. #2
    Sencha User dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,748
    Answers
    55

    Default

    @Shayne - If you want to sketch out a fiddle that would help anyone that has some cycles to fork it and play with it...
    Don Griffin

    "Use the source, Luke!"

  3. #3
    Sencha User dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,748
    Answers
    55

    Default

    I'd recommend just putting all the classes in order in the main js file when using fiddle... much easier to play with that way
    Don Griffin

    "Use the source, Luke!"

Similar Threads

  1. Replies: 2
    Last Post: 26 Jan 2015, 7:18 AM
  2. Combine 2 stores into 1 dataview
    By ahcnse in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 20 Dec 2012, 10:15 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •