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官方文档