ExtJS布局和数据存储.ppt

ExtJS布局和数据存储 布局 所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext 的所有容器组件都支持而局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。 ExtJS 的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS 的容器组件包含一个layout 及layoutConfig 配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig 配置，有的则不需要layoutConfig 配置。 Ext.onReady(function(){ new Ext.Panel({ renderTo:hello, width:400, height:200, layout:column, items:[{columnWidth:.5, title:面板1}, {columnWidth:.5, title:面板2}] }); }); Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。 Border布局 Border 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置 Ext.onReady(function(){ new Ext.Viewport({ layout:border, items:[{region:north, height:50, title:顶部面板}, {region:south, height:50, title:底部面板}, {region:center, title:中央面板}, {region:west, width:100, title:左边面板}, {region:east, width:100, title:右边面板} ] }); }); Column列布局 Column 列布局由Ext.layout.ColumnLayout 类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度，而width 则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。 Ext.onReady(function(){ new Ext.Panel({ renderTo:hello, title:容器组件, layout:column, width:500, height:100, items:[{title:列1,width:100}, {title:列2,width:200}, {title:列3,width:100}, {title:列4} ] } ); }); 也可使用columnWidth 来定义子元素所占的列宽度，注意columnWidth 的总和应该为1 Fit布局 Ext.onReady(function(){ new Ext.Panel({ renderTo:hello, title:容器组件, layout:fit, width:500, height:100, items:[{title:子元素,html:这是子元素中的内容} ] } ); }); 上面的代码指定父容器使用Fit 布局，因此子将自动填满整个父容器 Ext.onReady(function(){ new Ext.Panel({ renderTo:hello, title:容器组件, layout:fit, width:500, height:100, items:[{title:子元素1,html:这是子元素1中的内容}, {title:子元素2,html:这是子元素2中的内容} ] } ); }); Form布局 Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。 Ext.onReady(function(){ new Ext.Panel({