Extjs4 重新调整面板组件的尺寸以适应屏幕尺寸

我已经添加了一个

面板

（我称之为

我的面板1

），并且在这个

面板

（我称之为

我的面板2

）中添加了另一个

面板

），然后在第二个面板中添加了一个网格（到

我的面板2

）。当我单击浏览器的

向下还原

或

重新调整大小

按钮时，它不会收缩组件以适应屏幕大小。我怎样才能解决这个问题

Ext.define（'MyApp.view.MyPanel'{
扩展：“Ext.panel.panel”，
身高：469，
宽度：729，
标题：“我的小组1”，
initComponent:函数（）{
var me=这个；
Ext.applyIf（我{
项目：[{
xtype:'面板'，
身高：238，
标题：“我的小组2”，
项目：[{
xtype:“gridpanel”，
身高：179，
标题：“我的网格面板1”，
栏目：[{
xtype:'gridcolumn'，
数据索引：“字符串”，
文本：“字符串”
}, {
xtype:'numbercolumn'，
dataIndex:'编号'，
文本：“数字”
}, {
xtype:'datecolumn'，
数据索引：“日期”，
文本：“日期”
}, {
xtype:'布尔列'，
数据索引：“bool”，
文本：“布尔”
}],
视图配置：{
}
}]
}]
});
me.callParent（参数）；
}
});

我建议使用视口-它会自动调整到浏览器的“视口”： 如果希望自动管理固定宽度和高度，也不要设置固定宽度和高度。

---

下面是一个示例：

您的意思是要删除

autoCreateViewport:true，

？不，我不是这个意思。您可以选择如何创建视口-自动创建也可以。但是你的代码没有使用视口。你能告诉我如何从我的代码中使用

视口

吗？视口是你通常在应用程序中创建的东西。你使用的是MVC模式吗？这本指南会一步一步地引导您，并使用viewport是的，很好。只需遵循我提供的JSFIDLE或sencha文档中的示例。