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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi