Question

我正在尝试绘制一个网格，其中每一行都是一天股票的表现。在我的数据结构中，我有一个Date，一个Stock和一个Stock Price资源。附加到我的网格的商店是Stock Price商店。

所以，据我所知，我最大的问题是，当网格单元格渲染时，我需要已经有值，或者我需要一个阻塞函数来获取一个值

当我使用getStore()魔术函数时，我被告知记录不知道它（未定义的方法）。我假设这是因为记录与独立模型没有相同的功能。

我看到了一些方法：

自定义网格和/或存储，以便在发生加载时，同时加载所有相关行。
在渲染器中创建一个回调，然后更改单元格值，但我不确定如何执行此操作。我实际上并不想更改单元格值（StockId），只是更改可见输出（Symbol）。
更改我的API以符合我的观点。

总结一下：＃1看似很简单的结果。我一直在尝试使用这些关联，但我发现它们对于除了小事情之外的任何事情都没有用，当然也不是很多数据。＃2我现在还不知道从哪里开始;并且＃3看起来像是大规模的过度杀戮，并且通常会破坏我的服务器端，因为我将意味着更多的连接，并且在保存记录时也会更加复杂。

所以，有两部分问题：

有谁知道如何从网格中的关联模型加载值？
如果没有，为了激起我的好奇心，在屏幕上有大量数据要处理的情况下，用什么类型的关联？很多数据似乎是使用Ext vs jQueryUI或其他一些UI框架的原因，所以我想知道这些关联是什么。

型号 - 股价

Ext.define('MyApp.model.StockPrice', {
    extend : 'Ext.data.Model',
    idProperty : 'StockPriceId',
    fields : [ {
        name : 'StockId',
        type : 'int'
    }, {
        name : 'Open',
        type : 'float'
    }, {
        name : 'Close',
        type : 'float'
    }, {
        name : 'DateId',
        type : 'date'
    }],
    proxy : {
        type : 'rest',
        url : '/api/stock.price'
    },
    reader : {
        type : 'json'
    },
    associations : [ {
            type : 'hasOne',
            model : 'MyApp.model.Date',
            primaryKey : 'DateId',
            foreignKey: 'DateId'
    },{
        type : 'hasOne',
        model : 'MyApp.model.Stock',
        primaryKey : 'StockId',
        foreignKey : 'StockId'
    } ]
});

型号 - 股票

Ext.define('MyApp.model.Stock', {
    extend : 'Ext.data.Model',
    idProperty : 'StockId',
    fields : [ {
        name : 'StockId',
        type : 'int'
    }, {
        name : 'Symbol',
        type : 'string'
    } ],
    proxy : {
        type : 'rest',
        url : '/api/stock'
    },
    reader : {
        type : 'json'
    },
    associations : [ {
        type : 'hasMany',
        model : 'MyApp.model.StockPick',
        primaryKey : 'StockId',
        foreignKey : 'StockId'
    }]
});

型号 - 日期

Ext.define('MyApp.model.Date', {
    extend : 'Ext.data.Model',
    fields : [ 'DateId', 'Date' ]
});

商店 - 股价

Ext.define('MyApp.store.StockPrice', {
    extend : 'Ext.data.Store',
    model : 'MyApp.model.StockPrice',
    remoteSort : true,
    remoteFilter : true,
    pageSize : 5,
    autoLoad : true
});

查看 - 股票价格

Ext.define('MyApp.panel.StockData', {
    extend : 'Ext.grid.Panel',
    store : 'MyApp.store.StockPrice', 
    columns : [
            {
                text : 'Symbol',
                flex : 1,
                sortable : false,
                hideable : false,
                dataIndex : 'StockId',
                renderer : function(stockId, metadata, stockPriceRecord) {
                     // What goes in here? PROBLEM POINT
                     MyApp.model.Stock.load(stockId, function() {
                         // ... some callback
                     });
                     // OR
                     return stockPriceRecord.getStock().get('Symbol');
                }
            },
            {
                text : 'Open',
                flex : 1,
                dataIndex : 'Open',
                renderer : 'usMoney'
            },
            {
                text : 'Close',
                flex : 1,
                dataIndex : 'Close',
                renderer : 'usMoney'
            },
            {
                text : 'Volume',
                flex : 1,
                dataIndex : 'Volume'
            }]
});

Answer 1

在网格中显示来自关联模型的数据的唯一真实选项是在列上使用自定义渲染器功能。这不会改变任何值;它只会将所需的输出呈现到单元格中。

现在，至于实现该渲染器功能：我首先从模型中删除代理，然后为每个模型创建存储，并允许商店管理代理 - 然后，为Stock附加商店作为StockPrice商店的监听器来监听datachanged事件。当StockPrice商店的数据发生变化时，您应该获取每个唯一引用的Stock ID，然后告诉Stock商店请求带有这些ID的库存有效负载。

这可能意味着稍微改变你的API以支持幕后的SQL IN(...)，但是通过将连接留给客户端，你将减轻服务器端的压力。

简而言之，您需要使用您提出的所有三个想法中的一点，以便最好地实现您的目标。

如何在ExtJS网格中显示模型关联的值？

1 个答案: