ExtJS学习笔记(九) Layout

Ext.onReady(function () {    accordion();    absolute();    border();    card();    column();    fit();    hbox();    vbox();    table();});// 此布局将多个Panel以一种可以展开/收缩的样式排列, 且任何时候只有一个Panel可以处于展开状态. 每个Panel都会内置对展开/收缩支持.function accordion() {    Ext.create("Ext.window.Window", {        title: "Accordion",        width: 300,        height: 300,        layout: {            type: "accordion",            // 是否表示允许通过点击标题栏的任意位置来展开/收缩子项Panel            titleCollapse: true,            // 动画效果            animate: true,            // 是否面板移动到容器的第一个            activeOnTop: true        },        items: [{            title: "Panel 1",            html: "Panel 1"        }, {            title: "Panel 2",            html: "Panel 2"        }, {            title: "Panel 3",            html: "Panel 3"        }]    }).show();}// 此布局为锚点固定特性的布局, 并使用标准x,y属性进行x/y坐标定位function absolute() {    Ext.create("Ext.window.Window", {        title: "Absolute",        width: 300,        height: 300,        layout: "absolute",        defaultType: "label",        items: [{            x: 10,            y: 10,            text: "10*10"        }, {            x: 30,            y: 30,            text: "30*30"        }, {            x: 100,            y: 100,            text: "100*100"        }]    }).show();}// 此布局为面向应用的UI布局样式, 支持多重嵌套面板, 自动在各区域及内嵌展开和收缩 区域之间产生分隔栏.function border() {    Ext.create("Ext.window.Window", {        title: "Boder",        width: 500,        height: 400,        layout: "border",        defaults: {            split: true,    // 允许手动调整大小,除了中心            bodyPadding: 10        },        items: [{            // 使用Border布局的容器必须拥有一个子组件配置为region:"center"            // 布局的位置            // 东   南    西   北    中            // 右   下    左   上    中            // east south west north center            region: "south",            height: 100,            html: "南/下"        }, {            region: "west",            margin: "5 0 0 0",            html: "西/左"        }, {            region: "center",            margin: "5 0 0 0",            html: "中"        }]    }).show();}// 此布局管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个function card() {    Ext.create("Ext.window.Window", {        title: "Card",        layout: "card",        width: 500,        height: 400,        bodyPadding: 15,        bbar: ["->", {            id: "card-prev",            text: "Previous",            handler: function (btn) {                // up() 获取组件的父级组件                 click(btn.up("window"), -1);            },            disabled: true        }, {            id: "card-next",            handler: function (btn) {                click(btn.up("window"), 1);            },            text: "Next"        }],        items: [{            id: "card-0",            html: "第一步"        }, {            id: "card-1",            html: "第二步"        }, {            id: "card-2",            html: "第三步"        }]    }).show();}function click(me, incr) {    var l = me.getLayout();    var i = l.activeItem.id.split("card-")[1];    var next = parseInt(i, 10) + incr;    l.setActiveItem(next);    // down() 获取组件的子级组件     me.down("#card-prev").setDisabled(next === 0);    me.down("#card-next").setDisabled(next === 2);}// 此布局用于在一个多列格式中创建结构化布局的布局样式, 每列可以用百分比或固定的宽度值来定义, 但允许高度根据内容而改变function column() {    Ext.create("Ext.window.Window", {        title: "Column",        width: 500,        height: 240,        layout: "column",        bodyPadding: 5,        defaults: {            bodyPadding: 15        },        items: [{            title: "0.3",            columnWidth: 0.3,            html: "<p>0.3</p><p>0.3</p><p>0.3</p>"        }, {            title: "0.7",            columnWidth: 0.7,            html: "<p>0.7</p><p>0.7</p><p>0.7</p>"        }, {            title: "150px",            width: 150,            html: "<p>150px</p><p>150px</p><p>150px</p>"        }]    }).show();}// 此布局当容器只包含一个子元素时, 子元素自动填满容器function fit() {    Ext.create("Ext.window.Window", {        title: "Fit",        width: 300,        height: 150,        layout: "fit",        items: {            title: "Inner Panel",            html: "This is the inner panel content",            bodyPadding: 20,            border: false        }    }).show();}// 此布局是将所有子组件在容器中水平排列function hbox() {    Ext.create("Ext.window.Window", {        title: "HBox",        width: 500,        height: 400,        layout: {            type: "hbox",            // 控制子组件如何被打包在一起. 此属性的有效值为:            // start - 子组件被包在一起放在容器的左边 (默认)            // center - 子组件被包在一起放在容器里居中            // end - 子组件被包在一起放在容器的右边            pack: "center",            // 对其方式            // top : 默认值 各子组件在容器顶部水平对齐.            // middle : 各子组件在容器中间水平对齐.            // stretch : 各子组件的高度拉伸至与容器的高度相等.            // stretchmax : 各子组件的高度拉伸至与最高的子组件的高度相等.            align: "stretch"        },        bodyPadding: 10,        defaults: {            frame: true,            bodyPadding: 10        },        items: [{            title: "Panel 1",            flex: 1,            margin: "0 10 0 0",            html: "flex : 1"        }, {            title: "Panel 2",            width: 100,            margin: "0 10 0 0",            html: "width : 100"        }, {            title: "Panel 3",            flex: 2,            html: "flex : 2"        }]    }).show();}// 此布局是将所有子组件在容器中垂直排列function vbox() {    Ext.create("Ext.window.Window", {        title: "VBox",        width: 400,        height: 500,        layout: {            type: "vbox",            pack: "center",            // 类似hbox属性，水平变为垂直  高度变为宽度            align: "stretch"        },        bodyPadding: 10,        defaults: {            frame: true,            bodyPadding: 10        },        items: [{            title: "Panel 1",            flex: 1,            margin: "0 10 0 0",            html: "flex : 1"        }, {            title: "Panel 2",            height: 100,            margin: "0 10 0 0",            html: "height : 100"        }, {            title: "Panel 3",            flex: 2,            html: "flex : 2"        }]    }).show();}// 此布局允许你很轻松的将内容渲染到一个HTML的table中. 可以指定列数, 也能够使用rowspan和colspan参数来创建复杂的布局// 对于TableLayout来说, 唯一有效的参数只有 columns 和 tableAttrs. 但是, 所有添加到此布局下的子项可以支持以下 几个布局专用属性:// rowspan 应用到包含此子项的table单元格.// colspan 应用到包含此子项的table单元格.// cellId 一个ID添加到包含此子项的table单元格上.// cellCls 一个CSS class名称添加到包含此子项的table单元格上.function table() {    Ext.create("Ext.window.Window", {        title: "Table",        width: 500,        height: 140,        layout: {            type: "table",            columns: 3,            tableAttrs: {                style: {                    width: "100%"                }            }        },        scrollable: true,        defaults: {            bodyPadding: "15 20",            border: true        },        items: [{            html: "Cell A content",            height: 100,            rowspan: 2        }, {            html: "Cell B content",            height: 50,            colspan: 2        }, {            html: "Cell C content",            height: 50        }, {            html: "Cell D content",            height: 50        }]    }).show();}