是否有一个extJS三态/三态复选框？

Question

寻找一个可以容纳三种状态的复选框。

使用： 真，假，未知。

预期的行为： [x]，[ ]，[~]

任何人都知道的东西吗？从这个website

分机6.2.1 此代码exerpt

Answer 1

分机3. *三态是从sencha forums

{ 
 
      name: 'optionalChange', 
 
      fieldLabel: 'Optional change', 
 
      xtype: 'tri-checkbox', 
 
      value: 'null' 
 
     },

.x-checkbox-null .x-form-checkbox-default { 
 
    border: 1px inset #a0a0a0; 
 
    background: lightgrey; 
 
    box-shadow: 0 0 0 1px hsl(0, 0%, 80%); 
 
}

/** 
 
* Tri-state Checkbox. 
 
* Author: ontho & nux 
 
* Source: https://www.sencha.com/forum/showthread.php?138664-Ext.ux.form.TriCheckbox&p=619810 
 
* 
 
* Note! You must add `x-checkbox-null` style for yourself. 
 
* This might work for classic theme: 
 
.x-checkbox-null .x-form-checkbox-default { 
 
    background-position: -39px -26px; 
 
} 
 
* 
 
*/ 
 
Ext.define('Ext.ux.form.TriCheckbox', { 
 
    extend: 'Ext.form.field.Checkbox', 
 
    alias: ['widget.xtricheckbox', "widget.tri-checkbox"], 
 

 
    triState: true, // triState can dynamically be disabled using enableTriState 
 

 
    values: ['null', '0', '1'], // The values which are toggled through 
 
    checkedClasses: ['x-checkbox-null', '', Ext.baseCSSPrefix + 'form-cb-checked'], // The classes used for the different states 
 

 
    currentCheck: 0, // internal use: which state we are in? 
 

 
    getSubmitValue: function() 
 
    { 
 
     return this.value; 
 
    }, 
 

 
    getRawValue: function() 
 
    { 
 
     return this.value; 
 
    }, 
 

 
    getValue: function() 
 
    { 
 
     return this.value; 
 
    }, 
 

 
    initValue: function() 
 
    { 
 
     var me = this; 
 
     me.originalValue = me.lastValue = me.value; 
 
     me.suspendCheckChange++; 
 
     me.setValue(me.value); 
 
     me.suspendCheckChange--; 
 
    }, 
 

 
    setRawValue: function(v) 
 
    { 
 
     var me = this; 
 

 
     if (v === false || v == 0) 
 
      v = '0'; 
 
     if (v === true || v == 1) 
 
      v = '1'; 
 
     if (v == null || v == '' || v === undefined) 
 
     { 
 
      if (!this.triState) 
 
       v = '0'; 
 
      else 
 
       v = 'null'; 
 
     } 
 

 
     var oldCheck = me.currentCheck; 
 
     me.currentCheck = me.getCheckIndex(v); 
 
     me.value = me.rawValue = me.values[me.currentCheck]; 
 

 
     // Update classes 
 
     var inputEl = me.inputEl; 
 
     if (inputEl) 
 
     { 
 
      inputEl.dom.setAttribute('aria-checked', me.value == '1' ? true : false); 
 
     } 
 
     me['removeCls'](me.checkedClasses) 
 
     me['addCls'](me.checkedClasses[this.currentCheck]); 
 
    }, 
 

 
    // this is a defaul Checkbox style setter we need to override to remove defult behaviour 
 
    updateCheckedCls: function(checked) { 
 
    }, 
 

 
    // Returns the index from a value to a member of me.values 
 
    getCheckIndex: function(value) 
 
    { 
 
     for (var i = 0; i < this.values.length; i++) 
 
     { 
 
      if (value === this.values[i]) 
 
      { 
 
       return i; 
 
      } 
 
     } 
 
     return 0; 
 
    }, 
 

 
    // Handels a click on the checkbox 
 
    listeners: { 
 
     afterrender: function() 
 
     { 
 
      var me = this; 
 
      this.el.dom.onclick = function(){ 
 
       me.toggle(); 
 
       return false; 
 
      }; 
 
     } 
 
    }, 
 

 
    // Switches to the next checkbox-state 
 
    toggle: function() 
 
    { 
 
     var me = this; 
 
     if (!me.disabled && !me.readOnly) 
 
     { 
 
      var check = me.currentCheck; 
 
      check++; 
 
      if (check >= me.values.length) { 
 
       check = (me.triState == false) ? 1 : 0; 
 
      } 
 
      this.setValue(me.values[check]); 
 
     } 
 
    }, 
 

 
    // Enables/Disables tristate-handling at runtime (enableTriState(false) gives a 'normal' checkbox) 
 
    enableTriState: function(bTriState) 
 
    { 
 
     if (bTriState == undefined) 
 
      bTriState = true; 
 
     this.triState = bTriState; 
 
     if (!this.triState) 
 
     { 
 
      this.setValue(this.value); 
 
     } 
 
    }, 
 

 
    // Toggles tristate-handling ar runtime 
 
    toggleTriState: function() 
 
    { 
 
     this.enableTriState(!this.triState); 
 
    } 
 
});