Is there a extJS tri state/three state checkbox?

Question

Looking for a checkbox that can hold three states.

Use: True, False, Unknown.

Expected behavior: [x], [ ], [~]

Anyone know of anything?

Answer 1

Ext 3.* Tri-state from this website

Ext 6.2.1 This code exerpt is from 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);
    }
});