Ext_JS_培训-控件布局

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