[ExtJS] reference 引用查找器与viewModel

最新推荐文章于 2021-03-18 22:36:45 发布

原创最新推荐文章于 2021-03-18 22:36:45 发布 · 1.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#extjs #viewModel #reference #引用查找器

ExtJS 专栏收录该内容

55 篇文章

订阅专栏

这篇博客探讨了ExtJS中reference属性如何影响控件与其viewModel之间的交互。当一个控件具有reference属性，例如一个textfield，其在viewModel中会自动生成对应的值。如果尝试覆盖这个值， viewModel会根据控件的最新状态进行更新，允许其他控件直接绑定到reference名，如isAdmin，即使vm中没有显式声明。

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.