繁体   English   中英

选中复选框时显示组合框-Extjs

[英]Display combo box when checkbox is checked - Extjs

我已经设置了一个复选框和一个组合框,而我正在尝试设置功能-当用户选中该复选框时,组合框必须出现。 我是extjs的新手,在为此功能设置功能时遇到问题。

Ext.onReady(function(){

var tests = [
    ['Test1'],
    ['Test3'],
    ['Test2']
];
Ext.define('Testfile.model.Test', {
    extend: 'Ext.data.Model',
    fields: ['test']
});
var testsStore = new Ext.data.Store({
    model: 'Testfile.model.Test',
    proxy: {
        type: 'memory',
        reader: {
            type: 'array'
        }
    },
    data: tests
});
var form = Ext.create('Ext.form.Panel', {
    renderTo: document.body,
    bodyPadding: 10,
    width: 550,
    style: 'margin:16px',
    height: 300,
    title: 'Testing example',
    items: [{

          xtype: 'checkbox',
          name: 'system',
          boxLabel: 'Production (PACTV)',
          iputValue: 'production',

        listeners: {
            check: function (checkbox, isChecked) {
                    var sample = Ext.getCmp('secondComboID');
                }

        }
    }, {
        xtype: 'combobox'
        fieldLabel: 'Select Test',
        id: 'secondComboID',
        store: testsStore,
        valueField: 'id',
        displayField: 'test',
        typeAhead: true,
        forceSelection: true,
        allowBlank: false,
        editable: true,
        triggerAction: 'all',
        lastQuery: ''
    }]
});
Ext.getBody().add(me.form);

})

有人可以建议对脚本进行修复吗?

我会使用change事件: http : //docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox-event-change

listeners: {
    change: function(checkbox, newValue, oldValue, eOpts) {
        var combo = checkbox.up('form').down('combobox');
        if (newValue) {
            combo.show();
        } else {
            combo.hide();
        }
    }
}

另外,请注意层次导航方法up()down() 与使用硬编码的组件ID相比,使用这些(或其他相关方法)查找组件要好得多。

这是您的代码的有效示例: https : //fiddle.sencha.com/#fiddle/ua

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM