Столбец сетки фильтра Сенча

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

Я предлагаю рассчитать значение этажа в модели данных вместо использования средства визуализации столбцов. Так что вы можете фильтровать и сортировать по этому значению.

Вам нужно добавить вычисляемое поле в вашей модели

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

Тогда ваш столбец станет

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