煎茶过滤器网格列

Question

我正在尝试找出如何过滤列，以便找到特定的楼层值（或例如所有值为“2”的楼层）并通过单击特定按钮按升序/降序对它们进行排序。 我写了这段代码，但它不起作用，因为当我在过滤器中写一个值时，他没有给我任何行（如果我尝试使用“type：'string'”）：

{
   text: "Floor",
   dataIndex: 'attributes',
   filter:{
       type: 'number',
       value : 'floor'
   },
   renderer: function (value) {
      return value['floor'];
   },

}

我应该如何更改我的代码以使其正常工作？

Answer 1

您需要将dataIndex 更改为非嵌套列。

您可以在模型中添加逻辑字段，例如：

 {
    name: "floor", "mapping": "attributes.floor"
}

在列中：

{
   text: "Floor",
   dataIndex: 'floor',
   filter:{
       type: 'number'
   }
}

已编辑 - 查看小提琴：https://fiddle.sencha.com/#view/editor&fiddle/30gr

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');

        var store = Ext.create("Ext.data.Store", {
            fields: [{
                "name": "name",
                "type": "string"
            }, {
                "name": "floor",
                "mapping": function (data) {
                    console.log(data);
                    if (data && data.attributes && Ext.isNumber(data.attributes.floor)) {
                        return data.attributes.floor;
                    }
                    return null
                }
            }],
            data: [{
                "name": "A1",
                "attributes": {
                    "floor": 1
                }
            }, {
                "name": "B1",
                "attributes": {
                    "floor": 1
                }
            }, {
                "name": "A2",
                "attributes": {
                    "floor": 2
                }
            }, {
                "name": "A3",
                "attributes": {
                    "floor": 3
                }
            }, {
                "name": "ANU",
                "attributes": {
                    "floor": null
                }
            }, {
                "name": "AN"
            }]
        });

        Ext.create("Ext.grid.Panel", {
            renderTo: Ext.getBody(),
            width: 400,
            height: 500,
            store: store,
            columns: [{
                "dataIndex": "name",
                "text": "Name"
            }, {
                "dataIndex": "floor",
                "text": "Floor"
            }]
        })
    }
});

Answer 2

我建议在数据模型中计算 floor 的值，而不是使用列渲染器。这样您就可以对该值进行过滤和排序。

您需要在模型上添加计算字段

fields: [{
    name: 'attributes'
}, {
    name: 'floor',
    calculate: function(data) {
        return data.attributes && Number(data.attributes.floor);
    }
}]

那么你的专栏就变成了

{
    text: "Floor",
    dataIndex: 'floor',
    filter:{
        type: 'number',
        value : 'floor'
    }
}