online - labelalign extjs

¿Hay una casilla de verificación extJS tri state/three state?

Question

Buscando una casilla de verificación que puede contener tres estados.

Uso: verdadero, falso, desconocido.

Comportamiento esperado: [x] , [ ] , [~]

Alguien sabe de algo?

Answer 1

Ext 3. * tri-estado de este sitio web

Ext 6.2.1 Este código es de los foros de Sencha

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