Ext常用布局详解：FitLayout与BorderLayout实例演示

Ext是一种广泛应用于JavaScript开发中的富客户端组件库，特别适用于构建企业级Web应用程序。本文主要讨论了Ext中常用的几种布局方式，对初学者理解和实践Ext开发具有重要意义。 首先，我们提到的是Fit布局。FitLayout是Ext布局中的基础类型，其子类包括AccordionLayout和CardLayout。这类布局主要用于将一个单一的组件（通常是Panel）完全填充父容器，不会留出多余的空间。当在Ext Container上设置`layout:'fit'`并添加一个Panel时，该Panel会占据容器的全部空间。例如： ```javascript Ext.onReady(function() { var panel = new Ext.Panel({ title: 'FitLayout', layout: 'fit', width: 300, height: 300, items: { title: 'InnerPanel', html: '<p>这是InnerPanel的内容</p>', border: false } }); panel.render(Ext.getBody()); }); ``` FitLayout适合于那些需要简单、紧凑布局的情况，但当需要多个Panel共存且希望每个独立展示时，它可能不是最佳选择。 接下来是BorderLayout，这是一种更为复杂且功能丰富的布局方式。它继承自ContainerLayout，模拟了传统的框架布局，将界面划分为五个区域：东（East）、西（West）、南（South）、北（North）和中心（Center）。在使用BorderLayout时，需要注意以下几点： 1. 中心区域：每个使用BorderLayout的容器必须有一个区域为'center'，它将占用剩余的所有可用空间。 2. 边区组件：如果有west或east区域，组件需要指定宽度；north或south区域的组件需要指定高度。 3. 区域固定性：BorderLayout的区域一旦确定，就不能更改。要添加或移除子组件，通常需要将它们放在一个额外的Container中，以避免直接操作布局区域。 示例代码展示了如何创建一个带有BorderLayout的Panel： ```javascript var myBorderPanel = new Ext.Panel({ renderTo: document.body, width: 700, height: 500, title: 'BorderLayout', layout: { type: 'border', defaults: { autoScroll: true }, items: [ { region: 'west', width: 200, collapsible: true, xtype: 'toolbar' }, { region: 'center', xtype: 'tabpanel' }, { region: 'east', width: 200, xtype: 'splitter' } ] } }); ``` 总结来说，Ext提供的FitLayout和BorderLayout是开发者在创建用户界面时常用的两种布局方法。FitLayout适用于单个组件全屏展示，而BorderLayout则提供了更多的灵活性和分隔区域，适合创建复杂的布局结构。理解并熟练运用这些布局方式，有助于提高在实际项目中的组件组织和界面设计能力。