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 will
console.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}'
        }
    }]
});

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

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