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