在Sencha Touch 2.0中使用設(shè)計(jì)布局
導(dǎo)言及Hbox布局(水平布局)
我們可以用hbox布局來實(shí)現(xiàn)這兩個(gè)組件的伸縮Flex，伸縮Flex意味著我們能夠把可用的空間按照每一個(gè)子組件的Flex系數(shù)進(jìn)行分割。為了實(shí)現(xiàn)剛才我們說的郵件客戶端的例子，我們可以像這樣來設(shè)置伸縮：
這個(gè)例子的代碼非常簡單，我們僅需要為任意一個(gè)容器指定“hbox”布局，然后，為每一個(gè)處于其中的組件分配一個(gè)Flex系數(shù)即可(在這個(gè)例子中，組件用的是面板-Panels)。
- Ext.create('Ext.Container', {
- fullscreen: true,
- layout: 'hbox',
- items: [
- {
- xtype: 'panel',
- html: 'message list',
- flex: 1
- },
- {
- xtype: 'panel',
- html: 'message preview',
- flex: 2
- }
- ]
- });
在這個(gè)例子中，我們創(chuàng)建了一個(gè)填滿整個(gè)屏幕的容器，并在其內(nèi)部創(chuàng)建了一個(gè)郵件列表面板和一個(gè)內(nèi)容瀏覽面板。它們的Flex系數(shù)分別為1和2(左側(cè)的面板Flex系數(shù)為1，右側(cè)面板Flex系數(shù)為2)，這意味著左側(cè)面板將占去1/3的寬度，右側(cè)面板將占用其余2/3的寬度。如果我們的容器寬度為300像素，那么左側(cè)的面板的寬度為100像素，右側(cè)面板的寬度為200像素。
hbox是最有用的布局之一，它可以在水平方向組合排列組件。更多的例子，請(qǐng)參閱的HBox文檔。
VBox布局(垂直布局)
VBox布局與HBox布局基本類似，只是它的排列方向?yàn)榇怪倍皇撬健Ｍ瑯樱覀兛梢院唵蔚陌阉胂駷槿缦聝蓚€(gè)盒子：
這段代碼幾乎與上一個(gè)例子的代碼相同，我們僅僅是把容器的布局屬性設(shè)置為"vbox"：
- Ext.create('Ext.Container', {
- fullscreen: true,
- layout: 'vbox',
- items: [
- {
- xtype: 'panel',
- html: 'message list',
- flex: 1
- },
- {
- xtype: 'panel',
- html: 'message preview',
- flex: 2
- }
- ]
- });
在這個(gè)例子中，如果容器的高度為300像素，那么***個(gè)面板(FLEX：1)的高度為100像素，第二個(gè)面板(FLEX：2)高度為200像素。 可以參見VBox的文檔以獲取更多的例子。
Card布局(卡片布局)
有時(shí)你想將展現(xiàn)多個(gè)充滿信息的屏幕，但現(xiàn)實(shí)是，你只有一個(gè)小屏幕可用。TabPanels和Carousels都能夠讓你在同一時(shí)間看到你想展示的諸多屏幕中的一個(gè)，它們都是使用Card布局來實(shí)現(xiàn)的。
卡片布局在其應(yīng)用的容器中占滿整個(gè)空間，并使得當(dāng)前活動(dòng)的項(xiàng)目完全填滿該容器，并隱藏的其余的項(xiàng)目。Card布局允許你選擇任何一個(gè)項(xiàng)目作為當(dāng)前可見的項(xiàng)目，但在同一時(shí)間只能顯示一個(gè)：
在這個(gè)例子中，灰色方塊是我們的容器，它里面的藍(lán)色方塊是當(dāng)前活躍的項(xiàng)目。其他三個(gè)項(xiàng)目在視圖中是隱藏的，但這三個(gè)隱藏項(xiàng)目可以替換成為當(dāng)前顯示的項(xiàng)目。通常并不直接創(chuàng)建Card布局，你可以這樣來實(shí)現(xiàn)：
- var panel = Ext.create('Ext.Panel', {
- layout: 'card',
- items: [
- {
- html: "First Item"
- },
- {
- html: "Second Item"
- },
- {
- html: "Third Item"
- },
- {
- html: "Fourth Item"
- }
- ]
- });
- panel.getLayout().setActiveItem(1);
在這里，我們創(chuàng)建一個(gè)具有卡片布局的面板，在***一句代碼中設(shè)置第二個(gè)項(xiàng)目為該面板的顯示項(xiàng)(數(shù)組的下標(biāo)是從0開始的，所以1代表第二項(xiàng))。通常情況下，你***使用一個(gè)Tab Panel或Carousel。
Fit布局(填充布局)
填充布局(Fit Layout)可能是最簡單的布局了。它的作用就是使一個(gè)子組件撐滿它所在的父容器。
例如，如果你有一個(gè)200像素*200像素的容器，并為它建立一個(gè)獨(dú)立的子組件并將該容器的布局設(shè)置為“Fit布局”，那么子組件也將是200像素*200像素：
- var panel = Ext.create('Ext.Panel', {
- width: 200,
- height: 200,
- layout: 'fit',
- items: {
- xtype: 'panel',
- html: 'Also 200px by 200px'
- }
- });
- Ext.Viewport.add(panel);
Docking(停靠)
每一種布局均具備在其中“停靠”組件的功能。“停靠”功能能夠使你將新增的組件放置在父容器的頂部、右側(cè)、底部和左側(cè)，并會(huì)自動(dòng)重新分配其余組件所占的空間大小。
例如，回到前面我們***個(gè)布局：hbox布局，讓我們想象一下，我們要停靠在頂部的一個(gè)新增組件，如下圖的藍(lán)色部分：
這種停靠經(jīng)常用來實(shí)現(xiàn)toolbar和banner等，并很容易就通過這樣的語句 Dock:'top' 來實(shí)現(xiàn)：
- Ext.create('Ext.Container', {
- fullscreen: true,
- layout: 'hbox',
- items: [
- {
- dock: 'top',
- xtype: 'panel',
- height: 20,
- html: 'This is docked to the top'
- },
- {
- xtype: 'panel',
- html: 'message list',
- flex: 1
- },
- {
- xtype: 'panel',
- html: 'message preview',
- flex: 2
- }
- ]
- });
你可以在容器中增加多個(gè)停靠在其中的組件，只需要在你想停靠的組件上簡單的設(shè)置Dock屬性就可以了。你可以將組件停靠在父容器的任意一邊。
例如，我們可以在之前的vbox布局中將一個(gè)新的組件停靠在父容器的左側(cè)：
我們可以指定新增的組件的dock屬性為"left",即可實(shí)現(xiàn)此例。
- Ext.create('Ext.Container', {
- fullscreen: true,
- layout: 'vbox',
- items: [
- {
- dock: 'left',
- xtype: 'panel',
- width: 100,
- html: 'This is docked to the left'
- },
- {
- xtype: 'panel',
- html: 'message list',
- flex: 1
- },
- {
- xtype: 'panel',
- html: 'message preview',
- flex: 2
- }
- ]
- });
你可以在父容器的每一側(cè)同時(shí)停靠多個(gè)組件(例如，可以在底部同時(shí)停靠幾個(gè)組件)。
延伸閱讀
布局只是Sencha Touch2的一部分。如果要了解更多的關(guān)于此框架的信息以及了解它是如何運(yùn)作的，我們建議你進(jìn)一步參考以下內(nèi)容：
Components and Containers
The Class System
The Data Package
Getting Started
在 2011年10月25日 20:33 被 威老 ***編輯
