Javascript ExtJS如何使绘制精灵响应？

我有一个由精灵组成的图像。我试图让它响应，所以当我调整浏览器大小时，图像也会针对较小的设备及其屏幕调整大小

以下是演示：

将宽度和高度设置为100%将不起作用

现在，没有反应：

---

您可以使用“调整大小”事件处理程序并缩放所有精灵，如下所示（v.5.1）：

Ext.application({
名字：“小提琴”，
启动：函数（）{
外部创建({
xtype:'窗口'，
标题：“可调整大小的精灵窗口”，
宽度：400，
身高：400，
布局：“适合”，
项目：[
{
xtype:'绘制'，
插件：['spritevents']，
精灵：[
{
键入：“圆”，
cx:150，
赛：150，
r:150，
填充样式：“#000”，
},
{
键入：“圆”，
cx:150，
赛：150，
r:100，
填充样式：“#fff”，
},
{
键入：“rect”，
身高：4，
半径：1，
宽度：30，
x:135，
y:44，
填充样式：“#fff”，
},
{
键入：“文本”，
x:212.5，
y:41.7，
fontSize:'30px'，
填充样式：“#fff”，
正文：“1”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:258.2，
y:87.5，
fontSize:'30px'，
填充样式：“#fff”，
正文：“2”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:275，
y:150，
fontSize:'30px'，
填充样式：“#fff”，
正文：“3”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:258.2，
y:212.5，
fontSize:'30px'，
填充样式：“#fff”，
正文：“4”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:212.5，
y:258.2，
fontSize:'30px'，
填充样式：“#fff”，
正文：“5”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:150，
y:275，
fontSize:'30px'，
填充样式：“#fff”，
正文：“6”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:87.5，
y:258.2，
fontSize:'30px'，
填充样式：“#fff”，
正文：“7”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:41.7，
y:212.5，
fontSize:'30px'，
填充样式：“#fff”，
正文：“8”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:25，
y:150，
fontSize:'30px'，
填充样式：“#fff”，
正文：“9”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:41.7，
y:87.5，
fontSize:'30px'，
填充样式：“#fff”，
正文：“10”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:87.5，
y:41.7，
fontSize:'30px'，
填充样式：“#fff”，
正文：“11”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:150，
y:25，
fontSize:'30px'，
填充样式：“#fff”，
正文：“12”，
textAlign:'中心'，
textBaseline:'中间'，
},
{
键入：“文本”，
x:150，
y:75，
fontSize:'15px'，
填充样式：“#000”，
文字：“时钟”，
textAlign:'中心'，
textBaseline:'中间'，
},
],
听众：{
afterRender:this.onDrawPanelIdAfterRender，
spriteclick:this.onDrawPanelIdSpriteClick，
boxready:功能（项目、宽度、高度）{
item.initWidth=宽度；
item.initHeight=高度；
},
调整大小：功能（项目、宽度、高度、oldWidth、oldHeight）{
if（arguments.length==3）{
//看起来像是bug，使用不同数量的参数触发两次。。
返回；
}
const scalingX=宽度/item.initWidth；
const scalingY=高度/item.initHeight；
const items=item.getSurface（）.getItems（）；
items.forEach（（spriteItem）=>{
spriteItem.setAttributes({
scalingX:scalingX，
scalingY：scalingY，
scalingCenterX:scalingX，
scalingCenterY：scalingY，
});
});
},
},
},
],
}).show（）；
},
onDrawPanelIdAfterRender:函数（项、事件）{
console.log（'afterrender…'）；
},
onDrawPanelIdSpriteClick:函数（项目、事件）{
console.log（'spriteclick…'）；
变量sprite=item&&item.sprit
sprites: [{
                type: 'circle',
                cx: 150,
                cy: 150,
                r: 150,
                fillStyle: '#000'
            }, {
                type: 'circle',
                cx: 150,
                cy: 150,
                r: 100,
                fillStyle: '#fff'
            },]