Extjs中雙向數據綁定的一個用法

Extjs的雙向數據綁定

Sometimes a component's state, e.g. thecheckedstate of a checkbox or the selected record of a grid, is interesting to other components. When a component is assigned areferenceto identify it, that component will publish some of its key properties in the ViewModel.

In this example, we have the "Admin Key" textfield's disabled config bound to the the checked state of the checkbox. This results in the textfield being disabled until the checkbox is checked. This sort of behavior is well suited for dynamic forms like this:

Ext.define('MyApp.view.TestViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.test', // connects to viewModel/type below

    data: {
        firstName: 'John',
        lastName: 'Doe'
    },

    formulas: {
        // We'll explain formulas in more detail soon.
        name: function (get) {
            var fn = get('firstName'), ln = get('lastName');
            return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
        }
    }
});

Ext.create('Ext.panel.Panel', {
    title: 'Sign Up Form',

    viewModel: {
        type: 'test'
    },

    items: [{
        xtype: 'checkbox',
        boxLabel: 'Is Admin',
        reference: 'isAdmin'
    },{
        xtype: 'textfield',
        fieldLabel: 'Admin Key',
        bind: {
            disabled: '{!isAdmin.checked}'
        }
    }]
});

這裏在ViewModel的data中並未定義一個isAdmin，可是能夠經過雙向數據綁定給了textfield。這是由於上面文檔中說到的：「When a component is assigned a reference to identify it, that component will publish some of its key properties in the ViewModel」，就是若是組件使用了reference屬性，就能夠將組件本身的一些關鍵屬性註冊到ViewModel的data中去。
解決了個人MenuViewModel中爲何能夠在formulas中使用menugrid.selection，由於menugrid組件註冊了reference:'menugrid'。

官方文檔地址：

extjs官方文檔