checkbox - वहाँ एक extJS त्रिकोणीय राज्य / तीन राज्य चेकबॉक्स है?




(2)

एक चेकबॉक्स की तलाश है जो तीन राज्यों को पकड़ सकता है।

का प्रयोग करें: सही, गलत, अज्ञात

अपेक्षित व्यवहार: [x] , [ ] , [~]

किसी को भी कुछ पता है?


Answers

Ext 3. * इस वेबसाइट से त्रि राज्य

Ext 6.2.1 यह कोड exerpt 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);
    }
});  


सर्वर पर एक HTML चेकबॉक्स पोस्ट करते समय, इसमें 'ऑन' या '' का स्ट्रिंग मान होता है।

रीडोनली उपयोगकर्ता को चेकबॉक्स को संपादित नहीं करता है, और अक्षम मूल्य को वापस पोस्ट किए जाने से रोकता है।
इसके आस-पास एक तरीका वास्तविक मूल्य को संग्रहीत करने के लिए एक छुपा तत्व होना है और प्रदर्शित चेकबॉक्स एक डमी है जो अक्षम है। इस तरह चेकबॉक्स स्थिति पोस्ट के बीच जारी है।

ऐसा करने के लिए यहां एक कार्य है। यह 'टी' या 'एफ' की एक स्ट्रिंग का उपयोग करता है और आप इसे किसी भी तरह से बदल सकते हैं। यह सर्वर साइड वीबी स्क्रिप्ट का उपयोग कर एएसपी पेज में इस्तेमाल किया गया है।

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        i_strChecked_TorF = ""
    end if

    MakeDummyReadonlyCheckbox = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _
        "value='" & i_strChecked_TorF & "'>" & _
    "<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _
        strThisCheckedValue & ">"   
end function

public function GetCheckbox(i_objCheckbox)

    select case trim(i_objCheckbox)

        case ""
            GetCheckbox = "F"

        case else
            GetCheckbox = "T"

    end select

end function

एएसपी पेज के शीर्ष पर आप लगातार मूल्य उठा सकते हैं ...

strDataValue = GetCheckbox(Request.Form("chkTest"))

और जब आप अपना चेकबॉक्स आउटपुट करना चाहते हैं तो आप यह कर सकते हैं ...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

मैंने इसका परीक्षण किया है और यह ठीक काम करता है। यह जावास्क्रिप्ट पर भरोसा नहीं करता है।