Как реализовать пользовательскую сортировку строк для ExtJS GridPanel - PullRequest
Новая
       17

Как реализовать пользовательскую сортировку строк для ExtJS GridPanel

0 голосов
/ 08 ноября 2011

Я реализовал веб-приложение, которое имеет GridPanel, который можно группировать или разгруппировать, и где строки должны сортироваться буквенно-цифровым образом (как это делает стандартная функция сортировки сетки), но за исключением того, что некоторые строки, представляющие итоговые строки, не должны быть отсортированными вообще и должен оставаться в той же позиции строки.

Для архивации я хотел написать собственную функцию сортировки строк для панели сетки. Может кто-нибудь подсказать, как это заархивировать? (переписать какие функции, как реализовать). Или кто-нибудь знает литературу, учебные пособия, примеры и т. Д. Или может поделиться исходным кодом о том, как это можно сделать?

Я использую ExtJs версии 3.4.

Большое спасибо заранее.

Приветствия

Seha

Ответы [ 2 ]

0 голосов
/ 02 января 2015

Вот пример кода, который работал для меня в ExtJS 3.4.

Вы можете использовать это в GridPanel или EditorGridPanel, я поместил его в конструктор, используя унаследованный класс, но вы сможете добавить его, если вы также создаете экземпляр ванильной сетки, просто убедитесь, что вы не используют глобальную переменную scope.

Убедитесь, что переменная grid содержит ссылку на вашу сетку (после того, как она была определена). 

// Apply column 'sortBy' overrides
var column, columns = grid.getColumnModel() && grid.getColumnModel().config;
var sortColumns = {}, sortByInfo = {};
if (columns && columns.length) {
    for (var i = 0; i < columns.length; i++) {
        column = columns[i];
        // Do we have a 'sortBy' definition on a column?
        if (column && column.dataIndex && column.sortBy) {
            // Create two hashmap objects to make it easier 
            // to find this data when sorting 
            // (using 'if (prop in object)' notation)
            sortColumns[column.dataIndex] = column.sortBy;
            sortByInfo[column.sortBy] = column.dataIndex;
        }
    }
    if (!$.isEmptyObject(sortColumns)) {
        // Override the 'getSortState()' helper on the store, this is needed to
        // tell the grid how its currently being sorted, otherwise it
        // will get confused and think its sorted on a different column.
        grid.store.getSortState = function() {
            if (this.sortInfo && this.sortInfo.field in sortByInfo)
                return { field: sortByInfo[this.sortInfo.field], direction: this.sortInfo.direction || 'ASC' };
            return this.sortInfo;
        }
        // Override the default sort() method on the grid store
        // this one uses our own sorting information instead.
        grid.store.sort = function(field, dir) {
            var sort = this.constructor.prototype.sort;
            if (field in sortColumns) {
                return sort.call(this, sortColumns[field], dir);
            } else {
                return sort.call(this, field, dir);
            }
        }
    }
}

Затем просто добавьте запись sortBy в определение столбца: 

 colModel: new Ext.grid.ColumnModel({
    defaults: {
        sortable: true  
    },
    columns: [
    {
        header: 'Name',
        dataIndex: 'name',
        width: 350
    }, {
        header: 'Code',
        dataIndex: 'code_summary',
        sortBy: 'code_sort_order',
        width: 100
    }, {
        header: 'Start Date',
        dataIndex: 'start_date',
        width: 85
    }]
}),

PS: не забудьте добавить поле, по которому вы сортируете (code_sort_order), в ваше хранилище данных.

0 голосов
/ 08 ноября 2011

Для сортировки данных хранилища, лежащих в основе панели сетки, используется метод Ext.data.Store.sort ().Вы можете переопределить этот метод в вашем конкретном экземпляре хранилища.

Другая возможность - установить для remoteSort значение true и отсортировать данные на сервере.

...