1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default Ext.ux.form.TriCheckbox

    Ext.ux.form.TriCheckbox


    Okay, not tested very much till now, but perhaps already of some use: A first approach for an Ext.ux.form.TriCheckbox for ExtJs 4.

    To spare an extra css, I create the style-information dynamically.

    Every feedback is welcome, I would be glad if some of the professionals may have a look.

    Thanks to Condor, I got some ideas from http://extjs.com/forum/showthread.php?t=28096

    Code:
    // Add style for "null"-value dynamically
    var sStyle = '.x-checkbox-null input {\n';
    sStyle += '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";\n';
    sStyle += 'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);\n';
    sStyle += 'opacity:.5;}';
    Ext.util.CSS.createStyleSheet(sStyle, 'Ext.ux.form.TriCheckbox');
    
    // Define class Ext.ux.form.TriCheckbox
    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';
            if (v === true) 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[oldCheck])
                me['addCls'](me.checkedClasses[this.currentCheck]);
            }
        },
        
        // 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
        onBoxClick: function(e) 
        {    this.toggle();
        },
        
        // 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 = 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);
        }
    });

  2. #2
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
    morfeusz is on a distinguished road

      0  

    Default


    Very good extension!
    I can even set different states.
    I have [0,1,2] and it`s work.
    Thanks.

  3. #3
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
    morfeusz is on a distinguished road

      0  

    Default


    How to set default value?
    value, inputValue and checked don`t work.

    Now I use this:
    listeners:{render:function(v){v.setValue(myVar)}}

    But it`s not good solve.

  4. #4
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    Hi morfeusz,

    you are right: It wasn't possible to set a default-value. I added a initValue: function() in the code above, but I'm not able to test it today, please give me some feedback if this works for you.

  5. #5
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
    morfeusz is on a distinguished road

      0  

    Default


    Thanks for answer.
    How can I use this function?

  6. #6
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    Sorry: I fixed the code in the 1st post of this thread - just use the code there.

  7. #7
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
    morfeusz is on a distinguished road

      0  

    Default


    Its not help.
    I use code like this
    Code:
    {
       xtype:'tri-checkbox',
       boxLabel:'Label',
       value:1 // or '1' or 0 or '0'
    }
    and its init with null value

  8. #8
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    Thanks again for your feedback. I got some time this morning and changed the code above again - please try it. It now works for me with: value: '1' (you need to set the value and type of the value to match one value of "values".)

  9. #9
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
    morfeusz is on a distinguished road

      0  

    Default


    Now it`s work perfect.
    Thanks for help.

  10. #10
    Sencha User
    Join Date
    May 2009
    Posts
    1
    Vote Rating
    0
    arcade is on a distinguished road

      0  

    Default


    When you disable the tri-state checkbox, the checkbox doesn't behaves as a "normal" checkbox (two states).

    Here is a fix.

    Code:
    // 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]);
            }
        }