如何在加载时将加载窗口添加到 sencha 中的图表

How to add a loading window to a chart in sencha while it loads

本文关键字：加载 sencha 窗口添加更新时间：2023-09-26

我需要在图表获取数据时向图表添加一个加载窗口对话框，类似于网格中的bufferRenderer，它应该是一个简单的加载窗口，大小与网格中的加载对话框大小大致相同。我只是在寻找简单的东西。

我认为您应该使用 maskElement，但我不确定，我只需要隐藏图表元素或将其变灰。

这是我的代码

{
                xtype: 'panel',
                title: 'Charts',
                items: [
                    {
                        xtype: 'component'
                    },
                    {
                        xtype: 'polar',
                        height: 520,
                        id: '',
                        width: '',
                        title: 'Pie Chart',
                        colors: [
                            '#115fa6',
                            '#94ae0a',
                            '#a61120',
                            '#ff8809',
                            '#ffd13e',
                            '#a61187',
                            '#24ad9a',
                            '#7c7474',
                            '#a66111'
                        ],
                        store: 'GenderStore',
                        series: [
                            {
                                type: 'pie',
                                label: {
                                    field: 'types',
                                    display: 'rotate',
                                    contrast: true,
                                    font: '12px Arial',
                                    color: '#fff'
                                },
                                xField: 'counter',
                                yField: 'types'
                            }
                        ],
                        interactions: [
                            {
                                type: 'rotate'
                            }
                        ]
                    }
                ]
            }

为了屏蔽加载组件，我通常使用掩码。

要屏蔽组件：

.mask( [msg], [msgCls] )

Masks this component with a semi-opaque layer and makes the contents unavailable to clicks.

Parameters
•msg : String (optional)
A message to show in the center of the mask layer.
•msgCls : String (optional)
A CSS class name to use on the message element in the center of the layer.

但是，如果您手动屏蔽组件，您还必须在加载时取消屏蔽它，在渲染之前屏蔽图表并在存储加载时取消屏蔽它。当所有数据都已接收完毕时