任何组件配置都可以使用绑定，只要它有一个 setter 方法。在这种情况下，我们将记录的 firstName 字段绑定到我们的textfield的值（默认为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是一个管理数据对象的类。然后它允许那些对这些数据感兴趣的人绑定到它，并在它改变时做出反应。ViewModel由定义它的视图所有。因为ViewModel与视图相关联，所以它的子视图只是“继承”其父ViewModel的数据。

在上面的示例中，我们的textfield的值绑定到从我们选择的记录传递的值。如果更改表单字段中的值，它也将更改所选记录中的值，并且更改将反映在行中。