Extjs 森查过滤栅柱

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

{
   text: "Floor",
   dataIndex: 'attributes',
   filter:{
       type: 'number',
       value : 'floor'
   },
   renderer: function (value) {
      return value['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'
    }
}

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

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

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

并在列中：

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

编辑-查看小提琴：

---

非常感谢你！！现在它起作用了。只有使用升序/降序排序时，我仍然存在问题，请检查小提琴您的字段示例是否不起作用。现场楼层取决于未定义的现场属性@norbeq，你错了。我的代码在排序方面也运行良好：在我的例子中，解决方案在中间：为了使其正确排序，我必须像这样编辑我的代码：name:floor，calculate:function data{ifNumberdata.attributes.floor{return Numberdata.attributes.floor}否则{return null；}}看看在没有传递floor的情况下做了什么：呈现为0-这很糟糕。

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"
            }]
        })
    }
});