时间戳

首页 > 解决方案 > 如何将组件的隐藏属性绑定到EXTJS中的另一个组件

extjs - 如何将组件的隐藏属性绑定到EXTJS中的另一个组件

问题描述

我想知道如何在 EXTJS 视图中正确使用引用。更具体地说，我想将一个组件的隐藏属性绑定到具有给定引用的其他组件的状态。例如，如果一个视图包含一个按钮和一个组合框，如何将按钮的隐藏属性绑定到组合框的 isSelected 状态。

这是我尝试过的，但没有任何效果：

Ext.create('Ext.Panel',{
    renderTo: Ext.getBody(),
    width: 400,
    height: 400,
    viewModel: {},
    items:[
        {
            xtype: 'combobox',
            reference: 'myCombo',
            label: 'Select',
            queryMode: 'local',
            name: 'myComb',
            store: {
                fields: ['value', 'name'],
                    data : [
                    {"value":"1", "name":"Name1"},
                    {"value":"2", "name":"Name2"},
                    {"value":"3", "name":"Name3"},
                    {"value":"4", "name":"Name4"},
                    {"value":"5", "name":"Name5"},
                ]
            },
            editable: false,
            displayField: 'name',
            valueField: 'value',
        },
        {
            xtype: 'button',
            text: 'myButton',
            bind: {
                //hidden: '{myCombo.getValue()?true:false}'
                //hidden: (!!myCombo.getValue())
            }
        }
    ]
})

标签： extjsbind

解决方案

只需将视图模型数据绑定到组合框值，如下所示：

Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 400,
    viewModel: {
        data: {
            comboboxSelectedValue: '',
        }
    },
    items: [{
        xtype: 'combobox',
        reference: 'myCombo',
        label: 'Select',
        queryMode: 'local',
        name: 'myComb',
        store: {
            fields: ['value', 'name'],
            data: [{
                "value": "",
                "name": "Unselected"
            }, {
                "value": "1",
                "name": "Name1"
            }, {
                "value": "2",
                "name": "Name2"
            }, {
                "value": "3",
                "name": "Name3"
            }, {
                "value": "4",
                "name": "Name4"
            }, {
                "value": "5",
                "name": "Name5"
            }, ]
        },
        editable: false,
        displayField: 'name',
        valueField: 'value',
        bind: {
            value: '{comboboxSelectedValue}'
        }
    }, {
        xtype: 'button',
        text: 'myButton',
        bind: {
            hidden: '{!comboboxSelectedValue}'
        }
    }]
})

推荐阅读