Binding viewModel property with variable

Question

Intro: I need to call the backend controller to see if the user is admin. If the user is NOT admin, hide the toolbar in the application. Currently the var is successfully changing; However, it is changing after the view is already created causing the view to always have the toolbar visable.

Problem:

• Need to check backend to see if user is in the admin group.
• Need to return true if they are in admin group

MyCode:

var adminBool = false;

function CheckAdmin() {
    debugger;
    var a;
    Direct.Report.IsAdmin(this.results, a);
    debugger;
};

function results(result, constructor, c, d, e, f, g, h) {
    debugger;
    this.adminBool= result.adminUser; //returns bool
}

Ext.define('Ext.View.MyViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.AdministrationViewModel',
    init: this.CheckAdmin(),
    data: {
        addNew: true,
        update: true,
        gridData: null,
        isAdmin: this.adminBool
    }
});

Synopsis:

1. Call the backend controller for admin status

2. Return bool

3. Update viewModel with bool respectively

4. ViewModel property,'isAdmin', will bind with hidden property to hide unwanted actions for non admins

UPDATE:

Basically I need a way to delay "isAdmin: this.adminBool" check to after the backend call is finished.

Answer 1

As you are using ViewModel .

So you can use set() method to update your viewmodel field.

I have created an sencha fiddle demo using viewmodel . You can check, how it is working in fiddle. In this fiddle I have not used any API, it just example regarding of ViewModel . Hope this will help you to solve your problem or achieve your requirement.

//ViewModel
Ext.define('MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.AdministrationViewModel',
    data: {
        isAdmin: true
    }
});
//Panel
Ext.create('Ext.panel.Panel', {
    title: 'ViewModel example',
    width: '100%',
    renderTo: Ext.getBody(),
    viewModel: 'AdministrationViewModel',
    layout: {
        type: 'vbox', // Arrange child items vertically
        align: 'stretch', // Each takes up full width
        padding: 10
    },
    defaults: {
        margin: 10
    },
    items: [{
        xtype: 'combo',
        height: 40,
        fieldLabel: 'Choose Admin or user',
        emptyText: 'Choose Admin or user',
        labelAlign: 'top',
        store: {
            fields: ['name', 'value'],
            data: [{
                "value": true,
                "name": "Admin"
            }, {
                "value": false,
                "name": "User"
            }]
        },
        queryMode: 'local',
        displayField: 'name',
        valueField: 'value',
        listeners: {
            select: function (combo, record) {
                var viewModel = combo.up('panel').getViewModel(),
                    isAdmin = record.get('value');

                //If selected value is {Admin} then we will show toolbar otherwise in case of {User} hide
                viewModel.set('isAdmin', !isAdmin);
            }
        }
    }, {
        xtype: 'toolbar',
        width: '100%',
        height: 50,
        padding: 10,
        bind: {
            hidden: '{isAdmin}'
        },
        items: [{
                // xtype: 'button', // default for Toolbars
                text: 'Admin',
            }, {
                xtype: 'splitbutton',
                text: 'Split Button'
            },
            // begin using the right-justified button container
            '->', // same as { xtype: 'tbfill' }
            {
                xtype: 'textfield',
                name: 'field1',
                emptyText: 'enter search term'
            },
            // add a vertical separator bar between toolbar items
            '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
            'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
            {
                xtype: 'tbspacer'
            }, // same as ' ' to create Ext.toolbar.Spacer
            'text 2', {
                xtype: 'tbspacer',
                width: 50
            }, // add a 50px space
            'text 3'
        ]
    }]
});