Question

我一直试图让this list对总列进行排序。不幸的是，它没有这样做。

研究，我发现渲染的值不排序。任何人都可以为此提供解决方法/解决方案吗？我将通过PHP发送数据，所以如果有必要，我可以先在那里排序。

欢迎任何帮助，包括半生不熟的想法。

有问题的专栏：

{
    text: 'Total',
    flex: 1,
    dataIndex: 'sum',
    notDirty: true,
    renderer: function (t, meta, record) {
      var data = record.getData();
      var sum = 0;
      sum += +data.r1 + +data.r2 + +data.r3 + +data.r4 + +data.r5 + +data.r6;
      return sum;
    }
}

Answer 1

您可以对convert使用field功能。

一个convert函数，它将Reader提供的值转换为将存储在模型中的对象。

我修改了你的代码它正在运行。您可以在此处查看fiddle。

//this function will calculate some all numeric columns
function calculateSum(rec) {
    var sum = 0;
    sum += +rec.get('r1') + +rec.get('r2') + +rec.get('r3') + +rec.get('r4') + +rec.get('r5') + +rec.get('r6');
    return sum;
}
//Create store
Ext.create('Ext.data.Store', {
    storeId: 'demoStore',
    fields: ['team', 'r1', 'r2', 'r3', 'r4', 'r5', 'r6', {
        name: 'sum',
        convert: function (v, rec) {
            return calculateSum(rec);
        }
    }],
    data: {
        'items': [{
            team: 'Brookings 1',
            r1: '0',
            r2: '0',
            r3: '0',
            r4: '0',
            r5: '6',
            r6: '5'
        }, {
            team: 'Washington 1',
            r1: '0',
            r2: '0',
            r3: '0',
            r4: '0',
            r5: '0',
            r6: '0'
        }, {
            team: 'Sioux Valley 1',
            r1: '0',
            r2: '0',
            r3: '0',
            r4: '0',
            r5: '0',
            r6: '0'
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
//Common numberfield object
var editor = {
    xtype: 'numberfield',
    minValue: 0,
    listeners: {
        change: function (cmp, newValue, oldValue) {
            var gridColumn = this.up(),
                dataIndex = gridColumn.editingPlugin.activeColumn.dataIndex,
                selctedData = gridColumn.up('grid').getSelectionModel().getSelection()[0];
            gridColumn.cellTextValue = newValue;
            selctedData.set(dataIndex, newValue);
            selctedData.set('sum', calculateSum(selctedData));
        }
    }
};

//Create Grid
Ext.create('Ext.grid.Panel', {
    title: 'Total count sorting',
    margin: 10,
    store: Ext.data.StoreManager.lookup('demoStore'),
    plugins: Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    }),
    columns: [{
        text: 'Team',
        dataIndex: 'team',
    }, {
        text: 'Round 1',
        flex: 1,
        dataIndex: 'r1',
        editor: editor
    }, {
        text: 'Round 2',
        flex: 1,
        dataIndex: 'r2',
        editor: editor
    }, {
        text: 'Round 3',
        flex: 1,
        dataIndex: 'r3',
        editor: editor
    }, {
        text: 'Round 4',
        flex: 1,
        dataIndex: 'r4',
        editor: editor
    }, {
        text: 'Round 5',
        flex: 1,
        dataIndex: 'r5',
        editor: editor
    }, {
        text: 'Round 6',
        flex: 1,
        dataIndex: 'r6',
        editor: editor
    }, {
        text: 'Total',
        flex: 1,
        dataIndex: 'sum',
        notDirty: true,
        /* renderer: function (t, meta, record) {
             var data = record.getData();
             var sum = 0;
             sum += +data.r1 + +data.r2 + +data.r3 + +data.r4 + +data.r5 + +data.r6;
             return sum;
         }*/
    }],
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            xtype: 'button',
            text: 'Save and Calculate',
            handler: function (btn) {
                /* var store = btn.up('grid').getStore();
                 for (i = 0; i < store.getModifiedRecords().length; i++) {
                     console.log(i + ":");
                     console.log(store.getModifiedRecords()[i]['data']);
                     postVals(store.getModifiedRecords()[i]['data']); // @TODO_DEVELOPER loop this!
                 }*/
            }
        }, {
            xtype: "label",
            text: "|"
        }, {
            xtype: 'button',
            text: 'Refresh Table',
            handler: function () {
                //refresh();
            }
        }, {
            xtype: 'label',
            text: '<-- Click there to update the totals.'
        }]
    }],
    height: 200,
    renderTo: Ext.getBody()
});

在EXT js中对渲染/转换值进行排序

1 个答案: