如何从 SENCHA/ext js 中的另一个组合框启用组合框？

Question

I need to change something in Sencha, I need to add a second combobox that in the begining must be disable, that's ok no problem with that, but then I need that the first combobox will enable the second combobox when some items (not all) from the first combo is selected, it looks very simple.

Here is the code:

var formPanel = new Ext.form.FormPanel({
  id: 'formanchor-form',
  title: 'Nuevo Gasto',
  bodyStyle: 'padding:5px 5px 0',
  width: 600,
  defaults: {
    width: 230
  },
  defaultType: 'textfield',
  renderTo: 'formulario',
  frame: true,
  items: [{
    xtype: 'combo',
    typeAhead: true,
    name: 'cboGasto',
    id: 'cboGasto',
    fieldLabel: 'Gastos',
    store: storeCbo,
    displayField: 'gasto',
    valueField: 'codigo',
    allowBlank: false,
    width: 250,
    mode: 'local',
    triggerAction: 'all',
    emptyText: 'SELECCIONE',
    blankText: 'Debe seleccionar un gasto',
    forceSelection: true
  }, {
    xtype: 'numberfield',
    fieldLabel: 'Monto',
    name: 'txtMonto',
    id: 'txtMonto',
    maxLength: 7,
    allowBlank: false,
    minValue: 100,
    minText: 'El monto mínimo es 100',
    maxValue: 9999999,
    maxLengthText: 'El monto máximo es 9.999.999',
    blankText: 'El monto es requerido',
    width: 100
  }, {
    xtype: 'combo',
    typeAhead: true,
    name: 'CboDeudasReceptor',
    id: 'CboDeudasReceptor',
    fieldLabel: 'Receptor',
    store: storeCboR,
    displayField: 'receptor',
    valueField: 'codigo',
    allowBlank: false,
    width: 250,
    mode: 'local',
    triggerAction: 'all',
    emptyText: 'SELECCIONE',
    blankText: 'Debe seleccionar un Receptor',
    forceSelection: true,
    disabled: true
  }],
  buttons: [{
    text: 'Agregar',
    handler: function() {
      var mon = Ext.getCmp('txtMonto').getValue();
      var gas = Ext.getCmp('cboGasto').getValue();
      if (mon.length == 0) {
        Ext.MessageBox.alert('Monto del Gasto', 'Debe Ingresar un monto para el gasto.');
        Ext.getCmp('txtMonto').focus();
        return false;
      }
      if (gas.length == 0) {
        Ext.MessageBox.alert('Gasto', 'Debe Seleccionar un gasto.');
        Ext.getCmp('cboGasto').focus();
        return false;
      }
      location.href = 'ingresa_gastos_lib.asp?cboGasto=' + gas + '&txtMontoPesos=' + mon + '&' + params();
    }
  }, {
    text: 'Volver',
    handler: function() {
      location.href = 'datos_deuda.asp?' + params();
    }
  }]
});

UPDATE:

If I put a listener in the first combo, then works partial like I want it, but the 2nd combo just work the dropdown but still looks like disabled, and I can´t edit. So the question now would be: How to put the 2nd combobox full operational.

listeners: {
  select: function(combo, record, index) {
    if (Ext.getCmp('cboGasto').getRawValue() == 'RECEPTOR: EMBARGO') {
      alert(Ext.getCmp('cboGasto').getRawValue());
      Ext.getCmp('CboDeudasReceptor').disabled = false;
    }
  }
}

Answer 1

Setting the disabled field to false does not a solution. It is just changing the value of the property in the object, but all visual styles are still there. You should use setDisabled() method of the combobox, or enable() and disabled() methods. So your listener should look like the following:

select: function (combo, record, index) {
    if (Ext.getCmp('cboGasto').getRawValue()=='RECEPTOR: EMBARGO'){
            alert(Ext.getCmp('cboGasto').getRawValue());
            Ext.getCmp('CboDeudasReceptor').setDisabled(false);
            //Or Ext.getCmp('CboDeudasReceptor').enable();
        }
    }
}

Answer 2

items:[{
    xtype: "combobox",
    name: "TubeWellId",
    fieldLabel: "Tubewell",
    store: tube_well_store,
    allowBlank: false,
    displayField: "TubeWellName",
    valueField: "TubeWellId",
    queryMode: "local",
    forceSelection: true,
    listeners: {
        select: function (combo) {
            var getForm = this.up("form").getForm();
            if (combo.getValue() === 1) {
                getForm.findField("TubeWellDistance").setReadOnly(true);
            } else {
                getForm.findField("TubeWellDistance").setReadOnly(false);
            }
        }
    }
}, {
    xtype: "combobox",
    name: "TubeWellDistance",
    fieldLabel: "Tubewell Distance",
    store: tube_well_store,
    allowBlank: false,
    displayField: "DistanceName",
    valueField: "DistanceId",
    queryMode: "local",
    forceSelection: true,
}]