任何組件配置都可以使用綁定啤呼，只要它有一個(gè) setter 方法。在這種情況下，我們將記錄的 firstName 字段綁定到我們的textfield的值（默認(rèn)為textfield綁定）涤浇。

Ext.Viewport.add({
    xtype: 'tabpanel',
    items: [{
        title: 'Employee Directory',
        xtype: 'grid',
        iconCls: 'x-fa fa-users',
        listeners: {
            itemtap: function(view, index, item, record) {
                Ext.Viewport.add({
                    xtype: 'formpanel',
                    title: 'Update Record',
                    width: 300,
                    floating: true,
                    centered: true,
                    modal: true,

                    record: record,
                    viewModel : {
                        data: {
                            employee: record
                        }
                    },
                    items: [{
                        xtype: 'textfield',
                        name: 'firstname',
                        label: 'First Name',
                        bind: '{employee.firstName}'

                    }, {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        items: ['->', {
                            xtype: 'button',
                            text: 'Submit',
                            iconCls: 'x-fa fa-check',
                            handler: function() {
                                this.up('formpanel').destroy();
                            }
                        }, {
                            xtype: 'button',
                            text: 'Cancel',
                            iconCls: 'x-fa fa-close',
                            handler: function() {
                                this.up('formpanel').destroy();
                            }
                        }]
                    }]
                });
            }
        },

        store: {
            data: [{
                "firstName": "Jean",
                "lastName": "Grey",
                "officeLocation": "Lawrence, KS",
                "phoneNumber": "(372) 792-6728"
            }, {
                "firstName": "Phillip",
                "lastName": "Fry",
                "officeLocation": "Lawrence, KS",
                "phoneNumber": "(318) 224-8644"
            }, {
                "firstName": "Peter",
                "lastName": "Quill",
                "officeLocation": "Redwood City, CA",
                "phoneNumber": "(718) 480-8560"
            }]
        },
        columns: [{
            text: 'First Name',
            dataIndex: 'firstName',
            flex: 1
        }, {
            text: 'Last Name',
            dataIndex: 'lastName',
            flex: 1
        }, {
            text: 'Phone Number',
            dataIndex: 'phoneNumber',
            flex: 1
        }]
    }, {
        title: 'About Sencha',
        iconCls: 'x-fa fa-info-circle'
    }]
});

所有這些綁定是可能的，憑借我們的 ViewModel 例朱。

ViewModel是一個(gè)管理數(shù)據(jù)對(duì)象的類孝情。然后它允許那些對(duì)這些數(shù)據(jù)感興趣的人綁定到它，并在它改變時(shí)做出反應(yīng)洒嗤。ViewModel由定義它的視圖所有箫荡。因?yàn)閂iewModel與視圖相關(guān)聯(lián)，所以它的子視圖只是“繼承”其父ViewModel的數(shù)據(jù)渔隶。

在上面的示例中羔挡，我們的textfield的值綁定到從我們選擇的記錄傳遞的值。如果更改表單字段中的值间唉，它也將更改所選記錄中的值绞灼，并且更改將反映在行中。