Sencha Touch 1.1培训教程第四章：Sencha Touch布局介绍

作者：廖章编辑整理：刚子来自：移动Web开发社区

在我们的Web应用开发中，页面的排版、布局很重要，用户就是通过页面操作来完成日常工作的。如果界面布局不合理、操作不方便，用户也不会对系统有好的印象、甚至有可能影响一个项目的成败。我自己的经验是，在开发某个功能模块时，除了仔细属性该模块的功能需求和业务需求外，还会在草稿纸上简单的把该功能的布局画出来（如果美工已经制作有页面模型外）。例如：

该图片为适合页面被自动缩小. 查看大图请点击.

Sencha Touch的布局类似Extjs中的布局，常用的有：BoxLayout、HBoxLayout、VBoxLayout、FitLayout、CardLayout。

BoxLayout、HBoxLayout、VBoxLayout（箱子布局）

BoxLayout是箱子布局，该布局类似于药店里放置中草药的大柜子里一个个小箱子那样，把组件放置在容器中（Container）中。BoxLayout是HBoxLayout和VBoxLayout这两个布局类的父类，一般很少直接使用。

HBoxLayout是水平箱子布局，即把组件横排的放置在容器中。

代码清单：

var viewport = new Ext.Panel({

            fullscreen: true,

            //width: 500,

            //height: 200,

            margin: '0 0 0 0',

            layout: {

                type: 'hbox', //指定layout布局方式为HBoxLayout

                align: 'stretch' //布局里的‘小容器’拉伸,类似window桌面图片那样，拉伸到整个页面大

            },

            items: [{

                flex: 1, //所占宽度的比率

                //height: 200,

                style: 'border:1px red solid', //自定义样式

                margin: '0 20 0 0', //设置边框距离

                items: [{

                    xtype: 'button',

                    text: '第一',

                    margin: 6

                }]

            },{

                flex: 2,

                //height: 200,

                style: 'border:1px red solid',

                margin: '0 20 0 0',

                html: '<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'

            },{

                flex: 3,

                //height: 200,

                style: 'border:1px red solid',

                items: [{

                    xtype: 'button',

                    text: '第三',

                    margin: 6

                }]

            }]
 
});

有两个属性需要关注一下：
1、 align: 'stretch'，该属性是设置容器里‘小容器’的对齐方式。
2、 flex属性是设置‘小容器’的宽度比率，具体的计算方式请参看文档。当然还有其他的属性，例如：style、margin、padding，这些属性主要是设置样式的。

VBoxLayout垂直箱子布局，即把组件垂直的放置在容器中。

代码清单：

var viewport = new Ext.Panel({

            fullscreen: true,

            //width: 500,

            //height: 200,

            margin: '0 0 0 0',

            layout: {

                type: 'vbox', //指定layout布局方式为VBoxLayout

                align: 'stretch' //布局里的‘小容器’拉伸

            },

            items: [{

                flex: 1, //所占宽度的比率

                //height: 200,

                style: 'border:1px red solid',

                margin: '0 0 10 0',

                items: [{

                    xtype: 'button',

                    text: '第一',

                    margin: 6

                }]

            },{

                flex: 2,

                //height: 200,

                style: 'border:1px red solid',

                margin: '0 0 10 0',

                html: '<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'

            },{

                flex: 3,

                //height: 200,

                style: 'border:1px red solid',

                items: [{

                    xtype: 'button',

                    text: '第三',

                    margin: 6

                }]

            }]
 
    });

FitLayout（自适应布局）

FitLayout是布局的基础类，对应面板布局配置项的名称为fit，使用fit布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有一个会被显示。

代码清单：

var viewport = new Ext.Panel({

            fullscreen: true,

            //width: 500,

            //height: 200,

            margin: '0 0 0 0',

            layout: 'fit', //指定layout布局方式为FitLayout

            items: [{

                style: 'border:1px red solid',

                html: '<div style="border:1px red dashed;margin:6px;">第一个小箱子</div>'

            },{

                style: 'border:1px blue solid',

                html: '<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'

        }]          
});

CardLayout（卡片式布局）

CardLayout在sencha touch中是最常用的布局，模仿本地应用的页面转换效果主要通过它来体现出来。它是扩展自FitLayout布局，对应面板布局配置项的名称为card。该布局会包含多个子面板，但任何时候都只有一个子面板处于显示状态，这种布局经常用来制作向导和标签页。

各个字面板之间切换的途径是调用setActiveItem方法，该方法接收一个子面板对象或id、索引作为参数。

代码清单：

//工具栏-toolbar

var funBar = {

            xtype: 'toolbar',

            title: 'CardLayout例子',

            dock: 'top', //工具栏放置的位置（必须的属性）：top-上,bottom-下,left-左,right-右

            scroll: 'horizontal',

            height: 30,

            items: [{

            xtype: 'button',

                text: '桌面',

                ui: 'back',

                //iconMask: true,

                //iconCls: 'home',

                style: btStyle,

                handler: function(){                    

                      window.location = prefix + '/index.action';

                   }

            },{

                xtype: 'button',

                text: '第一个子面板',

                style: btStyle,

                handler: function(){                    

                      changeItem('p1');

                }

            },{

                xtype: 'button',

                text: '第二个子面板',

                style: btStyle,

                handler: function(){                    

                      changeItem('p2');

                   }

            }]

        };
 
        //主界面

        var viewport = new Ext.Panel({

            fullscreen: true,

            margin: '0 0 0 0',

            layout: 'card', //指定layout布局方式为CardLayout

            activeItem: 0,

            dockedItems: [funBar],

            items: [{

                id: 'p1',

            style: 'border:1px red solid',

                html: '<div style="border:1px red dashed;margin:6px;">第一个小箱子</div>'

            },{

                    id: 'p2',

                style: 'border:1px blue solid',

                html: '<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'

            }]          

        });
 
        //切换子面板

        var changeItem = function(id){

            viewport.setActiveItem(id, 'slide');
};
};