Make value of combobox blank

0
votes

I have a piece of code which makes a combobox active when a checkbox is checked. Once the checkbox is checked I can select a value from the combobox. But I want the combobox to return having no value (blank) once the checkbox is unchecked. How do i do that? My code is as follows:

var tests = [
['Test1'],
['Test3'],
['Test2']
];
Ext.define('Test', {
    extend: 'Ext.data.Model',
    fields: ['test']
});
var testsStore = new Ext.data.Store({
    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: 'checkboxfield',
        name: 'system',
        boxLabel: 'Production (PACTV)',
        inputValue: 'production',
        listeners: {
            change: function (checkbox, newValue, oldValue, eOpts) {
                var combo = checkbox.up('form').down('combobox');
                if (newValue) {
                    Ext.getCmp('secondComboID').setReadOnly(false);
                    Ext.getCmp('secondComboID').allowBlank = false;
                    Ext.getCmp('secondComboID').validate();
                } else {
                    Ext.getCmp('secondComboID').setReadOnly(true);
                    Ext.getCmp('secondComboID').allowBlank = true;
                    Ext.getCmp('secondComboID').validate();
                }
            }
        }
     }, {
        xtype: 'combobox',
        fieldLabel: 'Select Test',
        readOnly: true,
        id: 'secondComboID',
        store: testsStore,
        valueField: 'id',
        displayField: 'test',
        typeAhead: true,
        forceSelection: true,
        editable: true,
        triggerAction: 'all',
        lastQuery: ''
    }]
});

Here is a working fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1u9n

2
extjscheckboxcombobox

2 Answers

1
votes

Use this in your fiddle when you uncheck the checkbox:

Ext.getCmp('secondComboID').reset();
0
votes

Use this code to remove the datas from the combo or to load empty array data in the combo 

Ext.getCmp('secondComboID').getStore().loadRawData([]);

Also if You wish to load the previous datas again here is an example of it which allows us to toggle to load the datas and to remove datas from combo Try the FIDDLE