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

Question

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

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

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

我看到了一些方法：

1. 自定义网格和/或存储，以便在加载时同时加载所有相关行。
2. 在渲染器中创建回调，然后更改单元格值，但我不确定如何执行此操作。我实际上并不想更改单元格值 (StockId)，只是更改可见输出 (Symbol)。
3. 更改我的 API 以匹配我的视图。

总结这些：#1 似乎需要大量工作才能获得看似简单的结果。我一直在尝试使用这些关联，但我发现它们除了对这里和那里的小事之外没有任何用处，当然也对大量数据没有用。 #2 我现在不知道从哪里开始；并且 #3 似乎是大材小用，并且通常会毁掉我的服务器端，因为我的意思是更多的连接，以及保存记录时的更复杂性。

所以，两部分的问题：

1. 有人知道如何从网格中的关联模型加载值吗？
2. 如果不是，为了激起我的好奇心，在屏幕上有大量数据需要处理的任何情况下，关联是用来做什么的？大量数据似乎是使用 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(...)，但是通过将连接留给客户端，您将减轻服务器端的压力。

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