CODEWITHSUNDEEP
extjsmvvmviewmodel
Bram Gerritsen
Bram Gerritsen

Reputation: 7238

ViewModel bind record phantom

I want to hide a checkbox depending on wheter a record is phantom. Trying to implement this using viewmodels, but it doesn't seem to work. See below for the related code. I've left out unrelated code for brevity. The binding of the viewModel to the view is working as expected. When I try to bind activeRecord.name to the title attribute 2-way data binding is working correctly.

Viewmodel

Ext.define('MyApp.view.content.ContentViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.content',

    data: {
        activeRecord: null
    }
});

Controller

var contentWindow = Ext.widget('content-details');
contentWindow.getViewModel().set('activeRecord', contentBlock);

View

viewmodel: 'content',
items: [
    {
        xtype: 'checkbox',
        boxLabel: 'My checkbox',
        bind: {
            hidden: '{!activeRecord.phantom}'
        }
    }
]

Upvotes: 1

Views: 890

Answers (2)

Alexey Solonets
Alexey Solonets

Reputation: 817

We ended up using the following base class for a Model, which is more convenient rather than a formula in a ViewModel.

// Use your own name instead of BaseModel

Ext.define('BaseModel', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'phantom',
        persist: false,
        convert: function (v, rec) {
            var id = rec.data[rec.idProperty];
            return !id || (Ext.isString(id) && id.indexOf(rec.entityName) == 0);
        }
    }],

    commit: function (silent, modifiedFieldNames) {
        this.data.phantom = false;
        this.callParent(arguments);
    }
});

Then you'll be able to use the binding you want

    bind: {
        hidden: '{!activeRecord.phantom}'
    }

Upvotes: 1

khmurach
khmurach

Reputation: 484

Try to use formulas:

data: {
    rec: null,
    callback: null
},

formulas: {
    isNew: function (get) {
        return !get('rec') || get('rec').phantom;
    }
}

Then in your view:

bind: {
    disabled: '{!isNew}'
},

Upvotes: 0

Related Questions