Question

我下面有一个网格和一个条形图，它们都代表相同的数据（同一个商店）。基于单击列标题，网格显然是可排序的，并且图表会根据网格中显示的数据自动刷新。

麻烦的是，条形图似乎按照网格的相反方向对基础商店数据进行排序。因此，例如当网格排序显示...

时

Name / Sales  
Joe / 100  
Sally / 80  
Tim / 60

...条形图显示：

[bar 1 - top]: Tim / 60  
[bar 2 - mid]: Sally / 80  
[bar 3 - bot]: Joe / 100

这对用户来说是违反直觉的 - 他们希望网格和图表的类型保持一致。（柱形图表运作良好 - Joe / Sally / Tim从左栏到右栏 - 但由于其他原因，这不是此页面上的选项。）

有没有办法改变这一点，以便条形图排序另一个方向？

也许商店本身可以在图表类定义中重新排序？如果是这样，那将如何完成呢？这会影响网格显示数据的方式吗？

Answer 1

<强> 1。加载网格存储：

gridStore.load({
    callback: function(records, operation, success) {
        if(success){
            // Load data from first Store (grid) to second Store (chart)
            chartStore.loadData(records);
                    // Sort chart store data:
            chartStore.sort('field','ASC');
        }
    }
});

<强> 2。对网格商店进行排序：

gridStore.sort('field','DESC');

Answer 2

感谢mfruizs2的指点 - 帮助我走上了正确的轨道。对于将来过来的人来说，这就是我要解决的问题：

//get the # of records in the current grid page
var gridStoreItems = gridStore.getCount();

//setup a separate store just for the *chart*
var chartStore = Ext.create('Ext.data.ArrayStore', {                    
   model    : gridStore.model,
   proxy    : gridStore.proxy,
   storeId  : 'chartStore',
});

//loop records of current *grid* store, from bottom to top
//and add the bottom grid store record to the top of the chart store, and so on
for (var i=(gridStoreItems-1); i>=0; i--)                               
   {
      chartStore.add(gridStore.getAt(i).data);
   }

然后使用chartStore作为条形图的基础。它现在将以与网格中显示的顺序相同的顺序显示图表记录。

希望Sencha在未来为图表添加一个简单的排序配置......

ExtJS 4 - 排序条形图

2 个答案: