extjs सकर्मक - एकल पंक्ति के लिए क्रिया कॉलम आइटम को अक्षम कैसे करें?




सही का (5)

इस JSON नमूना पर विचार करें:

[{id:1,editable:true},{id:2,editable:false}]

ये रिकॉर्ड स्टोर में लोड किए जाने वाले हैं, फिर एक ग्रिड पैनल में प्रदर्शित किए जाते हैं। इस ग्रिड में एक ऐक्शन कॉलम आइटम है जो संस्करण के प्रयोजनों के लिए है। मैं प्रतिपादन के बाद गणना के बिना दूसरी पंक्ति के लिए केवल "संपादित करें" बटन को अक्षम करने का एक तरीका देख रहा हूं। मैं एक निर्मित सुविधा का उपयोग करना चाहता हूं जो ग्रिड प्रदान किए जाने के बाद प्रत्येक पंक्ति को अपडेट करने के लिए स्टोर के माध्यम से लूप के बजाय renderer प्रॉपर्टी की तरह कार्य करता है।

क्या एक्स्टजेएस 4.1.1 इस प्रकार की सुविधा प्रदान करता है?


Answers

Ive ExtJs 6.0.1 संस्करण में निम्नलिखित का इस्तेमाल किया है और अच्छी तरह से काम करता है। 'Getclass' कॉन्फ़िग का उपयोग करें एक समारोह जो आइकन छवि पर लागू करने के लिए सीएसएस वर्ग देता है।

                {
                  xtype: 'actioncolumn',
                  flex: 1,
                  text: 'Action'
                  items: [{
                      tooltip: 'Import',
                      getClass: function (value, meta, record) {
                         if(record.get('Name') == 'disable'){
                             return 'x-hidden'; // when u want to hide icon
                         }
                      }
                         return 'x-grid-icon' ; // show icon


                  }]
                }

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

{
    header:    " ",
    dataIndex: "some_index",
    width:     26,
    renderer: function(value, metaData){
        metaData.style += "padding:0px;";
        if(value)
            return "&nbsp;<img src=\"extjs/4.0/sms/icons/fam/magnifier.png\"/>";
        return value;
    },
    listeners: {
        click: function(gridView, htmlSomething, rowIndex, columnIndex, theEvent){
            var store = myGrid.getStore();
            var record = store.getAt(rowIndex);
            if(record.get("some_index"))
                //do action
        }
    }
}

आप isDisabled कॉन्फ़िग सेट कर सकते हैं (कम से कम संस्करण 4.2.1):

{
    xtype:'actioncolumn',
    width:20,
    items: [
        {
            icon: 'app/images/edit.png',
            tooltip: 'Edit this row',
            handler: function(gridview, rowIndex, colIndex, item, e, record, row) {
                var grid=gridview.up('grid');
                // You need to listen to this event on your grid.
                grid.fireEvent('editRecord', grid, record);
            },
            isDisabled: function(view, rowIndex, colIndex, item, record) {
                // Returns true if 'editable' is false (, null, or undefined)
                return !record.get('editable');
            }
    ]
}

जब निष्क्रिय होता है (..) रिटर्न सही आइकन आइकन धुंधला है और हैडलर माउस क्लिक पर ट्रिगर नहीं है


मैं इस सवाल को भूल गया था जब तक लुईस ने जवाब नहीं दिया। अंत में लापता सुविधाओं को जोड़ने के लिए ActionColumn को ओवरराइड करने का निर्णय लिया। यहां कोड है:

Ext.grid.column.Action.override({
    defaultRenderer: function (v, meta) {
        var me = this,
            disabled, tooltip,
            prefix = Ext.baseCSSPrefix,
            scope = me.origScope || me,
            items = me.items,
            len = items.length,
            i = 0,
            item;
        v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
        meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
        for (; i < len; i++) {
            item = items[i];
            disabled = item.disabled || (item.isDisabled ? item.isDisabled.apply(item.scope || scope, arguments) : false);
            tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
            if (!item.hasActionConfiguration) {
                item.stopSelection = me.stopSelection;
                item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
                item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
                item.hasActionConfiguration = true;
            }
            v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
            '" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
            ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
            (tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
        }
        return v;
    }
});

असल में, हालांकि यह शायद प्रेरणा नहीं है, शैली के लिए ऐसा करने से कुछ समझ आता है। बहुत से स्टाइल सम्मेलन कुछ भूलना मुश्किल बनाते हैं, जैसे कि हमेशा एक और बयान के बावजूद {} को किसी अन्य ब्लॉक के आस-पास रखना। "इस" को पुन: असाइन करना उस शुरुआत में समान प्रभाव डालेगा जावास्क्रिप्ट प्रोग्रामर के पास उस समय का उच्च प्रतिशत "बस काम" बंद हो जाएगा।