Sencha Ext JS - 如何在日期选择后刷新标签？
Posted
技术标签:
【中文标题】Sencha Ext JS - 如何在日期选择后刷新标签？【英文标题】：Sencha Ext JS - how to refresh the Tabs after date picking? 【发布时间】：2021-02-18 11:29:35 【问题描述】：我有 MVC 应用程序，它是一个选项卡面板，其中包含几个选项卡，每个选项卡上都有一个图表，还有一个带刷新按钮的日期选择器，以及一个用于选择用于“日期范围”的数据源的组合框。 该应用程序当前加载包含所有可用数据的图表，但目的是选择 3 个可用数据源中的 1 个，选择日期范围并通过单击按钮刷新每个图表选项卡，我该怎么做？
Fiddle sample
【问题讨论】：
能否提供一些带有代码的小提琴示例并提及 ExtJs 的工具包和版本？ 刚刚更新，希望对您有所帮助。 【参考方案1】：类似这样的：
Ext.create('Ext.panel.Panel',
renderTo: Ext.getBody(),
height: 800,
width: 800,
layout: 'border',
defaults:
collapsible: false,
split: true,
,
items: [
title: 'PanelCenter',
xtype: 'tabpanel',
region: 'center',
itemId: 'centerPanel',
bodyPadding: 10,
activeTab: 0,
items: [
title: "Tab1",
items:
xtype: 'cartesian',
width: 655,
height: 400,
store:
fields: ['name', 'value'],
data: [
name: 'metric one',
value: 10,
,
name: 'metric two',
value: 7,
,
name: 'metric three',
value: 5,
]
,
axes: [
type: 'numeric',
position: 'left',
title:
text: 'Sample Values',
fontSize: 15
,
,
type: 'category',
position: 'bottom',
title:
text: 'Sample Values',
fontSize: 15
,
fields: 'name',
],
series: [
type: 'bar',
xField: 'name',
yField: 'value'
]
,
title: "Tab2",
items:
xtype: 'cartesian',
width: 655,
height: 400,
store:
fields: ['name', 'value'],
data: [
name: 'metric one',
value: 3,
,
name: 'metric two',
value: 5,
,
name: 'metric three',
value: 10,
]
,
axes: [
type: 'numeric',
position: 'left',
title:
text: 'Sample Values',
fontSize: 15
,
,
type: 'category',
position: 'bottom',
title:
text: 'Sample Values',
fontSize: 15
,
fields: 'name',
],
series: [
type: 'bar',
xField: 'name',
yField: 'value'
]
,
title: "Tab3",
items:
xtype: 'cartesian',
width: 655,
height: 400,
store:
fields: ['name', 'value'],
data: [
name: 'metric one',
value: 10,
,
name: 'metric two',
value: 3,
,
name: 'metric three',
value: 9,
]
,
axes: [
type: 'numeric',
position: 'left',
title:
text: 'Sample Values',
fontSize: 15
,
,
type: 'category',
position: 'bottom',
title:
text: 'Sample Values',
fontSize: 15
,
fields: 'name',
],
series: [
type: 'bar',
xField: 'name',
yField: 'value'
]
]
,
xtype: 'form',
title: 'PanelTop',
layout:
type: 'hbox',
,
region: 'north',
border: false,
bodyPadding: 10,
height: '100',
width: '100%',
margin: '0 0 5 0',
region: 'north',
items: [
xtype: 'combo',
name: 'data_type',
itemId: 'dataTypeSelect',
emptyText: 'Select date type',
displayField: 'source',
store:
fields: ['code', 'source'],
data: [
code: 'created',
source: 'Sales date'
,
code: 'invoice',
source: 'Invoice date'
,
code: 'bookIn',
source: 'Order date'
]
,
allowBlank: false,
,
xtype: 'datefield',
itemId: 'dateFromSearchField',
fieldLabel: 'From',
labelAlign: 'right',
name: 'from_date',
format: 'd/m/Y',
maxValue: new Date(),
allowBlank: false,
,
xtype: 'datefield',
itemId: 'dateToSearchField',
fieldLabel: 'To',
labelAlign: 'right',
name: 'to_date',
format: 'd/m/Y',
maxValue: new Date(),
value: new Date(),
padding: '0 30 0 0',
allowBlank: false
,
xtype: 'button',
itemId: 'refreshButton',
region: 'center',
text: 'Refresh',
formBind: true,
handler: function ()
const formData = this.up('panel').getValues();
if (
formData.data_type && formData.from_date && formData.to_date
)
const tabPanel = Ext.ComponentQuery.query('tabpanel#centerPanel')[0];
const cartesianCharts = tabPanel.query('cartesian');
Ext.Array.each(cartesianCharts, function (cartesianChart)
cartesianChart.getStore().load(
params: formData,
callback: function (records, operation, success)
,
scope: this
);;
, this);
],
]
);
【讨论】：
我收到“TypeError: Cannot read property 'apply' of undefined”你有什么建议吗？ 如果没有看到您的代码，我无法提出任何建议。 我现在也添加了几个极坐标图，并在此处进行了更新。以上是关于Sencha Ext JS - 如何在日期选择后刷新标签？的主要内容，如果未能解决你的问题，请参考以下文章