ExtJS 4-排序条形图



我有一个网格和一个条形图,它们都表示相同的数据(相同的存储)。网格显然可以根据单击列标题进行排序,而图表则根据网格中显示的数据自动刷新。

问题是,条形图似乎将底层存储数据按与网格相反的方向排序。例如,当网格被排序以显示。。。

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从左到右——但由于其他原因,这不是本页的选项。)

有没有办法改变这一点,使条形图按另一个方向排序?

也许商店本身可以在图表类定义中重新排序?如果是这样的话,那该怎么做呢?这会影响网格显示数据的方式吗?

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');

感谢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在未来为图表添加一个简单的排序配置。。。

最新更新