Results 1 to 4 of 4

Thread: Issue binding Grid to the viewmodel store

  1. #1

    Default Issue binding Grid to the viewmodel store

    I have a viewmodel in which store defined as below. The store has a parameter SSN that has to be set based on global variable in app.


    Ext.define('MyApp61.view.cscase.CaseModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.caselist',
    stores: {
    caselistStore: {
    model: 'MyApp61.model.CaseListModel',
    proxy: {type: 'ajax', url: 'http://localhost/MobileWebAPI/api/CaseHistory/CaseList',
    extraParams:{ssn: ''}},
    reader: {
    type: 'json',
    rootProperty: 'Cases'
    },
    listeners:
    {
    beforeload: 'onLoad'
    },
    autoLoad: true
    }
    }
    });


    I have ViewController defined as below, that has onLoad event handler that's passing SSN.


    Ext.define('MyApp61.view.cscase.CaseController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.caselist',


    onLoad: function() {


    this.getViewModel().getStore('caselistStore').getProxy().getExtraParams().ssn= MyApp61.app.loggedInUserSSN
    this.getViewModel().getStore('caselistStore').sync()


    }
    })


    I have model defined as below.


    Ext.define('MyApp61.model.CaseListModel', {
    extend: 'Ext.data.Model',
    id: 'CaseListModel',
    config: {
    fields: [
    { name: 'CaseId', type: 'string' },
    { name: 'Error', type: 'string' },
    { name: 'Msg', type: 'string' },
    { name: 'UserName', type: 'string' },
    { name: 'OtherName', type: 'string' },
    { name: 'OtherParty', type: 'string' },
    { name: 'CaseType', type: 'string' }
    ],
    validations: [
    { type: 'presence', field: 'CaseId' }
    ]
    }
    });


    I have a view defined as below, binding to the viewmodel store.


    Ext.define('MyApp61.view.cscase.CaseList', {
    extend: 'Ext.grid.Grid',
    xtype: 'caselist',


    requires: [
    // 'MyApp61.store.SearchParticipantStore'
    'MyApp61.view.cscase.CaseController','MyApp61.view.cscase.CaseModel'
    ],


    title: 'Case List (Modern)',
    reference: 'caseGrid',
    controller: 'caselist',
    viewModel: {type: 'caselist'},
    //store: caseListStore,
    columns: [
    { text: 'Case Id', dataIndex: 'CaseId', width: 100 },
    { text: 'Other Name', dataIndex: 'OtherName', width: 130 },
    { text: 'Other Party', dataIndex: 'OtherParty', width: 50 }
    ],


    listeners: {
    select: 'onItemSelected'
    },
    bind: {
    store: '{caselistStore}'
    //deep: true
    },
    autoLoad: true
    }
    );


    I see ajax request in the debug console with valid data passed and data returned. My issue is, grid is not loaded with the data. What am I doing wrong here? Is this way of doing best practice? Please help.

  2. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi--

    Are you able to put together a runnable example of the issue you're experiencing?

    https://fiddle.sencha.com

    Thanks!
    Joel

  3. #3
    Sencha User
    Join Date
    Oct 2009
    Posts
    68
    Answers
    2

    Default

    Hi doddasuresh

    Same problem i have. Any solution you find

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2012
    Location
    Seattle, WA
    Posts
    423
    Answers
    34

    Default

    What does the JSON response look like?

Similar Threads

  1. Replies: 5
    Last Post: 25 Aug 2017, 6:51 PM
  2. MVVM, Remote store and ViewModel binding to GridPanel
    By John Sourcer in forum Ext 5: Q&A
    Replies: 7
    Last Post: 2 Apr 2015, 7:49 PM
  3. Replies: 2
    Last Post: 18 Aug 2014, 8:43 AM
  4. Replies: 1
    Last Post: 5 Aug 2014, 4:06 AM

Posting Permissions

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