如何禁用ExtJS中特定行的排序

时间:2017-08-28 06:28:17

标签: sorting extjs extjs4.1

我有一个ExtJs网格,其中我不想排序第一行。如何用ExtJS分拣机忽略它?

sortchange( ct, column, direction, eOpts ){
      console.log(column, ct);
    },

我们可以使用sortchange听众吗?

3 个答案:

答案 0 :(得分:1)

您所能做的就是编写特殊的分拣机,以便始终保持第一行。可以找到自定义排序器功能的示例here

在您的情况下,您可以使用特殊的布尔字段“keepOnTop”和分拣机:

sorterFn: function(a, b) {
    // Special sorting for first line:
    if(a.get('keepOnTop')) return 1;
    if(b.get('keepOnTop')) return -1;
    // Usual sorting; example with "department" index:
    if(a.get('department') < b.get('department')) return 1;
    if(a.get('department') > b.get('department')) return -1;
    return 0;
},

(请注意,此分拣机只需要一行将keepOnTop设置为true。)

答案 1 :(得分:1)

在ExtJs docs中,提供了使用 sortable 禁用排序列的方法来加载数据。 You can refer ExtJs docs

我已经创建了一个小型演示来向您展示它是如何工作的。 Sencha fiddle example

Ext.create('Ext.data.Store', {
    storeId: 'employeeStore',
    fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
    data: [{
        firstname: "Michael",
        lastname: "Scott",
        seniority: 7,
        dep: "Management",
        hired: "01/10/2004"
    }, {
        firstname: "Dwight",
        lastname: "Schrute",
        seniority: 2,
        dep: "Sales",
        hired: "04/01/2004"
    }, {
        firstname: "Jim",
        lastname: "Halpert",
        seniority: 3,
        dep: "Sales",
        hired: "02/22/2006"
    }, {
        firstname: "Kevin",
        lastname: "Malone",
        seniority: 4,
        dep: "Accounting",
        hired: "06/10/2007"
    }, {
        firstname: "Angela",
        lastname: "Martin",
        seniority: 5,
        dep: "Accounting",
        hired: "10/21/2008"
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Column Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [{
        text: 'First Name',
        dataIndex: 'firstname',
        sortable: false
    }, {
        text: 'Last Name',
        dataIndex: 'lastname'
    }, {
        text: 'Hired Month',
        dataIndex: 'hired',
        xtype: 'datecolumn',
        format: 'M',
        sortable: false
    }, {
        text: 'Department (Yrs)',
        xtype: 'templatecolumn',
        tpl: '{dep} ({seniority})'
    }],
    width: 400,
    forceFit: true,
    renderTo: Ext.getBody()
});

答案 2 :(得分:0)

检查一下 http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-sortable

这里有一个例子......

&#13;
&#13;
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Nombre',  dataIndex: 'name', sortable: false },
        { text: 'Email', dataIndex: 'email', sortable: false },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
&#13;
&#13;
&#13;