Extjs40学习笔记大全.docx

1、Extjs40学习笔记大全ExtJS4学习笔记(一)-window的创建Extjs4,创建Ext组件有了新的方式，就是Ext.create(.)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4中创建一个window。代码如下： 窗口实例- Ext.require(Ext.window); Ext.onReady(function() Ext.create(Ext.Window, width:400, height:230, /X,Y标识窗口相对于父窗口的偏移值。 x:10, y:10, plain: tru

2、e, /指示标题头的位置,分别为 top,bottom,left,right,默认为top headerPosition: left, title: ExtJS4 Window的创建，头在左 ).show(); Ext.create(Ext.Window, width:400, height:230, x:500, y:10, plain: true, /指示标题头的位置,分别为 top,bottom,left,right,默认为top headerPosition: right, title: ExtJS4 Window的创建，头在右 ).show(); Ext.create(Ext.Win

3、dow, width:400, height:230, x:10, y:300, plain: true, /指示标题头的位置,分别为 top,bottom,left,right,默认为top headerPosition: bottom, title: ExtJS4 Window的创建，头在底 ).show(); var win = Ext.create(Ext.Window, width:400, height:230, x:500, y:300, plain: true, /指示标题头的位置,分别为 top,bottom,left,right,默认为top headerPosition:

4、 top, title: ExtJS4 Window的创建 ); win.show(); ); ExtJS4学习笔记(二)-HBox的使用要使用HBox布局方式，首先的熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。 1、top（默认）：排列于容器顶端。 2、middle：垂直居中排列于容器中。 3、stretch：垂直排列且拉伸义填补容器高度 4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。三、pack : 字符类型，指示组件在容器的

5、位置，有如下几种属性。 1、start（默认）：组件在容器左边 2、center：组件在容器中间 3、end：组件在容器的右边实例代码：一、HTML代码： HBox实例- Ext.onReady(function() var d1 = Ext.create(Ext.Panel, title:HBox 顶对齐，且组件在容器的左边, frame:true, width:600, height:100, items: anchor:100%, layout: type:hbox, padding:10, pack:start, align:top , defaults:margins:0 5 0 0

6、, items: xtype:button, text: Button 1 , xtype:button, text: Button 2 , xtype:button, text: Button 3 , xtype:button, text: Button 4 ) d1.render(d1); var d2 = Ext.create(Ext.Panel, title:HBox 垂直对齐，且组件在容器的右边, frame:true, width:600, height:100, items: anchor:100%, layout: type:hbox, padding:10, align:mi

7、ddle, pack:end , defaults:margins:0 5 0 0, items: xtype:button, text: Button 1 , xtype:button, text: Button 2 , xtype:button, text: Button 3 , xtype:button, text: Button 4 ) d2.render(d2); var d3 = Ext.create(Ext.Panel, title:HBox 垂直水平居中，并且所有控件高度为最高控件的高度, frame:true, width:600, height:100, items: an

8、chor:100%, layout: type: hbox, padding:5, align:stretchmax, pack:center , defaults:margins:0 5 0 0, items: xtype:button, text: Small Size , xtype:button, scale: medium, text: Medium Size , xtype:button, scale: large, text: Large Size ) d3.render(d3); ) Ext.onReady(function() var d1 = Ext.create(Ext.

9、Panel, title:HBox 顶对齐，且组件在容器的左边, frame:true, width:600, height:100, items: anchor:100%, layout: type:hbox, padding:10, pack:start, align:top , defaults:margins:0 5 0 0, items: xtype:button, text: Button 1 , xtype:button, text: Button 2 , xtype:button, text: Button 3 , xtype:button, text: Button 4 )

10、d1.render(d1); var d2 = Ext.create(Ext.Panel, title:HBox 垂直对齐，且组件在容器的右边, frame:true, width:600, height:100, items: anchor:100%, layout: type:hbox, padding:10, align:middle, pack:end , defaults:margins:0 5 0 0, items: xtype:button, text: Button 1 , xtype:button, text: Button 2 , xtype:button, text: B

11、utton 3 , xtype:button, text: Button 4 ) d2.render(d2); var d3 = Ext.create(Ext.Panel, title:HBox 垂直水平居中，并且所有控件高度为最高控件的高度, frame:true, width:600, height:100, items: anchor:100%, layout: type: hbox, padding:5, align:stretchmax, pack:center , defaults:margins:0 5 0 0, items: xtype:button, text: Small

12、Size , xtype:button, scale: medium, text: Medium Size , xtype:button, scale: large, text: Large Size ) d3.render(d3); ) 最后是效果图：另外多种的布局方式，大家自己尝试就OK了。ExtJS4学习笔记(三)-VBox的使用要使用VBox布局方式，首先的熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。 1、left（默认）：排列于容器左侧。 2、center ：控件在容器水平居中。 3、stretch：控件横向拉伸至容器大小 4、str

13、etchmax:控件横向拉伸，宽度为最宽控件的宽。二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。 1、start（默认）：组件在容器上边 2、center：组件在容器中间 3、end：组件在容器的下边 VBox- html, body font: normal 12px verdana; margin: 0; padding: 0; border: 0 none; ExtJS4学习笔记(四)-Grid的使用Extjs4 Grid创建还是比较容易的，难记、难理解的地方，也就是数据的

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

15、26 Sex,27 Age,28 XueHao,29 BanJi30 31 );32 33 /创建数据源34 var store = Ext.create(Ext.data.Store, 35 model: MyData,36 proxy: 37 /异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可38 type: ajax,39 url: mydata.json,40 41 reader: 42 type: json,43 root: items,44 /totalProperty : total45 46 ,47 autoLoad: true48 );49 50 /创

16、建Grid51 var grid = Ext.create(Ext.grid.Panel,52 store: store,53 columns: 54 text: 姓名, width: 120, dataIndex: UserName, sortable: true,55 text: 性别, flex: 1, dataIndex: Sex, sortable: false,56 text: 年龄, width: 100, dataIndex: Age, sortable: true,57 text: 学号, width: 100, dataIndex: XueHao, sortable: tr

17、ue,58 text: 班级, width: 100, dataIndex: BanJi, sortable: true59 ,60 height:400,61 width:480,62 x:20,63 y:40,64 title: ExtJS4 Grid示例,65 renderTo: demo,66 viewConfig: 67 stripeRows: true68 69 )70 )71 Ext.require(72 Ext.grid.*,73 Ext.data.*74 );75 Ext.onReady(function()76 Ext.define(MyData,77 extend: Ex

18、t.data.Model,78 fields: 79 /第一个字段需要指定mapping，其他字段，可以省略掉。80 name:UserName,mapping:UserName,81 Sex,82 Age,83 XueHao,84 BanJi85 86 );87 88 /创建数据源89 var store = Ext.create(Ext.data.Store, 90 model: MyData,91 proxy: 92 /异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可93 type: ajax,94 url: mydata.json,95 96 reader: 9

19、7 type: json,98 root: items,99 /totalProperty : total100 101 ,102 autoLoad: true103 );104 105 /创建Grid106 var grid = Ext.create(Ext.grid.Panel,107 store: store,108 columns: 109 text: 姓名, width: 120, dataIndex: UserName, sortable: true,110 text: 性别, flex: 1, dataIndex: Sex, sortable: false,111 text: 年龄, width: 100, dataIndex: Age, sortable: true,112 text: 学号, width: 100, dataIndex: XueHao, sortabl