मूल्य

Question

के आधार पर कुछ पंक्तियों के लिए चेककॉल अक्षम करता है, मेरे पास चेककॉल के साथ एक ग्रिड है। यह डेटा इंडेक्स है, उदाहरण के लिए, 'चेक'।

मैं कुछ पंक्तियों के लिए चेकबॉक्स अक्षम या छिपाना चाहता हूं, जहां एक और मान, उदाहरण के लिए 'can_be_checked', झूठा/खाली है।

रेंडरर पहले ही चेककॉलम में परिभाषित है, इसके साथ गड़बड़ कर चेकबॉक्स की पीढ़ी टूट जाती है।

मैं यह कैसे कर सकता हूं?

Answer 1

उदाहरण के लिए आप सिर्फ रेंडरर अंदर चेकबॉक्स छिपा सकते हैं,:

column.renderer = function(val, m, rec) { 
    if (rec.get('can_be_checked') == 'FALSE')) 
     return ''; 
    else 
     return (new Ext.ux.CheckColumn()).renderer(val); 
}; 

Answer 2

मैं इस के लिए एक समाधान के लिए देख रहा है और इस प्रश्न में आए, लेकिन कोई समस्या का समाधान कहीं भी एक विकलांग चेकबॉक्स दिखाने के बजाय करने के लिए किया गया था अन्य उत्तर में शामिल के रूप में कोई चेकबॉक्स नहीं। यह एक तरह से शामिल था, लेकिन यहाँ मैं (4.1.0 के लिए) क्या किया है:

1. मैंने पाया कि ExtJS \ उदाहरण \ UX \ सीएसएस \ CheckHeader.css Ext.ux.CheckColumn द्वारा किया जाता है फ़ाइल जो ऐसा नहीं करता एक अक्षम वर्ग है, इसलिए मैं को मानक चेकबॉक्स स्टाइल ext-all.css (जिसमें एक अक्षम चेकबॉक्स कक्षा शामिल है) में निहित मानक चेकबॉक्स स्टाइल की तरह अधिक संशोधित करना था।

2. मुझे Ext.ux.CheckColumn को अक्षम चेकबॉक्स से निकालकर रोकने के लिए Ext.ux.CheckColumn का विस्तार करना पड़ा।

3. अंत में, मुझे अपने तर्क के अनुसार विकलांग कक्षा लागू करने के लिए अपना स्वयं का प्रस्तुतकर्ता प्रदान करना पड़ा।

कोड निम्नानुसार है।

संशोधित CheckHeader.css:

.x-grid-cell-checkcolumn .x-grid-cell-inner { 
    padding-top: 4px; 
    padding-bottom: 2px; 
    line-height: 14px; 
} 
.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner { 
    padding-top: 3px; 
} 

.x-grid-checkheader { 
    width: 13px; 
    height: 13px; 
    background-image: url('../images/checkbox.gif'); 
    background-repeat: no-repeat; 
    background-color: transparent; 
    overflow: hidden; 
    padding: 0; 
    border: 0; 
    display: block; 
    margin: auto; 
} 

.x-grid-checkheader-checked { 
    background-position: 0 -13px; 
} 

.x-grid-checkheader-disabled { 
    background-position: -39px 0; 
} 

.x-grid-checkheader-checked-disabled { 
    background-position: -39px -13px; 
} 

.x-grid-checkheader-editor .x-form-cb-wrap { 
    text-align: center; 
} 

इस छवि को अंक जो आम तौर पर कम से ExtJS 4.1.0 के साथ जहाजों ऊपर पृष्ठभूमि छवि url: ExtJS \ संसाधन \ विषयों \ छवियों \ डिफ़ॉल्ट \ प्रपत्र \ checkbox.gif।

बढ़ाया Ext.ux.CheckColumn वर्ग ताकि घटनाओं विकलांग checkcolumns से निकाल दिया नहीं किया जाएगा:

Ext.define('MyApp.ux.DisableCheckColumn', { 
    extend: 'Ext.ux.CheckColumn', 
    alias: 'widget.disablecheckcolumn', 

    /** 
    * Only process events for checkboxes that do not have a "disabled" class 
    */ 
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) { 
     var enabled = Ext.query('[class*=disabled]', cell).length == 0, 
      me = this; 

     if (enabled) { 
      me.callParent(arguments); 
     } 
    }, 

}); 

कस्टम दाता के साथ कार्यान्वयन अपने ही तर्क के अनुसार विकलांग वर्ग लागू करने के लिए:

column = { 
    xtype: 'disablecheckcolumn', 
    text: myText, 
    dataIndex: myDataIndex, 
    renderer: function(value, meta, record) { 
     var cssPrefix = Ext.baseCSSPrefix, 
      cls = [cssPrefix + 'grid-checkheader'], 
      disabled = // logic to disable checkbox e.g.: !can_be_checked 

     if (value && disabled) { 
      cls.push(cssPrefix + 'grid-checkheader-checked-disabled'); 
     } else if (value) { 
      cls.push(cssPrefix + 'grid-checkheader-checked'); 
     } else if (disabled) { 
      cls.push(cssPrefix + 'grid-checkheader-disabled'); 
     } 

     return '<div class="' + cls.join(' ') + '">&#160;</div>'; 

    } 
}; 

Answer 3

मैं का हल मिल गया चेकबॉक्स की समस्या क्लिक करने योग्य नहीं है जब Aniketos कोड को इंगित करते हैं, आपको यह सुनिश्चित करना होगा कि आपके कॉलम के कोड में आप xtype निर्दिष्ट करते हैं: 'चेककॉलम, यह चाल करेगा

Answer 4

मैं भी इस समस्या में भाग गया और इसे एक कदम आगे ले जाने के लिए मुझे चेकबॉक्स पर टूलटिप दिखाने की आवश्यकता थी। यहाँ समाधान मैं आया था उस के साथ कम से कम मौजूदा checkcolumn विजेट पर आक्रामक हो रहा है ...

renderer: function (value, metaData, record) { 
    // Add a tooltip to the cell 
    metaData.tdAttr = (record.get("someColumn") === "") ? 'data-qtip="A tip here"' : 'data-qtip="Alternate tip here"'; 

    if (record.get("someColumn") === "") { 
     metaData.tdClass += " " + this.disabledCls; 
    } 

    // Using the built in defaultRenderer of the checkcolumn 
    return this.defaultRenderer(value, metaData); 
} 

Answer 5

ExtJS 5 का उपयोग करते हुए यह आसान है दूसरों के लिए लक्ष्य चेक बॉक्स और '' के लिए रेंडरर विधि में defaultRenderer वापस जाने के लिए है।

renderer: function (value, metaData, record) { 
    return (record.isLeaf()) ? '' : this.defaultRenderer(value, metaData); 
} 

इस तरह के चेकबॉक्स खुद से नहीं चल पाएगी लेकिन सभी घटनाओं (अर्थात checkchange, itemclick, आदि) बने रहे हो जाएगा। यदि आप उन्हें नहीं चाहते हैं, तो आप उन्हें beforesmth ईवेंट में अक्षम कर सकते हैं, उदाहरण के लिए

onBeforeCheckRequestsChange: function(me, rowIndex, checked, eOpts) { 
    var row = me.getView().getRow(rowIndex), 
     record = me.getView().getRecord(row); 
    return !record.isLeaf(); 
},