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中bind_Extjs中双向数据绑定的一个用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。