Ext JS 培训 控件布局ppt课件.ppt

* * * * * * Ext 学习-第二讲控件布局 200907 主要内容 border table card column form fit anchor accordion absolute Form 布局 Layout:’form’ 专门用于管理表单中输入字段的布局  Column布局 {layout:column,border:false, items:[{columnWidth:.5,layout:form,border:false,items:a}, {columnWidth:.5,layout:form,border:false,items:b}] } Border 布局 Layout:’border’ Region: north east south west center Border布局属性 collapsible: true,//可折叠属性,允许伸缩 ??  Viewport Viewport的用途是：是一个专门的容器，用来构建一个适应浏览器的程序界面，该界面将其自身渲染至文档的主体中，并且自动根据浏览器的大小缩放其自身，同时管理窗口的缩放动作。一个页面只允许创建一个界面，通过其自身的item，或是其他的items，或是添加其子面板的方法，从而达到实现布局的目的 Accordion布局 Layout:’accodion’ 综合举例 Table布局 layout:table, layoutConfig: {columns:3} // 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列  Card布局 Layout:’card’ 方法: getLayout.setActiveItem(id/Number) Anchor 布局 {title:Item 1,html:wtf,width:800,anchor:right 20%}, {title:Item 2,html:wtf,width:300,anchor:50% 30%}, {title:Item 3,html:wtf,width:600,anchor:-100 50%} Absolute布局 在容器内部，根据指定的坐标定位显示即用x,y值来绝对定位组件 * * * * * * * * * * * *