如何从ExtJS6中的Model转换方法访问其他Store记录？

Question

我试图在模型中有一个计算字段,看起来像value (maxValue),maxValue当前加载的所有其他记录中的最大值(想想网格的当前页面).

模型:

Ext.define('MyApp.model.Example', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id'},
        {name: 'value'},
        {name: 'calculated_value', convert: function(value, record){
            //how to access all the records here, not just the current one?
        }}
    ]
});

Answer 1

模型不知道记录,它只表示单个记录,而convert方法旨在允许您转换值,或将其他字段组合成单个值(注意除非您定义"depends"以引用其他字段此实例仅在加载数据时调用convert,而不是在它依赖的字段更改时调用.

当您创建网格时,网格使用商店,商店包含一组记录,这将是执行此操作的地方.

在商店的配置中,你可以为'datachanged'添加一个监听器,只要在商店中添加或删除记录,就会触发,从这里你可以处理商店中的所有记录,计算出最大值,并更新记录用它.

Ext.create('Ext.data.Store', {
    model: 'Example',
    proxy: {
        type: 'ajax',
        url : 'example.json',
        reader: {
            type: 'json'
        }
    },
    listeners:{
        datachanged:function(store){
            var maxValue=store.max('value');
            store.beginUpdate();
            store.each(function(record){
                record.set('calculated_value',maxValue);
            });
            store.endUpdate();
        }
    }
});

如果您从服务器加载商店,那么您将实现一个阅读器,这可能是一个更好的地方.

Ext.create('Ext.data.Store', {
    model: 'Example',
    proxy: {
        type: 'ajax',
        url : 'example.json',
        reader: {
            type: 'json',
            transform: {
                fn: function(data) {
                    var maxValue=0;
                    Ext.each(data.items,function(item){
                        if(item.value>maxValue) maxValue=item.value;
                    });
                    Ext.each(data.items,function(item){
                        item.calculated_value=maxValue;
                    });
                    return data;
                },
                scope: this
            }
        }
    },
});

它还值得澄清,如果你真的需要复制这个值,我假设你想在网格中以某种方式引用,也许在渲染器中,而你可以在商店上设置一次值:

Ext.create('Ext.data.Store', {
    model: 'Example',
    proxy: {
        type: 'ajax',
        url : 'example.json',
        reader: {
            type: 'json'
        }
    },
    listeners:{
        datachanged:function(store){
            store.maxValue=store.max('value');
        }
    }
});

然后在您的网格列配置中,添加/更新渲染器(在此示例中,我将值显示为maxValue的百分比):

{
    dataIndex:'value',
    renderer:function(value, metaData, record, rowIndex, colIndex, store, view){
        return Math.round((100/store.maxValue)*value)+'%';
    }
}