07_数据绑定-CSDN博客

数据绑定（Data Binding）

组件的绑定是将组件的配置与数据建立连接的一个过程。这能让数据的改变自动更新与之相关的组件的配置属性值。在一些情况下，这些配置值可以被终端用户操作而改变，比如文本框的值。这些属性默认情况下都是双向绑定的，以便配置属性的改变可以更新绑定数据的改变。

任何组件的配置属性都可以被绑定，只要它有一个setter方法。此例中，我们将绑定我们记录的firstName字段到我们的文本框的value配置属性上（这是文本框的默认绑定属性）。

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）的特性，基本上所有的绑定都是可以实现的。

视图模板是管理数据对象的一个类。它允许对里面的数据感兴趣的对象绑定到此模板，且当数据变化时作出相应的响应。视图模板隶属于定义它的视图。这是因为视图模板与视图相关联，它的子视图仅仅继承了父视图的视图模板的数据。

在上面的示例中，我们的文本域（即文本框）的值（即value配置属性）被绑定到了我们所选择行（即记录）的值上（在此是firstName）。如果你改变了表单中的字段值，所选记录的值也会改变，进而会影响行的值（使之产生变化）。