"本文将介绍如何使用ExtJS框架和Sencha Architect工具来生成一个完整的主界面。我们将探讨如何构建布局,创建不同区域(如顶部、左侧、中间和底部),以及设置相应的属性来实现所需的功能和样式。"
在ExtJS中,主界面通常是一个全屏的应用布局,称为"Viewport"。`Viewport`允许我们定义一个占据整个浏览器窗口的容器,通过布局管理器(如`border`布局)来组织和分配子组件的位置。在Sencha Architect中,我们可以直观地设计和构建这样的界面。
首先,我们新建一个基于ExtJS 4.2.x的项目。Sencha Architect提供了图形化的界面,使得创建和配置组件变得更加容易。选择"Viewport"作为起始点,它会作为应用的顶级容器,设置其`id`为"MyViewport",并选择`layout`为"border"。`border`布局允许我们在四个方向(north, south, east, west)定义组件,并在中心区域放置主要内容。
接下来,我们创建各个区域的占位符。例如,创建一个顶部占位符,设置`id`为"MyNorth",`region`为"North",并指定`contentEl`为"divNorth"。这将使组件内容与HTML中的对应div元素关联。
然后,我们创建左侧的导航区域,将其转换为`xtype: panel`。设置`region: 'west'`,`stateId: 'MyWestStateID'`,`id: 'MyWest'`,以及`title: '菜单'`等属性,以实现一个可折叠的侧边栏,宽度为200像素,最小宽度和最大宽度分别为200和400像素。`split`属性允许用户通过拖动调整宽度,`collapsible: true`表示可以折叠,`animCollapse: false`则禁用折叠动画。
中间区域通常用于展示主要内容,我们同样转换为`xtype: panel`,设置`region: 'center'`,并关闭`deferredRender`以立即渲染内容。`activeTab: 1`表示默认显示第一个选项卡。
底部区域可以用来显示版权信息或状态栏,我们创建一个底部占位符,`region: 'south'`,`contentEl: 'south'`,设置高度为100像素,具有可折叠功能,并预设为折叠状态。标题设置为"版权信息技术支持"。
在运行应用之前,我们需要确保HTML body中已经包含了`divNorth`和`divSouth`,这两个div将被我们的`MyNorth`和`MySouth`组件占用。
总结一下,通过Sencha Architect和ExtJS,我们可以构建一个包含顶部、左侧、中间和底部区域的主界面。每个区域都通过`region`属性定位,并通过其他属性(如`width`、`minWidth`、`maxWidth`、`collapsible`等)进行定制,提供丰富的交互性和布局灵活性。这只是一个基本的示例,实际应用中可以根据需求添加更多的组件和功能。