Results 1 to 7 of 7

Thread: LoadMask for ViewModel

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default LoadMask for ViewModel

    Hi,

    in my case I have detail page of a person. This page have a own ViewModel with 3 Models/Stores (remoteLoad: true).

    I want to have a loading spinner in the Component until all ViewModel loads are finished.
    If any Record or Store inside the ViewModel get a load() the loading Spinner have to show again and hide if the last load is finished.

    I hope my problem is clear.

    Thanks

    Snaker

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,006
    Answers
    5

    Default

    Thank you so much for your post. I apologize for the delay. I have shared this with the support staff to look into at their earliest convenience. Your patience is greatly appreciated! We do suggest using the support portal when you need assistance with a capability of a Sencha product, you have identified a situation where a products behavior is inconsistent with the product documentation and might indicate a software bug, or when the communication between you and Sencha needs to be private.

    Thanks again,

    Michele



  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255
    Answers
    759

    Default

    See this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2puj

    Note the "delay" parameter set in each of the data{n}.json files to simulate staggered loading.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default

    Hello evant,

    thanks for your response. qour solution looks good, but the loading spinner are hidden before the last store is loaded in your example.

    Thank you for your help

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255
    Answers
    759

    Default

    The thing that says "Running..." is just fiddle starting. The loadmask is the dark background. It disappears at the moment the last log fires.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default

    Ok you are right andyou can call me an for this fail.

    BUT...

    I need your solution in a container and that do not seem to run.
    I wrote a exmple ...

    https://fiddle.sencha.com/#view/editor&fiddle/2q0j

    I need the mask on listener fire and the reload button is clicked.

    Is it possible to get an Loading Spinner with individual Text?

  7. #7
    Sencha User
    Join Date
    Oct 2016
    Location
    Austria/Slovakia
    Posts
    3

    Default

    Hello Snaker,
    your problem lies in two different things.
    The first is that setMasked is never called on reload, because the view model is "not listening" to changes inside the record. You have two records inside the view model - person and address, and you are manipulating property loading inside of them, but view model never realizes that the value is changed. A possible workaround for this could be something like this:
    Code:
    Ext.define('Fiddle.ViewModel', {
    extend: 'Ext.app.ViewModel', alias: 'viewmodel.testViewModel', data: { isPersonLoading: false, isAddressLoading: false }, formulas: { isLoading: function(get) { if (get('isPersonLoading') || get('isAddressLoading')) { return { xtype: 'loadmask', message: '...loading...' }; } return false; } }, links: { person: { type: 'Fiddle.model.Person', create: true }, address: { type: 'Fiddle.model.Address', create: true } } });
    Ext.define('Fiddle.ViewController', {
    extend: 'Ext.app.ViewController', alias: 'controller.testViewController', reloadFn: function() { let vm = this.getViewModel(); vm.set('person.id', Math.floor(Math.random() * 100)); vm.set('address.id', Math.floor(Math.random() * 100)); vm.set('isPersonLoading', true); vm.get('person').load({ callback: function() { vm.set('isPersonLoading', false); } }); vm.set('isAddressLoading', true); vm.get('address').load({ callback: function() { vm.set('isAddressLoading', false); } }); } });
    var cmp = Ext.create('Ext.container.Container', {
    viewModel: 'testViewModel', controller: 'testViewController', bind: { masked: '{isLoading}' }
    });
    I am not saying this is the best approach, but it would work.

    However, the second problem is that you are somehow mixing modern and classic. Classic Container doesn't have marked property which can be bound. It only has functions mask and unmask. So even the upper mentioned solution would not work. I have forked your fiddle and fixed it: https://fiddle.sencha.com/#view/editor&fiddle/2qjb
    Again, I am not saying this is the best approach, but it is the cleanest solution I can come up with in your example.

    Hopefully this late response helps you.
    Miro

Similar Threads

  1. [OPEN] Child viewModel saves undeclared bind attributes on root viewmodel
    By robboerman in forum Ext JS 6.x Bugs
    Replies: 3
    Last Post: 12 Sep 2017, 2:31 AM
  2. [FIXED] (5.0.1.1255) LoadMask Fails on ViewModel-Bound Stores
    By mhill in forum Ext 5: Bugs
    Replies: 2
    Last Post: 27 Oct 2014, 1:10 PM
  3. Replies: 1
    Last Post: 9 Aug 2012, 2:43 PM

Posting Permissions

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