Results 1 to 4 of 4

Thread: can't get MVVM with json store working

  1. #1

    Default Answered: can't get MVVM with json store working

    I am new to Extjs and MVVM. I am created a simple app from sencha cmd and trimmed it down, but I still cannot figure out what is wrong with my code.

    What I am having trouble with is understanding where all these defined components are being created and where they are being used. I also don't understand when to use xtype, alias, or the fully qualified class name. Most importantly, I don't know why nothing shows up in my grid and I do not know how to debug it to figure this out. I have looked at a lot of tutorials and examples, but I am still not getting it. I am signed up for Sencha training 2 weeks from now, but I could use some help before then.

    Notes: I am currently trying to use a global store, but I may change it later to something more local. Additionally, The store has many fields, but I only want to bind a the DOC_ID and DOC_NAME to the grid at this time.

    Here is my code:

    app/Application.js
    Code:
    Ext.define('extjs6.Application', {
        extend: 'Ext.app.Application',
        
        name: 'extjs6',
    
    
        stores: [
            // TODO: add global / shared stores here
            'Documents'
        ],
        
        launch: function () {
            // TODO - Launch the application
        }
    
    
    });
    app/model/Document.js
    Code:
    Ext.define('Document', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DOC_ID',
            type: 'int'
        }, {
            name: 'DOC_NAME',
            type: 'string'
        }, {
            name: 'DOC_DESC',
            type: 'string'
        }, {
            name: 'DOC_REVISION',
            type: 'string'
        }, {
            name: 'DOC_AUTO_REVISION',
            type: 'string'
        }, {
            name: 'DOC_KEYWORDS',
            type: 'string'
        }, {
            name: 'DOC_CREATED_BY',
            type: 'int'
        }, {
            name: 'DOC_CREATED_BY_NAME',
            type: 'string'
        }, {
            name: 'AUDIT_ID',
            type: 'int'
        }, {
            name: 'MODIFIED_ACTION_TYPE',
            type: 'int'
        }, {
            name: 'MODIFIED_DATE',
            type: 'date'
        }, {
            name: 'MODIFIED_BY_TECH_ID',
            type: 'int'
        }, {
            name: 'MODIFIED_REASON',
            type: 'string'
        }, {
            name: 'PREV_AUDIT_ID',
            type: 'int'
        }, {
            name: 'CFG_REC_STATUS',
            type: 'int'
        }, {
            name: 'CLIENT_ADDR',
            type: 'string'
        }, {
            name: 'CRC',
            type: 'string'
        }, {
            name: 'INITIAL_RECORD_ID',
            type: 'int'
        }, {
            name: 'MARKED_DELETED',
            type: 'int'
        }, {
            name: 'IN_DROPDOWNS',
            type: 'int'
        }, {
            name: 'SITE_ID',
            type: 'int'
        }, {
            name: 'USER_SESSION_ID',
            type: 'int'
        }, {
            name: 'CAT_ID',
            type: 'string'
        }, {
            name: 'CAT_NAME',
            type: 'string'
        }, {
            name: 'LINK_HREF',
            type: 'string'
        }, {
            name: 'FILE_NAME',
            type: 'string'
        }, {
            name: 'DOC_TYPE',
            type: 'int'
        }, {
            name: 'FILE_TYPE',
            type: 'int'
        }, {
            name: 'LINK_TYPE',
            type: 'int'
        }, {
            name: 'IS_PENDING',
            type: 'int'
        }]
    });
    app/store/Documents.js
    Code:
    Ext.define('extjs6.store.Documents', {
        extend: 'Ext.data.Store',
        alias: 'store.documents',
    
    
        requires: [
            'Document'
        ],
    
    
        storeId: 'documents',
        model: 'Document',
    
    
        proxy: {
            type: 'ajax',
            url: '/app/store/documents.json',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        },
    
    
        autoLoad: true
    });
    app/store/documents.json
    Code:
    {
        "data": {
            "DOC_ID": 1,
            "DOC_NAME": "CG Change Column",
            "DOC_DESC": "CG Change Column",
            "DOC_REVISION": "1.2",
            "DOC_KEYWORDS": "GC Video",
            "DOC_CREATED_BY": 5,
            "DOC_TYPE": 2,
            "FILE_NUMBER": 1,
            "FILE_NAME": "C:\\Training_Share\\TEMP\\Changing_GC_Column.mp4",
            "FILE_EXTENSION": ".mp4",
            "FILE_MIMETYPE": "video/mp4",
            "FILE_LENGTH": 8375105,
            "FILE_TEXT": "",
            "FILE_TYPE": 5,
            "LINK_HREF": "",
            "LINK_OPTION": 0,
            "LINK_METHOD": "",
            "LINK_AUTH_TYPE": 0,
            "LINK_AUTH_USER": "",
            "LINK_AUTH_PASS": "",
            "LINK_AUTH_SALT": "",
            "PENDING_CAT_ID": "1",
            "DOC_CREATED_BY_NAME": "wmcneil",
            "HAS_FILE": true,
            "HAS_LINK": false,
            "LINK_TYPE": 0,
            "IS_PENDING": 0,
            "AUDIT_ID": 1281035,
            "MODIFIED_ACTION_TYPE": 3,
            "MODIFIED_DATE": "2013-08-04 15:35",
            "MODIFIED_BY_TECH_ID": 5,
            "MODIFIED_REASON": "sdfs",
            "PREV_AUDIT_ID": 1280387,
            "CRC": "ecf4160d18d51eb83cfedb2a86bb088a",
            "INITIAL_RECORD_ID": 1280387,
            "USER_SESSION_ID": 62,
            "CAT_ID": "1",
            "CAT_NAME": "SOP Documents"
        }
    }
    classic/src/view/main/Main.js
    Code:
    Ext.define('extjs6.view.main.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'app-main',
    
    
        requires: [
            'Ext.plugin.Viewport',
            'Ext.window.MessageBox',
            'extjs6.view.foo.bar'
        ],
    
    
        controller: 'foo-bar',
        viewModel: 'foo-bar',
    
    
        items: [
        {
            title: 'Foo Bar',
            items: {
                xtype: 'bar'
            }
        }]
    });
    app/view/foo/bar.js
    Code:
    Ext.define('extjs6.view.foo.bar',{
        extend: 'Ext.grid.Panel',
        xtype: 'bar',
    
    
        requires: [
            'extjs6.view.foo.barController',
            'extjs6.view.foo.barModel'
        ],
    
    
        controller: 'foo-bar',
        viewModel: {
            type: 'foo-bar'
        },
    
    
        title : 'Foo Bar Panel',
        
        columns: [
            { 
                text      : 'DOC_ID',  
                dataIndex : 'DOC_ID' 
            },
            { 
                text      : 'DOC_NAME', 
                dataIndex : 'DOC_NAME', 
                flex      : 1 
            }
        ],
    
    
        bind: {
            store: '{documents}'
        }
    });
    app/view/foo/barController.js
    Code:
    Ext.define('extjs6.view.foo.barController', {    extend: 'Ext.app.ViewController',
        alias: 'controller.foo-bar'
    });
    app/view/foo/barModel.js
    Code:
    Ext.define('extjs6.view.foo.barModel', {
        extend: 'Ext.app.ViewModel',
        alias: 'viewmodel.foo-bar',
        
        requires: [
            'Document',
        ],
    
    
        stores:{
            data:{
                autoLoad: true,
                model: 'Document'
            }
        }
    
    
    });

  2. You define both - global MVC store ('Documents') and MVVM store in your viewModel ('data'). Global MVC store is not used and you are using the wrong name to bind to your MVVM store in your grid config ('Documents' instead of 'data'). if you want to use global store, you should just specify "store: 'Documents' " in your grid config.

  3. #2
    Sencha Premium Member
    Join Date
    Sep 2014
    Location
    New Jersey
    Posts
    168
    Answers
    11

    Default

    Quote Originally Posted by dustinmcmanus View Post

    app/model/Document.js
    Code:
    Ext.define('Document', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'DOC_ID',
            type: 'int'
        }, {
            name: 'DOC_NAME',
            type: 'string'
        }, {
            name: 'DOC_DESC',
            type: 'string'
        }, {
            name: 'DOC_REVISION',
            type: 'string'
        }, {
            name: 'DOC_AUTO_REVISION',
            type: 'string'
        }, {
            name: 'DOC_KEYWORDS',
            type: 'string'
        }, {
            name: 'DOC_CREATED_BY',
            type: 'int'
        }, {
            name: 'DOC_CREATED_BY_NAME',
            type: 'string'
        }, {
            name: 'AUDIT_ID',
            type: 'int'
        }, {
            name: 'MODIFIED_ACTION_TYPE',
            type: 'int'
        }, {
            name: 'MODIFIED_DATE',
            type: 'date'
        }, {
            name: 'MODIFIED_BY_TECH_ID',
            type: 'int'
        }, {
            name: 'MODIFIED_REASON',
            type: 'string'
        }, {
            name: 'PREV_AUDIT_ID',
            type: 'int'
        }, {
            name: 'CFG_REC_STATUS',
            type: 'int'
        }, {
            name: 'CLIENT_ADDR',
            type: 'string'
        }, {
            name: 'CRC',
            type: 'string'
        }, {
            name: 'INITIAL_RECORD_ID',
            type: 'int'
        }, {
            name: 'MARKED_DELETED',
            type: 'int'
        }, {
            name: 'IN_DROPDOWNS',
            type: 'int'
        }, {
            name: 'SITE_ID',
            type: 'int'
        }, {
            name: 'USER_SESSION_ID',
            type: 'int'
        }, {
            name: 'CAT_ID',
            type: 'string'
        }, {
            name: 'CAT_NAME',
            type: 'string'
        }, {
            name: 'LINK_HREF',
            type: 'string'
        }, {
            name: 'FILE_NAME',
            type: 'string'
        }, {
            name: 'DOC_TYPE',
            type: 'int'
        }, {
            name: 'FILE_TYPE',
            type: 'int'
        }, {
            name: 'LINK_TYPE',
            type: 'int'
        }, {
            name: 'IS_PENDING',
            type: 'int'
        }]
    });
    I'm not going to get into everything that you asked but this stands out to me. Shouldn't 'Document' be 'extjs6.model.Document' so that it matches the application namespace and path? Give that a shot and see.

    You should really re-read the Sencha Guides...especially the Getting Started guide. Some of it may not come quickly but read it over and play with the examples and soon you'll get a decent grasp on how it's all tied together.

  4. #3

    Default

    Thanks for responding so quickly. Whenever I change it to extjs6.model.Document, I get the following error in Chrome developer tools:ext-all-rtl-debug.js?_dc=1465941420395:9182 [E] Ext.data.schema.Schema.lookupEntity(): No such Entity "Document".This happens even when I change everywhere in my code that I had "Document". I am not sure why.I have read the Guides. It's just all so foreign to me that I am having trouble putting the pieces together.

  5. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    913
    Answers
    105

    Default

    You define both - global MVC store ('Documents') and MVVM store in your viewModel ('data'). Global MVC store is not used and you are using the wrong name to bind to your MVVM store in your grid config ('Documents' instead of 'data'). if you want to use global store, you should just specify "store: 'Documents' " in your grid config.

Similar Threads

  1. Working with models in MVVM pattern: best practices?
    By silveralecs in forum Ext JS 6.x Q&A
    Replies: 3
    Last Post: 4 Feb 2016, 9:22 AM
  2. Replies: 1
    Last Post: 29 Sep 2015, 6:46 AM
  3. using MVVM with store
    By raj_plays in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 16 Aug 2015, 5:39 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
  •