Question

我希望隐藏一个复选框，具体取决于记录是否为幻像。尝试使用viewmodels实现这一点，但它似乎不起作用。请参阅下面的相关代码。为简洁起见，我遗漏了不相关的代码。 viewModel与视图的绑定正在按预期工作。当我尝试将activeRecord.name绑定到title属性时，双向数据绑定工作正常。

视图模型

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

    data: {
        activeRecord: null
    }
});

控制器

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

查看

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

Answer 1

我们最终为Model使用了以下基类，这比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);
    }
});

然后你就可以使用你想要的绑定

了

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

Answer 2

尝试使用公式：

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

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

然后在你看来：

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

ViewModel绑定记录幻像

2 个答案: