extjs布局

uncaught exception: No center region defined in BorderLayout ext-comp-1002 1 使用Border布局的容器必须 有一个子件在'中心'区域(region:'center')。中心区域的子件将会自动改变尺寸来填充Border布局中没有被使用的其他区域的空间。(如果不指定会报uncaught exception: No center region defined in BorderLayout XXX 异常) 2 任何west或east区域的子件都必须定义宽度(一个整数代表该区域占用的像素)(如果不指定布局不起作用，并且还会报col is null 的错) 3 任何north或south区域的子件都必须定义高度 4 Border布局的所有区域在被渲染时以及此之后就固定了，其子组件可能无法删除或添加。 5 要添加/删除Border布局内的组件，它们必须是被一个额外的由Border布局直接管理的容器所封装。如果该区域是可收起的(collapsible:true)，Border布局管理器直接使用的容器应该是一个Panel。  来源： https://www.cnblogs.com/lxJack/archive/2011/04/21/2023778.html

布局概述 　　容器中可以放置各种各样的元素，那么这些元素在容器中是如何排放的呢？是从左到右，还是从上到下？这些是容器自身不知道的，容器中子元素如何进行排放，在Ext中由布局来处理。 　　所谓的布局就是容器组件中子元素的分布、排列组合的方式。Ext中所有的容器组件都支持布局操作，每个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合以及渲染方式等。 　　Ext提供了一套强大的布局系统，通过这些布局的应用，可以满足应用程序中各种复杂的用户界面布局处理，。在Ext中的每一个布局类都有一个简短的布局名称，在使用布局的时候直接使用布局名称即可。 　　布局主要应用于容器组件，在Container类中，提供了一个layout配置选项，该项可以是一个预定义布局名称 Column布局 　　 这个布局用于在一个多列格式中创建结构化布局的布局样式, 每列可以用 百分比或固定的宽度值 来定义, 但允许高度根据内容而改变. 此类应该通过layout :'column' 属性进行扩展或创建, 通常应该不需要通过类名等关键字进行直接创建。 　　如果子面板中没有定义width或columnWidth, 主面板的宽度将被默认指定为子面板的宽度(或自动值auto). 　　参数width只能为以像素px为单位, 大于等于1的数值； 　　参数columnWidth只能为百分比, 其值必须为0到1之间的小数

table布局顾名思义，就是象table表格一样的布局 < script type = " text/javascript " > Ext.onReady( function () { var win = new Ext.Window( { title: " table Layout " , height: 210 , width: 290 , plain: true , bodyStyle: ' padding:15px ' , layout: ' table ' , layoutConfig: { columns: 3 } , defaults: {width: 80 ,height: 50 } , items: [ { html: ' 1,1(rowspan=3) ' , rowspan: 3 ,height: 150 } , { html: ' 1,2 ' } , { html: ' 1,3 ' } , { html: ' 2,2(colspan=2) ' , colspan: 2 , width: 160 } , { html: ' 3,2 ' } , { html: ' 3,3 ' } ] } ); win.show(); } ); < / script> 转载请注明来自"菩提树下的杨过" http://www.cnblogs.com/yjmyzz/archive

var form = new Ext . form . FormPanel ( { // var form = Ext.create('Ext.form.Panel',{ title : "灵活布局的表单" , width : 650 , autoHeight : true , frame : true , layout : "form" , // 整个大的表单是form布局 labelWidth : 65 , labelAlign : "right" , items : [ { // 行1 layout : "column" , // 从左往右的布局 items : [ { columnWidth : .3 , // 该列有整行中所占百分比 layout : "form" , // 从上往下的布局 items : [ { xtype : "textfield" , fieldLabel : "姓" , width : 120 } ] } , { columnWidth : .3 , layout : "form" , items : [ { xtype : "textfield" , fieldLabel : "名" , width : 120 } ] } , { columnWidth : .3 , layout : "form" , items : [ { xtype :