[翻译]Ext JS 教程-布局和容器 原

布局系统是ExtJS中一个强大的组成部分。它控制着应用程序的每一个组件的尺寸和位置。这个操作手册包含开始使用布局的基础操作。

容器

一个ExtJS应用程序的用户界面由组件构成(更多关于组件的信息见组件指南)。一个容器是一个能够包含其他组件的特殊组件。一个典型的ExtJS应用程序几个层和嵌套的组件构成。

最常使用的容器是Panel。让我们来看看一个容器是怎样允许一个Panel去包含其他组件的。

 Ext.create('Ext.panel.Panel', {
     renderTo: Ext.getBody(),
     width: 400,
     height: 300,
     title: 'Container Panel',
     items: [
         {
             xtype: 'panel',
             title: 'Child Panel 1',
             height: 100,
             width: '75%'
         },
         {
             xtype: 'panel',
             title: 'Child Panel 2',
             height: 100,
             width: '75%'
         }
     ]
 }); 

我们创建了一个Panel,它把它自身渲染到文档body中,并且我们使用了items配置往容器Panel中添加了两个子Panel。

布局

每一个容器用一个布局(Layout)管理着它的子容器的尺寸和位置。这一部分我们将讨论如何去配置容器使用一个定制的布局,还有布局系统是如何保持所有东西都是同步的。

使用布局

在上面的例子中,我们没有定制容器Panel的布局。请注意子Panel是如何一个接在一个的后面放置的,就像DOM结构中一般的块元素那样的。这是因为所有容器的默认布局是Auto Layout。 Auto Layout 不规定子元素的任何定制的位置或尺寸。让我们假设一下,举个例子,我们想要我们的两个子Panel边靠边的放置,每个都占据容器宽度的50%——我们可以简单的通过在容器上提供一个布局配置,使用一个Column Layout。

 Ext.create('Ext.panel.Panel', {
     renderTo: Ext.getBody(),
     width: 400,
     height: 200,
     title: 'Container Panel',
     layout: 'column',
     items: [
         {
             xtype: 'panel',
             title: 'Child Panel 1',
             height: 100,
             columnWidth: 0.5
         },
         {
             xtype: 'panel',
             title: 'Child Panel 2',
             height: 100,
             columnWidth: 0.5
         }
     ]
 }); 

ExtJS 配备了整套的布局框,可以适应任何你可以想象得到的布局类型。见 Layout Browser 去获取一个可能点子。

布局系统是如何工作的

一个容器的布局对容器的初始化和容器下面所有子组件的尺寸负责。框架内部调用容器的doLayout方法触发布局去为所有容器的子组件计算正确的尺寸和位置,并且更新DOM。doLayout方法是全递归的,因此任何容器的子元素也都会让它们的doLayout方法得到调用。这样一直持续到达底部的组件层级。在你的应用程序代码中,你一般不用去管doLayout()的调用,因为框架为代你处理它。

当容器的尺寸被修改,或者一个子组件条目被添加或删除时时,一个重布局会被触发。一般我们可以依赖框架去为我们处理布局的更新,但是有时候我们想去阻止框架自动布局以便我们能够在我们已经准备好以后把所有的操作打包,并且手动的去触发布局。为了要这样做,我们使用在容器上面suspendLayout 标示去阻止它进行布局,而我们执行(添加或者删除条目)的操作,当我们操作完了以后再把 suspendLayout 关掉,并且通过调用容器的 doLayout方法手动去触发一个布局。

 var containerPanel = Ext.create('Ext.panel.Panel', {
     renderTo: Ext.getBody(),
     width: 400,
     height: 200,
     title: 'Container Panel',
     layout: 'column',
     suspendLayout: true // Suspend automatic layouts while we do several different things that could trigger a layout on their own
 });
 // Add a couple of child items.  We could add these both at the same time by passing an array to add(),
 // but lets pretend we needed to add them separately for some reason.
 containerPanel.add({
     xtype: 'panel',
     title: 'Child Panel 1',
     height: 100,
     columnWidth: 0.5
 });
 containerPanel.add({
     xtype: 'panel',
     title: 'Child Panel 2',
     height: 100,
     columnWidth: 0.5
 });
 // Turn the suspendLayout flag off.
 containerPanel.suspendLayout = false;
 // Trigger a layout.
 containerPanel.doLayout(); 

组件布局

就像一个容器布局定义了一个容器如何去设置它的组件条目的尺寸和位置一样,一个组件也可以有一个如何去设置它的子条目的尺寸和位置的布局(Layout)。组件布局是使用 componentLayout 配置项来配置的。一般的,除非你需要写一个定制的组件,里面所有提供的组件都用他们自己的布局管理器内部控制元素的尺寸和位置,你将不需要使用这个配置。大部分组件使用Auto Layout,但是更多复杂的组件将需要一个定制的组件布局(比如一个拥有头部、尾部和工具条的Panel)。

-------------------

下面是文件来源:

http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

Visual Studio Code 快捷键大全(Windows)

Visual Studio Code 是一款优秀的编辑器,非常适合编写 TS 以及 React 。最近在学习 AngularJs 2,开始使用 VSCode,特...

1.1K50
来自专栏林德熙的博客

win10 uwp 标题栏 扩展标题栏修改颜色透明标题栏 系统状态栏

我们应用最上方的是标题栏,对于手机,最上方是状态栏。 我们可以自定义标题栏,和不显示标题栏。

42420
来自专栏web编程技术分享

js弹窗小例子

34180
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现类似于微信的悬浮显示二维码效果

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

12640
来自专栏小文博客

小文’s blog – WordPress自定义字体

15420
来自专栏吴伟祥

IDEA的快捷键应用 原

Ctrl+Shift+Alt+鼠标 (左手按着ctrl+shift+alt右手鼠标点击想要选择的位置)

10630
来自专栏前端知识分享

第121天:移动端开发基本知识

注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。

12440
来自专栏Android-薛之涛

Android 软键盘遮挡解决

        链接:https://www.jianshu.com/p/9eb57a8ff5e5

98140
来自专栏张高兴的博客

张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

543100
来自专栏Angular&服务

VSCode开发Angular2+TypeScript插件

1.Angular TypeScript Snippets for VS Code 2.Angular VS Code TypeScript and HTML...

21420

扫码关注云+社区

领取腾讯云代金券