《extjs布局和数据存储》由会员分享，可在线阅读，更多相关《extjs布局和数据存储（20页珍藏版）》请在金锄头文库上搜索。
1、ExtJS布局和数据存储,布局,所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext 的所有容器组件都支持而局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。 ExtJS 的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS 的容器组件包含一个layout 及layoutConfig 配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutCon
2、fig 配置，有的则不需要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布局等，我们在使用这些组件的时候，不能给这些容器
3、组件再指定另外的布局。,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“
4、, 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 表示使用百分比的形式指定列
5、宽度，而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布局
6、,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
7、:“子元素1“,html:“这是子元素1中的内容“, title:“子元素2“,html:“这是子元素2中的内容“ ); );,Form布局,Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。 Ext.onReady(function() new Ext.Panel( renderTo:“hello“, title:“容器组件“, width:300, layout:“form“, hideLabels:false, labelAlign:“right“, heigh
8、t:120, defaultType: textfield, items: fieldLabel:“请输入姓名“,name:“name“, fieldLabel:“请输入地址“,name:“address“, fieldLabel:“请输入电话“,name:“tel“ ); );,在实际应用中，Ext.form.FormPanel 这个类默认布局使用的是Form 布局，而且FormPanel还会创建与 标签相关的组件，因此一般情况下我们直接使用FormPanel 即可,Accordion布局,Accordion 布局由类Ext.layout.Accordion 定义，名称为accordion，
9、表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。 Ext.onReady(function() new Ext.Panel( renderTo:“hello“, title:“容器组件“, width:500, height:200, layout:“accordion“, layoutConfig: animate: true , items:title:“子元素1“,html:“这是子元素1中的内容“, title:“子元素2“,html:“这是子元素2中的内容“, title:“子元素3“,html:“这是子元素3中的内容“ ); );,Table布局及其它布局,
10、Table 布局由类Ext.layout.TableLayout 定义，名称为table，该布局负责把容器中的子元素按照类似普通html 标签 Ext.onReady(function() var panel=new Ext.Panel( renderTo:“hello“, title:“容器组件“, width:500, height:200, layout:“table“, layoutConfig: columns: 3 , items:title:“子元素1“,html:“这是子元素1中的内容“,rowspan:2,height:100, title:“子元素2“,html:“这是子元
11、素2中的内容“,colspan:2, title:“子元素3“,html:“这是子元素3中的内容“, title:“子元素4“,html:“这是子元素4中的内容“ ); );,数据存储,Record Store DataReader,Record,首先需要明确是，ExtJS 中有一个名为Record 的类，表格等控件中使用的数据是存放在Record 对象中，一个Record 可以理解为关系数据表中的一行，也可以称为记录。Record 对象中即包含了记录（行中各列）的定义信息（也就是该记录包含哪些字段，每一个字段的数据类型等），同时又包含了记录具体的数据信息（也就是各个字段的值） Ext.onR
12、eady(function() var MyRecord = Ext.data.Record.create( name: title, name: username, mapping: author, name: loginTimes, type: int, name: lastLoginTime, mapping: loginTime, type: date ); var r=new MyRecord( title:“日志标题“, username:“easyjf“, loginTimes:100, loginTime:new Date() ); alert(MyRecord.getFiel
13、d(“username“).mapping); alert(MyRecord.getField(“lastLoginTime“).type); alert(r.data.username); alert(r.get(“loginTimes“); );,首先使用Record 的create 方法创建一个记录集MyRecord，MyRecord 其实是一个类，该类包含了记录集的定义信息，可以通过MyRecord 来创建包含字段值的Record 对象。在上面的代码中，最后的几条语句用来输出记录集的相关信MyRecord.getField(“username“)可以得到记录中username 列的字段
14、信息，r.get(“loginTimes“)可以得到记录loginTimes 字段的值，而r.data.username 同样能得到记录集中username 字段的值。对Record 有了一定的了解，那么要操作记录集中的数据就非常简单了， 比如r.set(name,value)可以设置记录中某指定字段的值，r. dirty 可以得到当前记录是否有字段的值被更改过等等。,Store,Store 可以理解为数据存储器，可以理解为客户端的小型数据表，提供缓存等功能。在ExtJS 中，GridPanel、ComboBox、DataView 等控件一般直接与Store 打交道，直接通过store来获得控
15、件中需要展现的数据等。一个Store 包含多个Record，同时Store 又包含了数据来源，数据解析器等相关信息，Store 通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy)，并转换成记录集的形式保存在Store 中，作为其它控件的数据输入。 数据存储器由Ext.data.Store 类定义，一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作，在Ext.data.Store 类中数据源由proxy 配置属性定义、数据解析（读取）器由reader 配置属性定义,var MyRecord = Ext
16、.data.Record.create( name: title, name: username, mapping: author, name: loginTimes, type: int, name: lastLoginTime, mapping: loginTime, type: date ); var dataProxy=new Ext.data.HttpProxy(url:“link.ejf“); var theReader=new Ext.data.JsonReader( totalProperty: “results“, root: “rows“, id: “id“ ,MyRecord); var store=new Ex
