Javascript 如何通过单击Ext.js中的按钮来更改图表的宽度？

我在图表中添加了两个按钮：“缩放-”和“缩放+”。我想在用户单击按钮时更改图表的宽度。但是图表的宽度没有改变。我想在用户单击按钮“缩放+”时增加图表的宽度，在相同系数下，我想在用户单击按钮“缩放-”时减小图表的宽度，例如10%

Ext.onReady（函数（）{
Ext.create（'Ext.chart.CartesianChart'{
renderTo:document.body，
宽度：600，
身高：200，
商店：{
字段：['name'，'g1'，'g2']，
数据：[
{“名称”：“项目-0”，“g1”：57，“g2”：59}，
{“名称”：“第1项”、“g1:45”、“g2:50}，
{“名称”：“项目2”，“g1”：67，“g2”：43}，
{“名称”：“项目3”，“g1”：45，“g2”：18}，
{“名称”：“项目4”，“g1”：30，“g2”：90}
]
},
图例：{
停靠：“底部”
},
//定义x轴和y轴。
轴线：[{
键入：“数值”，
位置：'左'
}, {
类型：'类别'，
可视范围：[0，1]，
位置：'底部'
}],
//定义实际系列
系列：[{
键入：“行”，
xField:'名称'，
伊菲尔德：“g1”，
标题：“正常”
}, {
键入：“行”，
xField:'名称'，
伊菲尔德：“g2”，
标题：“顺利”
}],
摘要：[
{
xtype:'工具栏'，
弹性：1，
船坞：“底部”，
ui:'页脚'，
布局：{
包装：'结束'，
类型：“hbox”
},
项目：[
{
xtype:'按钮'，
文本：“比例-”，
itemId:'ScaleDec'，
处理程序：函数（）
{                   
这个宽度=100；
这个。重载（）；
},
},
{
xtype:'按钮'，
文本：“缩放+”，
itemId:'ScaleInc'，
处理程序：函数（）
{                   
这个宽度=1000；
这个。重载（）；
},                    
}
]
}
],
});
});

var宽度=1000；
Ext.onReady（函数（）{
var myChart=Ext.create（'Ext.chart.CartesianChart'{
renderTo:document.body，
宽度：600，
身高：200，
商店：{
字段：['name'，'g1'，'g2']，
数据：[
{“名称”：“项目-0”，“g1”：57，“g2”：59}，
{“名称”：“第1项”、“g1:45”、“g2:50}，
{“名称”：“项目2”，“g1”：67，“g2”：43}，
{“名称”：“项目3”，“g1”：45，“g2”：18}，
{“名称”：“项目4”，“g1”：30，“g2”：90}
]
},
图例：{
停靠：“底部”
},
//定义x轴和y轴。
轴线：[{
键入：“数值”，
位置：'左'
}, {
类型：'类别'，
可视范围：[0，1]，
位置：'底部'
}],
//定义实际系列
系列：[{
键入：“行”，
xField:'名称'，
伊菲尔德：“g1”，
标题：“正常”
}, {
键入：“行”，
xField:'名称'，
伊菲尔德：“g2”，
标题：“顺利”
}],
摘要：[
{
xtype:'工具栏'，
弹性：1，
船坞：“底部”，
ui:'页脚'，
布局：{
包装：'结束'，
类型：“hbox”
},
项目：[
{
xtype:'按钮'，
文本：“比例-”，
itemId:'ScaleDec'，
处理程序：函数（）
{                   
宽度=宽度-宽度*0.1；
myChart.setWidth（宽度）；
},
范围:本,，
},
{
xtype:'按钮'，
文本：“缩放+”，
itemId:'ScaleInc'，
处理程序：函数（）
{                   
宽度=宽度+宽度*0.1；
myChart.setWidth（宽度）；
},
范围:本,，
}
]
}
],
});
});