[ExtJS Study notes] section tenth EXTJS5 new features ViewModel and databinding

This address: http://blog.csdn.net/sushengmiyan/article/details/38612721

This article Sushengmiyan

-------------------------------------------------------------Resource Link-------------------------------------------------------- ---------------

Translation Source: http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html

API Docs:http://docs.sencha.com/extjs/5.0/apidocs/#!/api/ext.app.viewmodel

--------------------------------------------------------------------------------------------------------------- ---------------------------------

Component Bindings

Data binding (DataBinding) and view model (ViewModel) are the new powerful features of ext JS5. Both of them allow you to write minimal code and use declarative style styles to help you decouple management.

A ViewModel is a class that manages data objects. It allows components that are interested in the data to bind to it, and is automatically notified when changes occur. The view model (ViewModel) is a reference to the view view, like Viewcontroller. Since the view model (ViewModel) is related to views, in component inheritance relationships, ancestor-owned view models can also be connected. This allows subclasses to simply inherit from the parent class.

The component has a bind configuration property that allows you to associate any configuration data from ViewModel. With BIND, you can be sure that the setter method of the component configuration is automatically bound when the value changes, and does not require you to write event handling yourself.

In this guide, we can look at the powerful features of ViewModels and databinding in a few examples.

Perhaps the best way to understand the binding and viewmodels is to look at the different binding methods you use on the component. This is because the component is the original user of data binding, and the component is well known by the developer of Ext JS. In order to be able to perform the binding operation, we need to create a viewmodel so that we can introduce later.

binding and configuration (binding and Configs)

Binding data to a component is a process of connecting Ext.app.ViewModel to the configuration properties of a component. As long as there is a setter method, the configuration of any component can be bound, for example, in the Ext.app.panerl.Panel class there is a Settitle method, you can bind the title configuration.

In the following example, we give the panel configuration data based on ViewModel, we can say that our data is bound to width because of the SetWidth method.

Ext.create (' Ext.panel.Panel ', {    title: ' Simple Form ',    viewModel: {        type: ' Test '  // Define test this ViewModel    } later,    bind: {        html: ' <p>hello {name}</p> ',        width: ' {somewidth} '    } });

The syntax used to bind the data is similar to the ext.template, you can put the text in the curly braces, you can also use the formatted fomatters. Unlike Ext.template, it is not converted to a string when it is passed to only one like ' {somewidth} '.

We'll see later how name and Somewidth are defined. The example above simply shows how the data is being used by the component.

Binding boolean Data configuration

Like visibility isible, availability Disable, check state checked and the pressed state of the button pressed is required to configure Boolean properties. Look at the following example:

Ext.create (' Ext.panel.Panel ', {    title: ' Simple Form ',    viewModel: {        type: ' Test '    },    items: [{        Xtype: ' button ',        bind: {            hidden: ' {!name} '  //Negated        }}    ]});

When the button is pressed, the value is passed into the Sethidden method, so it is not interpreted as a string when it is passed in as a single, which is a reason.

bindings and Precedence

A binding configuration property overrides a previously statically defined one, but it is also possible that there will be a little delay.

Ext.create (' Ext.panel.Panel ', {    title: ' Simple Form ',    viewModel: {        type: ' Test '    },    bind: {        Title: ' Hello {name} '}    };

Once the name binding is defined, the ' simple Form ' title is replaced.

bindings and child controls

One of the most useful parts of a binding is the data that the container has, and the sub-components are available. In the following example, you can see that the ViewModel child component binds the data of the parent container.

Ext.create (' Ext.panel.Panel ', {    title: ' Simple Form ',    viewModel: {        type: ' Test '    },    layout: ' Form ',    defaulttype: ' TextField ',    items: [{        fieldlabel: ' First Name ',        bind: ' {firstName} '//uses ' test "ViewModel from the parent    },{        fieldlabel: ' Last Name ',        bind: ' {lastName} '}    ]});

two ways to bind

Binding properties also allow binding data in two ways. Data that is modified on the view can be returned to the model immediately. The components that are bound to this data will be updated.

In the above example, because the ' firstName ' and ' LastName ' attribute stones are bound by text, changes in the input box will be promptly notified to the back of the ViewModel, in order to see how the specific connection, we need to supplement the completion of the example.

Ext.define (' Testviewmodel ', {extend: ' Ext.app.ViewModel ', alias: ' Viewmodel.test ',//connects to Viewmodel/type be Low data: {firstName: ' John ', lastName: ' Doe '}, formulas: {//We'll explain formulas in M        Ore detail soon.            Name:function (get) {var fn = get (' firstName '), ln = get (' LastName '); Return (FN && ln)? (fn + ' + ln): (fn | | ln | |        ''); }    }}); Ext.define (' TestView ', {extend: ' Ext.panel.Panel ', layout: ' form ',//Always use this form when defining a view Class.    This//allows the creator of the component to pass data without//erasing the ViewModel type, that we want.     ViewModel: {type: ' Test '//References alias ' Viewmodel.test '}, bind: {title: ' Hello {name} '}, DefaultType: ' TextField ', items: [{fieldlabel: ' First Name ', bind: ' {firstName} '},{field Label: ' Last Name ', bind: ' {lastName} '},{xtype:' button ', text: ' Submit ', bind: {hidden: ' {!name} '}}}); Ext.onready (function () {ext.create (' TestView ', {renderTo:Ext.getBody (), width:400});});

When the top panel is displayed, we can see that the changes in the input box are reflected in the Panel's caption, and the status of the Submit button is visible.

Binding Component State

Sometimes the state of a component, such as the checked of a selection box or the selected state of a table, is something that other components care about. This component is popularized in ViewModel when a component is set to reference to identify it.

In the example below, we have an admin key input box, which is determined by the selected state of the selection box. This behavior is appropriate for dynamic forms:

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} '        }    }});

Binding Description

So far, we can see three basic table-binding descriptions:

{FirstName}: This is transmitted directly from the view model, not modified, can be any type.

Hello{name}: Can insert characters

{!isadmin.checked} can make a negative flag, that is, the inverse, must have the concept.

In addition to the above three methods there are other less used ways

Multi-binding

Ext.create (' Ext.component ', {    bind: {        data: {            fname: ' {firstName} ',            lname: ' {lastName} '        }    } });

FirstName and LastName are bound

Binding Records

User record bindings like the id=42 can be found

Ext.create (' Ext.component ', {    bind: {        data: {            reference: ' User ',            id:42        }}}    );

This needs to be Ext.data.Session.

Associative bindings

See User's Adress property

Ext.create (' Ext.component ', {    bind: {        data: {            reference: ' User ',            id:42,            Association: ' Address '        }    }});

In this case, it is similar to the previous record binding.

Binding operations

The following shows an example of a single-binding destruction. The single operation used

Ext.create (' Ext.component ', {    bind: {        data: {            bindTo: ' {name} ', Single:true}}}    );

To bind an update of a reference operation by using a deep operation

Ext.create (' Ext.component ', {    bind: {        data: {            bindTo: ' {someobject} ',            deep:true        }}}    );

Create a view model ViewModelsThe above knows how to bind, now it's time to learn ViewModel and the features it provides.

As previously stated, ViewModel is the object that manages the underlying data.

Rule formulas

In order to bundle the data, the view model provides a convenient way to calculate the data through the formulas, which makes it easier for you to focus only on the life structure in the view, without having to focus on data dependencies.

In other words, this formulas data can display different values without modification.

Ext.define (' TestViewModel2 ', {    extend: ' Ext.app.ViewModel ',    alias: ' Viewmodel.test2 ',    formulas: {        X2y:function (GET) {            return get (' x2 ') * get (' y ');        },        x2:function (get) {            return get (' x ') * 2;        }    }});

Formulas and Explicit binding

In the above example, the relevance of the formula is found by examining the function, however, this is not always the best solution. You can use an explicit binding declaration, which returns a simple object when all the values are bound.

Ext.define (' TestViewModel2 ', {    extend: ' Ext.app.ViewModel ',    alias: ' Viewmodel.test2 ',    formulas: {        Something: {            bind: {                x: ' {foo.bar.x} ',                y: ' {bar.foo.thing.zip.y} '            },            get:function (data) {                return data.x + Data.y;}}}    );