sorting - सामग्री के आधार पर कस्टम जे एस सॉर्ट कस्टम कस्टम कॉलम




extjs (4)

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

{
    text: 'Parent',
    dataIndex: 'Parent',
    renderer: function(value, meta, record) {
        var ret = record.raw.Parent;
        if (ret) {
            return ret.Name;
        } else {
            meta.tdCls = 'invisible';
            return record.data.Name;
        }
    },
    sortable: true
},

Answers

doSort जेएस संस्करण 5 के लिए, ऐसा लगता है कि doSort बाहर निकल गया था, इसलिए मैं इसे ओवरराइड नहीं कर सका। इसके बजाय, मैं sortchange ईवेंट को सुनने का मार्ग चला गया, और वहां से, मैंने Ext.data.Store.setSorters विधि का उपयोग किया। यह कोड थोड़ा सा कस्टम है, और जो डेटा मैं उपयोग कर रहा हूं, उसके कारण अति जटिल है, इसलिए इसे ध्यान में रखें ( यहां बेला ):

// grid class
initComponent: function() {
  ...
  this.on('sortchange', this.onSortChange, this);
},

onSortChange: function(container, column, direction, eOpts) {
  // check for dayColumnIndex
  if (column && column.dayColumnIndex !== undefined) {
    this.sortColumnByIndex(column.dayColumnIndex, direction);
  }
},

sortColumnByIndex: function(columnIndex, direction) {
  var store = this.getStore();
  if (store) {
    var sorterFn = function(rec1, rec2) {
      var sortValue = false;
      if (rec1 && rec2) {
        var day1;
        var daysStore1 = rec1.getDaysStore();
        if (daysStore1) {
          day1 = daysStore1.getAt(columnIndex);
        }
        var day2;
        var daysStore2 = rec2.getDaysStore();
        if (daysStore2) {
          day2 = daysStore2.getAt(columnIndex);
        }
        if (day1 && day2) {
          var val1 = day1.get('value');
          var val2 = day2.get('value');
          sortValue = val1 > val2 ? 1 : val1 === val2 ? 0 : -1;
        }
      }
      return sortValue;
    };
    if (direction !== 'ASC') {
      sorterFn = function(rec1, rec2) {
        var sortValue = false;
        if (rec1 && rec2) {
          var day1;
          var daysStore1 = rec1.getDaysStore();
          if (daysStore1) {
            day1 = daysStore1.getAt(columnIndex);
          }
          var day2;
          var daysStore2 = rec2.getDaysStore();
          if (daysStore2) {
            day2 = daysStore2.getAt(columnIndex);
          }
          if (day1 && day2) {
            var val1 = day1.get('value');
            var val2 = day2.get('value');
            sortValue = val1 < val2 ? 1 : val1 === val2 ? 0 : -1;
          }
        }
        return sortValue;
      };
    }
    store.setSorters([{
      sorterFn: sorterFn
    }]);
  }
}

आपको कॉलम के doSort विधि को ओवरराइड करने में सक्षम होना चाहिए। यहां इसका सार है मैंने एक काम करने वाले बेला ( http://jsfiddle.net/cfarmerga/LG5uA/ ) भी बनाया है। बेला की तरह एक फ़ील्ड की स्ट्रिंग लंबाई का उपयोग करने के लिए संपत्ति पर, लेकिन निश्चित रूप से आप अपने खुद के कस्टम सॉर्ट तर्क लागू कर सकते हैं।

var grid = Ext.create('Ext.grid.Panel',{
    //...
    columns: [
        { text: 'name', dataIndex: 'name', sortable: true },
        {
            text: 'Custom',
            sortable : true,
            dataIndex: 'customsort',
            doSort: function(state) {
                var ds = this.up('grid').getStore();
                var field = this.getSortParam();
                ds.sort({
                    property: field,
                    direction: state,
                    sorterFn: function(v1, v2){
                        v1 = v1.get(field);
                        v2 = v2.get(field);
                        return v1.length > v2.length ? 1 : (v1.length < v2.length ? -1 : 0);
                    }
                });
            }
        }
    ]
   //....  
});

Ext.data.Model वर्ग पर एक कनवर्ट विधि है जो आपको डेटा का उपयोग करने से पहले कन्वर्ट करने की अनुमति देता है। फिर आप अपने कॉलम में यह 'डेटाइंडेक्स' को निर्दिष्ट कर सकते हैं और एक सामान्य प्रकार का कर सकते हैं। कॉलम उस रूपांतरित मूल्य से क्रमबद्ध होगा। यहां केवल एक फ़ील्ड (जनक) के साथ एक नमूना मॉडल है और इसकी इसी रूपांतरण के साथ:

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'Parent',   type: 'string', convert: sortParent},
        // other fields...
    ],
    sortParent: function(value, record) {
        var ret = record.raw.Parent;
        if (ret) {
            return ret.Name;
        } else {
            meta.tdCls = 'invisible';
            return record.data.Name;
        }
    }
});

यदि एसक्यूएल आपके लिए स्वाभाविक रूप से आता है, तो एसकल्डएफ ऑर्डर को कोडड के रूप में संभालता है।





sorting extjs