Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: Ext.ux.form.TriCheckbox

  1. #11
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    274
    Vote Rating
    7
      0  

    Default

    @arcade: Thanks a lot!

  2. #12
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    -1
      0  

    Default

    How can I use my own gif with this checkbox?

    checkbox-vf.gif

    I tried to use the css defined by Condor and point the checkedClasses to it but it didn't work:

    Code:
    checkedClasses: ['x-checkbox-undef', 'x-item-disabled', 'x-checkbox-checked']
    Code:
    .x-form-tscheckbox {
        height: 13px;
        width: 13px;
        background: url('checkbox.gif') no-repeat 0 0;
        vertical-align: bottom;
    }
    .x-checkbox-checked .x-form-tscheckbox {
        background-position:0 -13px;
    }
    .x-checkbox-undef .x-form-tscheckbox {
        background-position:0 -26px;
    }
    .x-item-disabled .x-form-tscheckbox {
        background-position:-39px 0;
    }
    .x-form-check-over .x-form-tscheckbox {
        background-position: -13px 0;
    }
    .x-form-check-down .x-form-tscheckbox {
        background-position:-26px 0;
    }
    .x-checkbox-checked .x-form-check-over .x-form-tscheckbox {
        background-position:-13px -13px;
    }
    .x-checkbox-checked .x-form-check-down .x-form-tscheckbox {
        background-position:-26px -13px;
    }
    .x-checkbox-checked.x-item-disabled .x-form-tscheckbox {
        background-position:-39px -13px;
    }
    .x-checkbox-undef .x-form-check-over .x-form-tscheckbox {
        background-position:-13px -26px;
    }
    .x-checkbox-undef .x-form-check-down .x-form-tscheckbox {
        background-position:-26px -26px;
    }
    .x-checkbox-undef .x-item-disabled .x-form-tscheckbox {
        background-position:-39px -26px;
    }

  3. #13
    Sencha User
    Join Date
    Aug 2012
    Posts
    12
    Vote Rating
    0
      0  

    Default

    How can I set checkbox values(states) on this checkboxes? I mean - can I send list of checkboxes, that needs to be checked and them will be check?

  4. #14
    Sencha Premium User Nux's Avatar
    Join Date
    Feb 2016
    Location
    3city, Poland
    Posts
    31
    Vote Rating
    2
      0  

    Default Update for ExtjS 6

    I've updated this for ExtjS 6.2.1. Haven't tested this thoroughly yet, but it seems to work with FF and Chrome.

    PHP Code:
    /**
     * 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"],

        
    triStatetrue// 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

        
    currentCheck0// 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 (
    === false || == 0)
                
    '0';
            if (
    === true || == 1)
                
    '1';
            if (
    == null || == '' || === undefined)
            {
                if (!
    this.triState)
                    
    '0';
                else
                    
    '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 
    0this.values.lengthi++)
            {
                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) ? 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);
        }
    }); 
    I use a different CSS to get a reasonably good look on all themes:
    PHP Code:
    .x-checkbox-null .x-form-checkbox-default {
        
    border1px inset #a0a0a0;
        
    backgroundlightgrey;
        
    box-shadow0 0 0 1px hsl(00%, 80%);

    Usage

    Basic use in a Form:
    PHP Code:
            {
                
    name'optionalChange',
                
    fieldLabel'Optional change',
                
    xtype'tri-checkbox',
                
    value'null'
            
    }, 
    Note that `value` is expected to be a string. By default they values are: `['null', '0', '1']`.


    To send value only when it is not null you can use this:
    PHP Code:
            {
                
    name'optionalChangeDontSend',
                
    fieldLabel'Null not sent',
                
    xtype'tri-checkbox',
                
    value'null',
                
    listeners: {
                    
    // setup `submitValue` based on new value
                    
    change: function(fieldnewValue) {
                        if (
    newValue === 'null') {
                            
    this.setSubmitValue(false);
                        } else {
                            
    this.setSubmitValue(true);
                        }
                    },
                    
    // init `submitValue` based on value config
                    
    afterrender: function(){
                        if (
    this.value.length) {
                            
    this.fireEvent('change'thisthis.value);
                        }
                    }
                }
            }, 

Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •