Ext.js5引用和引用持有者(1)

1、referenceHolder :布尔值
如果是true,这个容器会在层次结构中被标记为一个点，给项目建立一个引用配置。如果有控制器管理，这个容器会自动变成referenceHolder （参考/引用持有者），更详细的内容得看Ext.container.Container。
默认设置为true
2、reference（来自Ext.container.Container中的介绍）
References and Reference Holders
Reference Holders用于保持子组件的references引用在层级结构内。这个功能声明容器和他的子组件之间的封装引用关系。例子如下：

Ext.define('Login', {    extend: 'Ext.window.Window',    // This config is not compatible with the more common "controller" config    // used to specify a ViewController for the view. When a ViewController is    // specified it effectively acts as the "reference holder" for the view. In    // this example we simply mark this container as the reference holder for    // demonstration purposes.    //大意是：这个例子我们直接简单粗暴的把容器设置成了引用持有者，而不是弄一个控制器（这个区别看第三段代码）    referenceHolder: true,    title: 'Login',    items: [{        xtype: 'form',        items: [{            xtype: 'textfield',            reference: 'username', // 给引用持有者声明了一个引用            name: 'username',            fieldLabel: 'Username'        }, {            xtype: 'textfield',            reference: 'password', // A named reference to be held on the referenceHolder            name: 'password',            fieldLabel: 'Password'        }]     }] });var w = new Login();console.log(w.lookupReference('password')); // The password field

引用持有者（在这里我觉得应该指定义的Login）是被封装好的，因此引用只会加到组件层次中理他最近的那个引用持有者上。

var ct = new Ext.container.Container({    referenceHolder: true,    items: [{        xtype: 'container',        referenceHolder: true,        reference: 'innerCt1',        items: [{            xtype: 'component',            reference: 'a',            id: 'a1'        }, {            xtype: 'component',            reference: 'b',            id: 'b1'        }]    }, {        xtype: 'container',        referenceHolder: true,        reference: 'innerCt2',        items: [{            xtype: 'component',            reference: 'a',            id: 'a2'        }, {            xtype: 'component',            reference: 'b',            id: 'b2'        }]    }]});// The main container will not have references to a/b, each innerCt willconsole.log(ct.lookupReference('a'), ct.lookupReference('b'));var inner1 = ct.lookupReference('innerCt1');var inner2 = ct.lookupReference('innerCt2');console.log(inner1.lookupReference('a').id, inner1.lookupReference('b').id);console.log(inner2.lookupReference('a').id, inner2.lookupReference('b').id);  

如果视图有控制器，那么这个视图会自动变成一个引用持有者。引用也会同时在视图和控制器中有效。

Ext.define('ProfileController', {    extend: 'Ext.app.ViewController',    alias: 'controller.profile',    init: function() {        console.log(this.lookupReference('firstName'));    }});Ext.define('Profile', {    extend: 'Ext.form.Panel',    controller: 'profile',    items: [{        xtype: 'textfield',        reference: 'firstName',        fieldLabel: 'First Name'    }]});new Profile(); 

再来一个比较简单的例子，这是状态绑定的代码：

Ext.define('KitchenSink.view.binding.ComponentState', {    extend: 'Ext.panel.Panel',    xtype: 'binding-component-state',    width: 350,    layout: 'anchor',    viewModel: true,    title: 'Sign Up Form',    bodyPadding: 10,    items: [{        xtype: 'checkbox',        boxLabel: 'Is Admin',        reference: 'isAdmin'    },{        xtype: 'textfield',        fieldLabel: 'Admin Key',        anchor: '0',        bind: {            disabled: '{!isAdmin.checked}'        }    }]});

还有这样的用法，绑定状态。效果图如下：

感慨一下，这样的排版真的太漂亮了吧！感动感动!