Is there a extJS tri state/three state checkbox? - extjs

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);
}
});