现在 EXTJS 中的图例以这种方式工作:它显示所有可用的图例字段和适当的系列,您可以启用/禁用其中任何一个。我想让一次只能启用一个图例项。例如,您有带有 2 个图例项目(有 2 个系列)的图表,只有第一个项目在图表加载时处于活动状态,然后如果您想激活第二个项目,那么第一个项目将自动禁用。
这里是原生 ExtJS 行为的图表小提琴: https ://fiddle.sencha.com/#fiddle/1b7d 请发表想法,我怎样才能让它像我之前描述的那样工作。
现在 EXTJS 中的图例以这种方式工作:它显示所有可用的图例字段和适当的系列,您可以启用/禁用其中任何一个。我想让一次只能启用一个图例项。例如,您有带有 2 个图例项目(有 2 个系列)的图表,只有第一个项目在图表加载时处于活动状态,然后如果您想激活第二个项目,那么第一个项目将自动禁用。
这里是原生 ExtJS 行为的图表小提琴: https ://fiddle.sencha.com/#fiddle/1b7d 请发表想法,我怎样才能让它像我之前描述的那样工作。
这可以通过使用图例类型轻松实现dom
,并且循环和设置所有其他图例(按钮)禁用,如下所示 -
legend: {
docked: 'bottom',
type: 'dom',
listeners: {
itemclick: function(obj, record, item, index) {
var i = 0,
records = obj.getStore().getRange();
for(i=0; i < records.length; i++){
i === index ? records[i].set('disabled', false) : records[i].set('disabled', true);
}
}
}
}
如果您查看图例源代码,可在您的 Ext 目录或Sencha 文档中免费获得,您会发现您可以覆盖该 toggleItem 方法,只允许一个选择。
基础应该是这样的
toggleItem: function (index) {
var store = this.getStore(),
record = store.getAt(index);
store.query("disabled", false).each(function(record) {record.set("disabled", true) });
record.set("disabled", false);
}
但它并没有完全按预期工作。也许你可以从那里铺平道路。