[ExtJS] reference 引用查找器 與viewModel

reference 作爲元素的查找標識，經常在項目中使用。

但是今天發現一件事：

有reference屬性的控件，在其viewModel中會自動生成一個值。

示例：

{
    xtype:'container',
    id:'demo',
    viewModel:{},
    items:[
        {
            xtype:'textfield',
            reference:'A'
        }
    ]
}

爲一個textfield聲明 reference 屬性 A,此時如果獲取viewModel的data 可以看到

Ext.getCmp('demo').getViewModel().data;//獲取 viewModel的data值
// A: {value: null}   控制檯輸出

發現viewModel 自動追加了一個 key爲 A 的值。

如果我們在其viewModel本身就聲明一個 key爲A的值,且給textfield賦一個值爲b：

{
    xtype:'container',
    id:'demo',
    viewModel:{
        data:{
            A:'a'//聲明A的值爲a
        }
    },
    items:[
        {
            xtype:'textfield',
            value:'b',
            reference:'A'
        }
    ]
}

再次獲取viewModel中的A的值

Ext.getCmp('demo').getViewModel().data;//獲取 viewModel的data值
// 控制檯輸出 A: {value:‘b'}

發現輸出的還是 {value:'reference控件所對應的值'} 

若是手動更新下viewModel中的 A：

Ext.getCmp('demo').getViewModel().set('A','手動更新的a');
//獲取vm的data
A: '手動更新的a'

而此時若是再給 textfield控件賦值

Ext.getCmp('demo').getInnerAt(0).setValue('更新b');
//控制檯再輸出 vm的data
A:{value:'更新b'}

官方解釋

當爲組件分配一個 reference用於標識的組件時，該組件將在ViewModel中發佈其某些關鍵屬性。

示例：

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

從上述例子可以發現：

雖然vm中未聲明isAdmin， 但由於有控件聲明瞭reference爲isAdmin，所以其他控件在綁定時可以直使用isAdmin.