EXT日志Word下载.docx

1、2,李四,30,女Date（1980,09,13）,3,王五,28,Date（1982,01,10）; 1. varpersonExt.data.Record.create（2. name:personId,mapping:0,3. personName1,4. personAge2,5. personGender3,6. personBirth47. ）;8. 9. /复选框选择模式10. varcheckboxSMnewExt.grid.CheckboxSelectionModel（11. checkOnly:false,12. singleSelect:false13. ）;14. 15

2、. varcellSMExt.grid.CellSelectionModel（）;16. 17. vargridExt.grid.EditorGridPanel（18. title:EditorGridPanel实例19. renderTo:div120. width:500,21. height:300,22. frame:true,23. tbar:24. 25. text:保存26. iconCls:save27. handler:function（）28. 29. 30. ,31. 32. 刷新33. refresh34. 35. 36. 37. 38. ,39. store:Ext.

3、data.Store（40. reader:Ext.data.ArrayReader（id:person）,41. data:42. ）,43. columns:44. checkboxSM,45. 46. id:47. header:编号48. 50,49. dataIndex:50. 51. 52. 53. 姓名54. 70,55. 56. editor:Ext.form.TextField（57. allowBlank:58. ）59. 60. 61. 62. 年龄63. 45,64. 65. Ext.form.NumberField（）66. 67. 68. 69. 性别70. 71.

4、 72. Ext.form.ComboBox（73. editable:74. displayField:sex75. mode:local76. triggerAction:all77. Ext.data.SimpleStore（78. fields:79. 80. 81. 82. 83. 84. 85. 出生日期86. 120,87. 88. renderer:Ext.util.Format.dateRenderer（Y年m月d日）,89. Ext.form.DateField（90. format:Y-m-d91. 92. 93. 94. autoExpandColumn:95. str

5、ipeRows:96. sm:97. ）;var datas = 1,new Date（1986,06,09）, 2,new Date（1980,09,13）, 3,new Date（1982,01,10）; var person = Ext.data.Record.create（ name:, mapping: 0, name: 1, name: 2, name: 3, name: 4 ）; /复选框选择模式 var checkboxSM = new Ext.grid.CheckboxSelectionModel（ checkOnly: false, singleSelect: false

6、）; var cellSM = new Ext.grid.CellSelectionModel（）; var grid = new Ext.grid.EditorGridPanel（ title:, renderTo:, width: 500, height: 300, frame: true, tbar: text:, iconCls:, handler: function（） , text: function（） , store: new Ext.data.Store（ reader: new Ext.data.ArrayReader（id:0, person）, data: datas

7、）, columns: checkboxSM, id:, header:50, dataIndex: , id:70, dataIndex:, editor:new Ext.form.TextField（ allowBlank:false ） , id:45, dataIndex:new Ext.form.NumberField（） , id: new Ext.form.ComboBox（ editable: false, displayField:, mode:, triggerAction:, store: new Ext.data.SimpleStore（ fields: , data:

8、 , ） ） , id:120, dataIndex:, renderer:）, editor:new Ext.form.DateField（ format: ） , autoExpandColumn:, stripeRows: true, sm: checkboxSM ）;Ext.data.JsonStore 对象Ext.data.JsonStore 对象 先来看看这个对象是干嘛的:Json:JS的数据格式Store:名词是商店,商店里可以摆放货物（数据）.动词是储藏,商店里的货物都是按一定规律排放的,自然我们的数据也要按一定的规律排放.JsonStore:通俗讲就是Json格式数据的一个商

9、店了.里面不仅有数据,而且还可以定义数据的存放规则,还有店员（方法）,你可以用方法获取数据,以及把这些数据删除更新添加等Ext.data.JsonReader 对象 那我们先来说说怎么摆放数据,不然货物进来了乱堆可不行.这就要说到Ext.data.JsonReader 这个对象了.因为 Ext.data.JsonStore 已经包含了 Ext.data.JsonReader 所以我们在新建一个 Ext.data.JsonStore 实例的时候,并不需要再建个 Ext.data.JsonReader 出来.这里把 Ext.data.JsonReader 的几个常用属性列出来.其它的可以去参考它的

10、API: JsonReader .我们要先拿到货了,才能判断这个货是摆在哪里对吧,所以先拿货物清单出来瞧瞧: results: 2000, rows: id: 1, firstname: Bill, occupation:Gardener , 2, firstname:Ben , occupation:Horticulturalist . 2000, id: ,. 这清单上有2个属性,results 说明这个货物有2000件,rows 是个数组,自然是2000条了,里面的单条信息就是我们要的具体货物信息了.单件货物有3个属性 id, firstname 和 occupation （天,这些货物

11、好像是人） .（注意这个清单里的属性是我们写的.所以也可以是别的,如:你可以把 results 写成totalCount 或者把 rows 写成 data,或者把 occupation 写成 other,当然 id 这个属性有点特殊,但也没死规定不能换成别的,哈哈 ）好了,我们有清单了,但我们要把这个清单录进电脑,让其他人也能看到,可是我们能一个个输这些也太麻烦了.所以我们能要告诉电脑怎么读这个清单.首先是totalProperty : results就是确定货物的总件数了.其次是root :rows 告诉电脑我们的清单是哪个数组现在我们来设置 fields 来读取这个数组:fields: n

12、amejob, mappingoccupation, 告诉电脑把occupation 属性转为 job. 告诉电脑把 id 转成 name. 为什么是id呢,这边又涉及的JsonReader 对象里的一个属性idProperty（默认值是id） ,他告诉电脑,id 是默认的属性.你也可以把其它的设成默认属性,如idProperty: firstname,这样当我们 的时候,就是告诉电脑把firstname转成name 了.Fields 现在看来是个数组.那什么时候才是个对象呢,就是当rows里的单条记录只有1个属性的时候了.Ext.data.JsonStore 对象加载数据 好了.我们已经告诉

13、机器怎么读清单了,但现在有个问题,我们要去哪里读这个清单.这里就开始用到JsonStore 自己的属性了.url : 数据清单的地址,这个地址输出的结果就是上面已经写了的那个 2000数据的清单.这里会用AJAX调用.autoLoad :是否在JsonStore对象创建后自动打开 url并加载数据.不写这个属性默认是不会自动加载,等同于写autoLoad:falseautoLoad 可以是布尔,也可以是一个对象,当是对象的时候,这个对象就会在加载的时候传递到JsonStore的load 方法里.这个对象可以参考API中的 load 方法, 有一些特定的属性.当我们把autoLoad 设为fal

14、se 或者不设置该值时,我们就需要在后续的代码中手动调用 load（） 方法才能打开url并加载数据了.JsonStore 还有其它的配置参数以及方法 ,如:如何得到单条数据,如何添加新数据删除更新等. 详见API: JsonStore load方法. load（Object options） : Boolean 默认是返回true,但当我们在监听beforeload 事件时,定义的句柄返回 false,则load 停止（也就是不打开url加载数据了）并返回false.options:load时定义的参数,这个就是autoLoad那要传的一样了.params 打开url后附带传递的参数对象,如

15、:id:1234callback 函数,当数据加载完成后调用的函数,有3个参数如:r : Ext.data.Record 记录集数组. options : 发送给服务器的对象params:1234 success : 是否成功,布尔. scope 定义callback的作用域 add 是添加到现有数据后,还是替换现有数据.默认是替换 false:替换现有数据 ExtJs学习系列之 GridPanel：Ext.grid.ColumnModel 列配置属性说明配置选项名类型 作用header String 列头文字说明dataIndex 记录结构中的name属性值width Number 列的宽度

16、sortable Boolean 是否排序fixed Boolean 是否固定宽度resizable Boolean 是否能改变列的宽度menuDisabledBoolean 单击类头后是否出现菜单tooltip 悬停提示renderer Function自定义单元格内容align 列的对齐方式，有left、center和right一共就是六个参数function（value, cellmeta, record, rowIndex, columnIndex, store）1.value是当前单元格的值2.cellmeta里保存的是cellId单元格id，id是列号，css是这个单元格的css样

17、式。3.record是这行的所有数据，你想要什么，record.dataid这样就获得了。4.rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。5.columnIndex列号。6.store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了/自动生成查询窗口有用store.recordType-recordstore.recordType.prototype.fields.length-record的字段数store.recordType.getField（0）-record的字段for（var i=0;iUser.

18、prototype.fields.length;i+）alert（User.getField（i）.name+User.getField（i）.mapping+User.getField（i）.type）;/添加、删除、修改时有用store.getModifiedRecords（）-返回有修改的Record集合store.getModifiedRecords（）.lengthstore.getModifiedRecords（）0.getChanges（）. sex:1女store.getModifiedRecords（）0.modifiedstore.data.items0.dirty/记录集是否修改过mit（）;/将Record的原始版本修改为当前版本mitChanges（）;/将Store中所有的Record的原始版本修改为当前版本/发下来的原始数据的的行数store.totalLength2store.getCount（）/store中实际有的数量3/语法和DataReader的meta数据store.reader.meta id: totalRecords:totalCount root:rowstore.reader.meta.idstore.re