Results 1 to 9 of 9

Thread: viewModel with store bound directly doesn't inherit the config

  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default viewModel with store bound directly doesn't inherit the config

    Hello,
    I'm using ext 6.5.3 modern and try to get a huge, infinite list from an ajax virtual store.

    When referencing the proxy and reader within the viewmodel everything works as intended. But if I already have a store in place and reference it by type/xtype its config is simply ignored.

    Code:
    stores: {listStore: {
       xtype: 'test-store',
       pageSize: 125,
       leadingBufferZone: 125,
       autoLoad:true,
              proxy: {
                  type: 'ajax',
                  url : 'list.json',
                  reader: {
                      type: 'json',
                      rootProperty: "result.rows",
                      totalProperty: "result.results",
                      successProperty: "result.success"
    }
              }
    }
      }
    
    (When I use type instead of xtype there is a scrolling error with internalId of null.)

    So basically there are 2 questions to pop up:
    1) When I want to use a store with exactly the proxy config above, why do I have to add the very same config to the viewmodel as well? Shouldn't the defined listStore inherit the configuration of the 'test-store' or why is that one even configurable like that? Especially when having multiple viewmodels accessing the same store it would be nice to have the actual config from the store used in the viewmodel so I could simply go with:

    Code:
    listStore: {
       xtype: 'test-store',
       pageSize: 125,
       leadingBufferZone: 125,
       autoLoad:true
    2) In ext 5 I could define a "root" node of the json response. Now I understood "rootProperty" should be used. Anyway, my json looks always similar:
    Code:
    {
       "id": 544,
       "controller": 'test',
       "result": {
          "success": true,
          "results": 999,
          "rows": [
             {
               "name": "Test1",
               "id": 1
             },
             {
               "name": "Test2",
               "id": 2
             }
        ]
    }
    Is there a way not having to concat the root/total/successProperty all the time like: Instead of 'result.rows' I'd always just go with 'rows'? Somehow this worked for me in ext5, in ext6 it seems like I always have to concat to the actual node..

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    xtype is to use a component's alias so it cannot be used to instantiate a store. type should work to lookup a store via it's alias:



    To be honest, I've stopped using these aliases in real apps and use xclass often now but my aliases started to be almost identical to my class names so it didn't give me anything really.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    Thank you for your reply. For me it worked with either using model, xtype or type. But when using type I get these weird internalid of null errors. Also, your rootProperty is actually on the root level. if you put a result: {} around your data it's not working as expected - at least for me.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Not sure what you mean about rootPeoperty on the root level and adding object around my data. My data being returned is an object and my rootProperty on the reader is properly mapped to the array of data.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Not sure what you mean about rootPeoperty on the root level and adding object around my data. My data being returned is an object and my rootProperty on the reader is properly mapped to the array of data.
    I mean, consider your data1.json is looking different. 1 more nested level, like:
    Code:
    {  
      "result": {
          "success": true,
          "total": 1000000,
          "users": [
              {{#repeat 25}}
              {
                  "id": {{@index}},
                  "name": "{{firstName}} {{lastName}}",
                  "email": "{{email}}"
              }
              {{/repeat}}
          ]
        }
    }
    Now rootProperty should be something like result.users which doesn't show any result.

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    I see and that's because you have the success and total properties within that result object so you need to add successProperty and totalProperty to your reader config just like rootProperty:

    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  7. #7
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I see and that's because you have the success and total properties within that result object so you need to add successProperty and totalProperty to your reader config just like rootProperty:

    I see, that makes sense.

    Now for my example I use a list instead of a grid. I changed your fiddle:


    1)As you can see in the console, when hovering over the scrollbar the error I was talking about appears. Is this a bug or did I do something wrong?

    2)Also, if I add grouped: true and a grouper: {property: group_name} property to the store, (plus adding the group_name property to the data1.json and the model) I receive an error: TypeError: Cannot read property '0' of null. I'm aware that grouping won't really work well with infinite lists as not all the data is known from the backend. Just curious.

    3)Third thing I miss is the automatic selection of the first record. Somehow the select() method was removed within the last versions. How is this done currently?

  8. #8
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    #1 seems like a bug as it's trying to map an event (the mouseover) to a record but the mouseover is the list container itself not a row item and therefore won't find a record and there isn't a check on that.

    #2 yes, grouping with infinite along with virtual store won't really work, it's a difficult task to handle since you don't fully know how big a group will be. This was something slated to be worked on to hopefully support but it's in Idera's hands now

    #3 things have proper selection models now and those selection method and configs are there now and you can use the getSelectable method to return the selection model. However, we invented this nifty concept where we can proxy configs and methods so even though the documentation says the list doesn't have a select method, we proxy the selection model's select method to the list so the list does actually have a select method. The following are the configs and methods that are proxied:

    Code:
        proxyConfig: {
            selectable: {
                configs: [
                    'mode',
                    'deselectable',
                    'lastSelected',
                    'selected'
                ],
                methods: [
                    'isSelected',
                    'select',
                    'selectAll',
                    'deselectAll',
                    'getSelections',
                    'hasSelection',
                    'getSelectionCount'
                ]
            }
        },
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  9. #9
    Sencha User
    Join Date
    May 2017
    Posts
    27

    Default

    Quote Originally Posted by mitchellsimoens View Post
    #1 seems like a bug as it's trying to map an event (the mouseover) to a record but the mouseover is the list container itself not a row item and therefore won't find a record and there isn't a check on that.

    #2 yes, grouping with infinite along with virtual store won't really work, it's a difficult task to handle since you don't fully know how big a group will be. This was something slated to be worked on to hopefully support but it's in Idera's hands now

    #3 things have proper selection models now and those selection method and configs are there now and you can use the getSelectable method to return the selection model. However, we invented this nifty concept where we can proxy configs and methods so even though the documentation says the list doesn't have a select method, we proxy the selection model's select method to the list so the list does actually have a select method. The following are the configs and methods that are proxied:

    Code:
        proxyConfig: {
            selectable: {
                configs: [
                    'mode',
                    'deselectable',
                    'lastSelected',
                    'selected'
                ],
                methods: [
                    'isSelected',
                    'select',
                    'selectAll',
                    'deselectAll',
                    'getSelections',
                    'hasSelection',
                    'getSelectionCount'
                ]
            }
        },
    That's interesting, idd. The docs/explanations/changes kinda lack regarding these kind of changes.
    Anyway, select seems to return "Cannot read property 'getAt' of null". Where is the correct place to actually call this? I want to preselect the first row after everything is done. I tried initialize and afterRender but in both cases it seems not to work.

    Since the store is bound to the list I should be able to define this.store.on('load'..) within the initialize function of the list. But it returns "can't call .on of null". While when I console.log this.store it gives me the korrekt store.

    Would be interested in how to actually select a record of a list in the code..

    Thanks for your help, I really appreciate that.

    E: If I add a defer for 1sec the select() works. But that's a horrible practice. it seems that the store is not loaded yet when calling the initialize/afterRender. When i try to add a listerner to the store: listeners: {load: function(){console.log('loaded'}} never fires. It used to work like that in ext 5.. Also tried a this.on('show' listener to the initialize of the list. Store is still empty inside of that even tho it should be loaded at this point

Similar Threads

  1. [FIXED] Widget column sub-components don't inherit the ViewModel
    By Trevor4001 in forum Ext JS 6.x Bugs
    Replies: 2
    Last Post: 7 Oct 2016, 8:10 PM
  2. [DUP] Grid Summary not updating on ViewModel bound Store
    By stildalf in forum Ext 5: Bugs
    Replies: 1
    Last Post: 15 Jan 2015, 6:03 AM
  3. [CLOSED] [closed]ViewModel / Chart / bound store / 5.0.1.1131
    By t.nissen in forum Ext 5: Bugs
    Replies: 1
    Last Post: 17 Jul 2014, 12:23 AM
  4. Replies: 3
    Last Post: 16 Nov 2012, 11:45 AM
  5. Store.load() bound to EditorGrid doesn't refresh
    By andrewjbaker in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 16 Apr 2008, 1:44 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
  •