Extjs40学习笔记大全Word文档格式.docx

1、/script././locale/ext-lang-zh_CN.jstext/jscript Ext.require（Ext.window）; Ext.onReady（function（） Ext.create（Ext.Window, width:400, height:230, /X,Y标识窗口相对于父窗口的偏移值。 x:10, y: plain: true, /指示标题头的位置,分别为 top,bottom,left,right,默认为top headerPosition: left, title:ExtJS4 Window的创建，头在左 ）.show（）; 500,rightExtJS

2、4 Window的创建，头在右300,bottomExtJS4 Window的创建，头在底 var win = Ext.create（topExtJS4 Window的创建 ）; win.show（）; ）;/headbody/body/htmlExtJS4学习笔记（二）-HBox的使用要使用HBox布局方式，首先的熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。 1、top（默认）：排列于容器顶端。 2、middle：垂直居中排列于容器中。 3、stretch：垂直排列且拉伸义填补容器高度 4、stretchmax:垂直拉伸，并且组件以最高高度的

3、组件为准。二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。 1、start（默认）：组件在容器左边 2、center：组件在容器中间 3、end：组件在容器的右边实例代码：一、HTML代码： charset=gb2312HBox实例-d2d3 var d1 = Ext.create（Ext.PanelHBox 顶对齐，且组件在容器的左边 frame:true,600,100, items: anchor:100% layout: type:hbox padding:10 pack:

4、start align: , defaults:margins:0 5 0 0, xtype:button text:Button 1 ,Button 2Button 3Button 4 ） d1.render（d1 var d2 = Ext.create（HBox 垂直对齐，且组件在容器的右边middleend d2.render（d2 var d3 = Ext.create（HBox 垂直水平居中，并且所有控件高度为最高控件的高度5stretchmaxcenterSmall Size scale:mediumMedium SizelargeLarge Size d3.render（d3 ）

5、 ） d1.render（ var d2 = Ext.create（ d2.render（ var d3 = Ext.create（ ） d3.render（ 最后是效果图：另外多种的布局方式，大家自己尝试就OK了。ExtJS4学习笔记（三）-VBox的使用要使用VBox布局方式，首先的熟悉下一下几个主要属性： 1、left（默认）：排列于容器左侧。 2、center ：控件在容器水平居中。控件横向拉伸至容器大小控件横向拉伸，宽度为最宽控件的宽。组件在容器上边组件在容器的下边 VBox-ExtJS4学习笔记（四）-Grid的使用Extjs4 Grid创建还是比较容易的，难记、难理解的地方，也就

6、是数据的获取。下面，就创建一个最简单的Grid组件，后面，我们会逐渐丰富这个Grid的功能。HTML代码：1 2 3 4 5 Grid-6 7 8 9 grid.js10 11 12 13 demo14 15 复制代码grid.js：16 Ext.require（17 Ext.grid.*18 Ext.data.*19 ）;20 Ext.onReady（function（）21 Ext.define（MyData22 extend:Ext.data.Model23 fields: 24 /第一个字段需要指定mapping，其他字段，可以省略掉。25 name:UserName,mapping:

7、26 Sex27 Age28 XueHao29 BanJi30 31 ）;32 33 /创建数据源34 var store = Ext.create（Ext.data.Store, 35 model:36 proxy:37 /异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可38 type:ajax39 url:mydata.json40 41 reader:42 type:json43 root:items44 /totalProperty :total45 46 ,47 autoLoad: true48 ）;49 50 /创建Grid51 var grid = Ext

8、.create（Ext.grid.Panel52 store: store,53 columns:54 text:姓名, width: 120, dataIndex:, sortable: true,55 text:性别, flex: 1, dataIndex: false,56 text:年龄 100, dataIndex:57 text:学号58 text:班级 true59 ,60 height:61 width:480,62 x:20,63 y:40,64 title:ExtJS4 Grid示例65 renderTo:demo66 viewConfig:67 stripeRows:68

9、 69 ）70 ）71 Ext.require（72 73 74 ）;75 Ext.onReady（function（）76 Ext.define（77 extend:78 fields:79 /第一个字段需要指定mapping，其他字段，可以省略掉。80 name:81 82 83 84 85 86 ）;87 88 /创建数据源89 var store = Ext.create（90 model:91 proxy:92 /异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可93 type:94 url:95 96 reader:97 type:98 root:99 /totalProperty :100 101 ,102 autoLoad:103 ）;104 105 /创建Grid106 var grid = Ext.create（107 store:108 columns:109 text:110 text:111 text:112 text:, sortabl