如何根据无线电场选择启用/禁用extjs中的组件

时间:2017-09-18 18:54:59

标签: extjs

我想基于无线电场选择启用/禁用extjs中的组件。 这是我的代码:

http://dev2.hortonworks.com.s3.amazonaws.com/repo/dev/master/utils/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 - "The requested URL returned error: 403 Forbidden"
Trying other mirror.
To address this issue please refer to the below knowledge base article

https://access.redhat.com/solutions/69319

If above article doesn't help to resolve this issue please open a ticket with Red Hat Support.

Error: Cannot retrieve repository metadata (repomd.xml) for repository: sandbox. Please verify its path and try again

2 个答案:

答案 0 :(得分:0)

在ExtJs文档 RadioGroup 中有更改事件。您可以将逻辑置于 RadioGroup 的更改事件中。有关详细信息,请参阅ExtJs docs for RadioGroup

我创建了一个小型演示,根据您的要求向您展示它是如何工作的。 Sencha fiddle example

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example enable/disable button on change',
    width: '100%',
    height: 500,
    itemId: 'myPanel',
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    dockedItems: [{
        xtype: 'toolbar',
        defaults: {
            xtyple:'button',
            disabled:true,
            handler:function(){
                Ext.Msg.alert('Click','This button is enable..!');
            }
        },
        items: [{
            html: 'predefinedDateButton',
            itemId: 'predefined'
        }, {
            html: 'lastXDateButton',
            itemId: 'lasthours'
        }, {
            html: 'specifyDateButton',
            itemId: 'specifydate'
        }]
    }],
    items: [, {
        xtype: 'radiogroup',
        vertical: 'true',
        columns: 1,
        width: 200,
        listeners: {
            change: function (rf, newValue, oldValue) {
                var myPanel = rf.up('#myPanel');
                myPanel.down('toolbar').items.items.map(item => {
                    item.setDisabled(true);
                })
                myPanel.down(`#${newValue.timeInterval}`).setDisabled(false);
            }
        },
        items: [{
            boxLabel: 'Select Predefined interval',
            name: 'timeInterval',
            id: 'selectPredefinedInterval',
            inputValue: 'predefined'

        }, {
            boxLabel: 'Specify last X hours/days',
            name: 'timeInterval',
            id: 'SpecifyLastHours',
            inputValue: 'lasthours'

        }, {
            boxLabel: 'Specify date or interval',
            name: 'timeInterval',
            id: 'specifiedDate',
            inputValue: 'specifydate'
        }]
    }]
});

答案 1 :(得分:0)

问题是您在第一个广播项目和xtype optima-timeintervalpanel的组件中有ID重复。从第一个广播项目中删除id: 'timeIntervalPanel'可以解决问题。

这是一个工作小提琴:https://fiddle.sencha.com/#view/editor&fiddle/26sl

修改

@njdhv类似的方法(指定无线电组的更改事件侦听器),但以某种方式简化:

listeners: {
    change: function(radiogrup, value) {
        Ext.getCmp('timeIntervalPanel').setDisabled(
            value.timeInterval === 'timeInterval'
        );
    }
}

工作小提琴:https://fiddle.sencha.com/#view/editor&fiddle/26t6