EXT日志Word下载.docx
《EXT日志Word下载.docx》由会员分享，可在线阅读，更多相关《EXT日志Word下载.docx（29页珍藏版）》请在冰豆网上搜索。
[2,"
李四"
30,"
女"
Date（1980,09,13）],
[3,"
王五"
28,"
Date（1982,01,10）]];
1.var
person
Ext.data.Record.create（[
2.
{name:
personId"
mapping:
0},
3.
personName"
1},
4.
personAge"
2},
5.
personGender"
3},
6.
personBirth"
4}
7.]）;
8.
9.//复选框选择模式
10.var
checkboxSM
new
Ext.grid.CheckboxSelectionModel（{
11.
checkOnly:
false,
12.
singleSelect:
false
13.}）;
14.
15.var
cellSM
Ext.grid.CellSelectionModel（）;
16.
17.var
grid
Ext.grid.EditorGridPanel（{
18.
title:
EditorGridPanel实例"
19.
renderTo:
div1"
20.
width:
500,
21.
height:
300,
22.
frame:
true,
23.
tbar:
[
24.
{
25.
text:
保存"
26.
iconCls:
save"
27.
handler:
function（）{
28.
29.
}
30.
},
31.
32.
刷新"
33.
refresh"
34.
35.
36.
37.
38.
],
39.
store:
Ext.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.
72.
Ext.form.ComboBox（{
73.
editable:
74.
displayField:
sex"
75.
mode:
local"
76.
triggerAction:
all"
77.
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-d"
91.
92.
93.
94.
autoExpandColumn:
95.
stripeRows:
96.
sm:
97.}）;
vardatas=[[1,"
newDate（1986,06,09）],[2,"
newDate（1980,09,13）],[3,"
newDate（1982,01,10）]];
varperson=Ext.data.Record.create（[{name:
mapping:
0},{name:
1},{name:
2},{name:
3},{name:
4}]）;
//复选框选择模式varcheckboxSM=newExt.grid.CheckboxSelectionModel（{checkOnly:
false,singleSelect:
false}）;
varcellSM=newExt.grid.CellSelectionModel（）;
vargrid=newExt.grid.EditorGridPanel（{title:
renderTo:
width:
500,height:
300,frame:
true,tbar:
[{text:
iconCls:
handler:
function（）{}},{text:
function（）{}}],store:
newExt.data.Store（{reader:
newExt.data.ArrayReader（{id:
0},person）,data:
datas}）,columns:
[checkboxSM,{id:
header:
50,dataIndex:
},{id:
70,dataIndex:
editor:
newExt.form.TextField（{allowBlank:
false}）},{id:
45,dataIndex:
newExt.form.NumberField（）},{id:
newExt.form.ComboBox（{editable:
false,displayField:
mode:
triggerAction:
store:
newExt.data.SimpleStore（{fields:
["
],data:
[["
],["
]]}）}）},{id:
120,dataIndex:
renderer:
）,editor:
newExt.form.DateField（{format:
}）}],autoExpandColumn:
stripeRows:
true,sm:
checkboxSM}）;
Ext.data.JsonStore对象
Ext.data.JsonStore对象
先来看看这个对象是干嘛的:
Json:
JS的数据格式
Store:
名词是商店,商店里可以摆放货物（数据）.动词是储藏,商店里的货物都是按一定规律排放的,自然我们的数据也要按一定的规律排放.
JsonStore:
通俗讲就是Json格式数据的一个商店了.里面不仅有数据,而且还可以定义数据的存放规则,还有店员（方法）,你可以用方法获取数据,以及把这些数据删除\更新\添加等…
Ext.data.JsonReader对象
那我们先来说说怎么摆放数据,不然货物进来了乱堆可不行.这就要说到Ext.data.JsonReader这个对象了.
因为Ext.data.JsonStore已经包含了Ext.data.JsonReader所以我们在新建一个Ext.data.JsonStore实例的时候,并不需要再建个Ext.data.JsonReader出来.
这里把Ext.data.JsonReader的几个常用属性列出来.其它的可以去参考它的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（天,这些’货物’好像是人）.
（注意这个清单里的属性是我们写的.所以也可以是别的,如:
你可以把results写成totalCount或者把rows写成data,或者把occupation写成other,当然id这个属性有点特殊,但也没死规定不能换成别的,哈哈）
好了,我们有清单了,但我们要把这个清单录进电脑,让其他人也能看到,可是我们能一个个输这些也太麻烦了.所以我们能要告诉电脑怎么读这个清单.
首先是totalProperty:
‘results’就是确定货物的总件数了.
其次是root:
’rows’告诉电脑我们的清单是哪个数组
现在我们来设置fields来读取这个数组:
fields"
:
{"
name"
job"
"
mapping"
occupation"
]
{"
},
}
]
}告诉电脑把occupation属性转为job.
}告诉电脑把id转成name.为什么是id呢,这边又涉及的JsonReader对象里的一个属性idProperty（默认值是’id’）,他告诉电脑,id是默认的属性.你也可以把其它的设成默认属性,如idProperty:
‘firstname’,这样当我们{"
}的时候,就是告诉电脑把firstname’转成name了.
Fields现在看来是个数组.那什么时候才是个对象呢,就是当rows里的单条记录只有1个属性的时候了.
Ext.data.JsonStore对象加载数据
好了.我们已经告诉机器怎么读清单了,但现在有个问题,我们要去哪里读这个清单.这里就开始用到JsonStore自己的属性了.
url:
数据清单的地址,这个地址输出的结果就是上面已经写了的那个2000数据的清单.这里会用AJAX调用.
autoLoad:
是否在JsonStore对象创建后自动打开url并加载数据.不写这个属性默认是不会自动加载,等同于写autoLoad:
false
autoLoad可以是布尔,也可以是一个对象,当是对象的时候,这个对象就会在加载的时候传递到JsonStore的load方法里.这个对象可以参考API中的load方法,有一些特定的属性.当我们把autoLoad设为false或者不设置该值时,我们就需要在后续的代码中手动调用load（）方法才能打开url并加载数据了.
JsonStore还有其它的配置参数以及方法,如:
如何得到单条数据,如何添加新数据\删除\更新等..详见API:
JsonStore
load方法.
load（Objectoptions）:
Boolean默认是返回true,但当我们在监听beforeload事件时,定义的句柄返回false,则load停止（也就是不打开url加载数据了）并返回false.
options:
load时定义的参数,这个就是autoLoad那要传的一样了.
params打开url后附带传递的参数对象,如:
{id:
’1234’}
callback函数,当数据加载完成后调用的函数,有3个参数如:
r:
Ext.data.Record[]记录集数组.
options:
发送给服务器的对象{params:
’1234’}}
success:
是否成功,布尔.
scope定义callback的作用域
add是添加到现有数据后,还是替换现有数据.默认是替换false:
替换现有数据
ExtJs学习系列之GridPanel：
Ext.grid.ColumnModel列配置属性说明
配置选项名
类型
作用
header
String
列头文字说明
dataIndex
记录结构中的name属性值
width
Number列的宽度
sortable
Boolean是否排序
fixed
Boolean是否固定宽度
resizable
Boolean
是否能改变列的宽度
menuDisabled
Boolean
单击类头后是否出现菜单
tooltip
悬停提示
renderer
Function
自定义单元格内容
align
列的对齐方式，有left、center和right
一共就是六个参数
function（value,cellmeta,record,rowIndex,columnIndex,store）{
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id，id是列号，css是这个单元格的css样式。
3.record是这行的所有数据，你想要什么，record.data["
id"
]这样就获得了。
4.rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。
5.columnIndex列号。
6.store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了
//自动生成查询窗口有用
store.recordType--------record
store.recordType.prototype.fields.length--------record的字段数
store.recordType.getField（0）----------record的字段
for（vari=0;
i<
User.prototype.fields.length;
i++）
alert（User.getField（i）.name+'
'
+User.getField（i）.mapping+'
+User.getField（i）.type）;
//添加、删除、修改时有用
store.getModifiedRecords（）--返回有修改的Record集合
store.getModifiedRecords（）.length
store.getModifiedRecords（）[0].getChanges（）
{...}
sex:
1女"
store.getModifiedRecords（）[0].modified
store.data.items[0].dirty//记录集是否修改过
true
store.data.items[0].commit（）;
//将Record的原始版本修改为当前版本
mitChanges（）;
//将Store中所有的Record的原始版本修改为当前版本
//发下来的原始数据的的行数
store.totalLength
2
store.getCount（）//store中实际有的数量
3
//语法和DataReader的meta数据
store.reader.meta
id:
totalRecords:
totalCount"
root:
row"
store.reader.meta.id
store.re
升级会员 