【翻译】Sencha Touch2.4 The Layout System 布局

【翻译】The Layout System 布局

In Sencha Touch there are two basic building blocks: componentsand containers. When

you instantiate both with no configuration, they look the same. However, there is one

important difference: containers can containcomponents (or other containers):

在Sencha Touch中，有两个基本模块：组件（Components）和容器（Contaniners），如果不靠配置去实例化他们，也许你会发现他俩没啥区别，但是我要指出的是他们之间最大的不同便是，容器可以包含组件。

var container = Ext.create('Ext.Container', {
	items: [{
      xtype: 'component',
      html: 'Nested component'
	}, {
      xtype: 'container',
      items: [{
        xtype: 'component',
        html: 'Nested container with component'
	   }]
	}]
});

Usually when containers hold other components, you want to think about how to po‐

sition these multiple components. Maybe you want to position the components on top

of each other, or maybe next to each other. In other words, you want to give the container

a layout.

通常来说，当容器内含有其他组件的时候，你需要思考如何定位这么多的组件，也许你想将他们排列在Top，也许你想将他们并排排列，换句话说，你想要一个布局。

Under the hood, Sencha Touch uses the CSS3 flexbox layout. This is different from Ext

JS 4, which uses JavaScript to dynamically calculate absolute CSS positions. The reason

for the difference is because Ext JS needs to support old legacy browsers (IE6, ouch!).

CSS3 flexbox layouts work only in modern browsers, and even here, there are multiple

implementations required to support multiple browsers. To understand CSS3 flexbox

layouts, take a look at “A Complete Guide to Flexbox”.

While implementing layouts in Sencha Touch (and in Ext JS), you do not need to worry

about the underlying CSS techniques—the framework takes care of it. That said, some

concepts, like flexing boxes in Sencha Touch (dynamic sizing), are similar to the CSS3

flexbox techniques

在底层，Sencha Touch使用Css3的FlexBox布局，这不同于以前的ExtJs4，后者因为要兼容老的浏览器，所以要利用Js去动态实现CSS定位，而Flex布局只运行在现代浏览器上，为了支持多种浏览器，css3提供了多种实现。

Ext.Componentis the base class for any Sencha Touch view component (widget).

Ext.Containeris the base class for any Sencha Touch component that may visually

contain other components. The most commonly used container classes for Sencha

Touch are Ext.Panel, Ext.tab.Panel, and Ext.form.Panel.Containers handle the

basic behavior for containing, inserting, showing, removing, and hiding items.

Ext.Component是SenchaTouch 视图组件（widget）中最基础的类，

Ext.Container是SenchaTouch 中包围着component（组件）的一种容器，通常用到的容器有Ext.panel, Ext.tab.Panel,Ext.form.Panel,容器拥有自己的操作方法，比如包含（containing）、插入（inserting）、显示（showing）、隐藏（hiding）、删除（removing）各种组件。

Speaking

of containing items, you might want to position items next to each other, or even on

top of each other. Some items should be bigger than others. You might want to give

those a fixed width and height, or even better, a height and width relative to the screen

size. You can achieve all of this while working with layouts. To make this concept clear,

we’ll see some screenshots of all the different layout types. The next examples explain

all the different layout types provided by the layout package.

对于被包含的组件来说，你可能想要去定位他们，摆放他们，或者是都放在Top层，一些组件可能比其它组件大和高，显得不是很协调，此时，你就需要去自适应宽度和高度，或者做的更好一些，就需要根据屏幕去自适应，你通过布局实现这一切你想要的效果，通过这一章节，我们会看到不同的页面布局效果，下一节我将讲解不同的布局类所带来的不同的布局方案

In this chapter, you’ll learn:

• How to implement a horizontal layout
• How to implement a vertical layout
• How to implement a full screen (fit) layout
• How to implement a card layout
• How to implement the default layout (no layout)
• How to dock components

在这个章节，你将学到

• 怎么实现一个横向布局
• 怎么实现一个竖向布局
• 怎么实现一个全屏(自适应)布局
• 怎么实现一个卡片布局
• 怎么实现一个默认布局（无布局）
• 怎么dock组件 （dock是固定在某个位置，比如Top或者Bottom）

• Hands-on Sencha Touch2 中文翻译

@落雨 ae6623.cn