Extjs 4 学习日志
2011-09-02 10:31
302 查看
一。开始研究EXTJS4,实现要测试STORE和服务器连接问题。
1.如何解决STORE/MODEL/PROXY等的关系
EXTJS3的时候,所有的设置都走STORE,并且提供了JSONSTORE,EXTJS4并不提供这个功能。需要自己写。
EXTJS4引入了MODEL控件,各组件的功能发生了变化,
STORE只负责解决数据集的操作,客户层的业务逻辑交给MODEL,而PROXY负责读和写,PROXY可以在STORE中定义也可以在MODEL中定义。
比如:
Ext.define('xt_czrz',{
extend:'Ext.data.Model'
,
idProperty:'CZRZID',
//这里定义PROXY
proxy:{
type:'ajax',
//actionMethods:{read:'POST'},
api:{
read:_path+'/xt_czrz_query.action?act=query',
create:_path+'/xt_czrz_query.action?act=insert',
update:_path+'/xt_czrz_query.action?act=update',
destroy:_path+'/xt_czrz_query.action?act=delete'
},
reader:{
//actionMethods:{read:'POST'},
type:'json',
root:'root',//这个ROOT的设置还是需要的,可能是EXTJS的BUG,用METADATA设置的ROOT,对修改没有用处
totalProperty:'totalProperty',
successProperty:'success'
},
writer:{
encode:true,
root:'root'
}
},
fields:[
{name:'CZRZID',type:'int',mapping:'CZRZID'},
{name:'BM',type:'string'},
{name:'YWZJ',type:'int'},
{name:'CSLX',type:'string'},
{name:'CZRID',type:'int'//},
//{name:'a',
//convert:function(value,record){
//return121;
//}
}
]
});
varmyStore=newExt.data.Store({
model:'xt_czrz'
//也可以在这里定义
//proxy:{
//type:'ajax',
////actionMethods:{read:'POST'},
//api:{
//read:_path+'/xt_czrz_query.action?act=query',
//create:_path+'/xt_czrz_query.action?act=insert',
//update:_path+'/xt_czrz_query.action?act=update',
//destroy:_path+'/xt_czrz_query.action?act=delete'
//},
//reader:{
////actionMethods:{read:'POST'},
//type:'json',
//root:'root',//这个ROOT的设置还是需要的,可能是EXTJS的BUG,用METADATA设置的ROOT,对修改没有用处
//totalProperty:'totalProperty',
//successProperty:'success'
//},
//writer:{
//encode:true,
//root:'root'
//
//}
//}
});
----------------------------------------------------------------------------------------2.如何解决POST/GET的问题
EXTJS3的时候用JSONSTORE,默认和客户段的交互采用POST方式,而EXTJS4默认用GET.研究后发现,EXTJS4的RPOXY的READ和WRITE提供了actionMethods属性。
actionMethods可以配置
MappingofactionnametoHTTPrequestmethod.InthebasicAjaxProxythesearesetto'GET'for'read'actionsand'POST'for'create','update'and'destroy'actions.TheExt.data.proxy.RestmapsthesetothecorrectRESTfulmethods.
也就是说EXTJS4默认read用GET,其他用POST。
-----------------------------------------------------------------------------------
3.如何解决FIELDS
EXTJS3的时候FIELD信息在STORE中定义,使用METADATA在返回结果集的时候带FIELD和ID信息,就可以装载到STORE中,并且正常使用。
EXTJS4不支持METADATA属性,FIELD可以在MODEL中定义,也可以在STORE中定义。
如果在STORE中定义了FIELDS,则STORE可以不定义MODEL。
查看AbstractStore,发现:
varfields=myStore.model.prototype.fields;
varm=myStore.getAt(0).fields;
--------------------------------------------------
vared=Ext.ModelManager.create({BM:'a'},'xt_czrz');
myStore.insert(0,ed);
myStore.sync();
idProperty:'CZRZID',
2.和服务器交互的时候,Content-Type默认采用
proxy:{
type:'ajax',
writer:{
encode:true,
root:'root'
}
1.如何解决STORE/MODEL/PROXY等的关系
EXTJS3的时候,所有的设置都走STORE,并且提供了JSONSTORE,EXTJS4并不提供这个功能。需要自己写。
EXTJS4引入了MODEL控件,各组件的功能发生了变化,
STORE只负责解决数据集的操作,客户层的业务逻辑交给MODEL,而PROXY负责读和写,PROXY可以在STORE中定义也可以在MODEL中定义。
比如:
Ext.define('xt_czrz',{
extend:'Ext.data.Model'
,
idProperty:'CZRZID',
//这里定义PROXY
proxy:{
type:'ajax',
//actionMethods:{read:'POST'},
api:{
read:_path+'/xt_czrz_query.action?act=query',
create:_path+'/xt_czrz_query.action?act=insert',
update:_path+'/xt_czrz_query.action?act=update',
destroy:_path+'/xt_czrz_query.action?act=delete'
},
reader:{
//actionMethods:{read:'POST'},
type:'json',
root:'root',//这个ROOT的设置还是需要的,可能是EXTJS的BUG,用METADATA设置的ROOT,对修改没有用处
totalProperty:'totalProperty',
successProperty:'success'
},
writer:{
encode:true,
root:'root'
}
},
fields:[
{name:'CZRZID',type:'int',mapping:'CZRZID'},
{name:'BM',type:'string'},
{name:'YWZJ',type:'int'},
{name:'CSLX',type:'string'},
{name:'CZRID',type:'int'//},
//{name:'a',
//convert:function(value,record){
//return121;
//}
}
]
});
varmyStore=newExt.data.Store({
model:'xt_czrz'
//也可以在这里定义
//proxy:{
//type:'ajax',
////actionMethods:{read:'POST'},
//api:{
//read:_path+'/xt_czrz_query.action?act=query',
//create:_path+'/xt_czrz_query.action?act=insert',
//update:_path+'/xt_czrz_query.action?act=update',
//destroy:_path+'/xt_czrz_query.action?act=delete'
//},
//reader:{
////actionMethods:{read:'POST'},
//type:'json',
//root:'root',//这个ROOT的设置还是需要的,可能是EXTJS的BUG,用METADATA设置的ROOT,对修改没有用处
//totalProperty:'totalProperty',
//successProperty:'success'
//},
//writer:{
//encode:true,
//root:'root'
//
//}
//}
});
----------------------------------------------------------------------------------------2.如何解决POST/GET的问题
EXTJS3的时候用JSONSTORE,默认和客户段的交互采用POST方式,而EXTJS4默认用GET.研究后发现,EXTJS4的RPOXY的READ和WRITE提供了actionMethods属性。
actionMethods可以配置
MappingofactionnametoHTTPrequestmethod.InthebasicAjaxProxythesearesetto'GET'for'read'actionsand'POST'for'create','update'and'destroy'actions.The
也就是说EXTJS4默认read用GET,其他用POST。
-----------------------------------------------------------------------------------
3.如何解决FIELDS
EXTJS3的时候FIELD信息在STORE中定义,使用METADATA在返回结果集的时候带FIELD和ID信息,就可以装载到STORE中,并且正常使用。
EXTJS4不支持METADATA属性,FIELD可以在MODEL中定义,也可以在STORE中定义。
如果在STORE中定义了FIELDS,则STORE可以不定义MODEL。
查看AbstractStore,发现:
if(!me.model&&me.fields){ me.model=Ext.define('Ext.data.Store.ImplicitModel-'+(me.storeId||Ext.id()),{ extend:'Ext.data.Model', fields:me.fields, proxy:me.proxy||me.defaultProxyType }); deleteme.fields; me.implicitModel=true; } 也就是说,如果STORE中只定义FIELDS而不定义MODEL,其实STORE会自动创建一个MODEL,所以正常情况下还是定义MODEL比较好。
在不支持METADATA后,只能定义MODEL(不知道还有没有更好的解决办法)
还有一个很奇怪的问题,如果在MODEL中定义了FIELDS,在返回结果集中也返回METADATA里面增加FIELDS信息,则STORE中增加的DATA也会用METADATA中的FIELDS定义,而不会采用
MODEL中的定义。目前没找到原因。
通过STORE获取FIELDS:
varfields=myStore.model.prototype.fields;
varm=myStore.getAt(0).fields;
--------------------------------------------------
4.关于查询的参数传递
EXTJS3提供了很baseParams属性定义查询条件,传递到服务器进行解析。这个方法感觉不是很灵活,但是也够用。
EXTJS4的STORE不处理交互相关的问题。所以查询条件的定义只能到proxy层来解决。
server.proxy提供了好多params来解决和服务器交互传递参数问题,比如:
directionParam, extraParams, filterParam, groupParam, limitParam, sortParam, pageParam, startParam等
如何使用这些参数,需要花时间研究。
4.1directionParam
如果simpleSortMode设置为TRUE,然后STORE的remoteSort设置为TRUE,那么在GRID点TITLE的时候,会再发一个QUERY的请求,其中参数会带上SORT相关内容
递交内容:
其中sortParam用于设置参数名,默认是’sort’
4.2filterParam, groupParam, limitParam, sortParam, pageParam, startParam都与sortParam类似,用于指定参数名而已。
4.3extraParams
extraParams是一个OBJECT,可以和以前的baseParams使用。
--------------------------------------------------
5.关于保存
vared=Ext.ModelManager.create({BM:'a'},'xt_czrz');
myStore.insert(0,ed);
myStore.sync();
保存的方法改成了sync;
另:
1.MODEL必须指定idProperty,否则所有从服务器读取过来的数据都被当作CREATE而传递到服务器。
idProperty:'CZRZID',
2.和服务器交互的时候,Content-Type默认采用
application/json方式递交,这个STRUTS如何接收不是很清楚,所以需要修改。
proxy增加writer,设置writer的encode和root属性
proxy:{
type:'ajax',
writer:{
encode:true,
root:'root'
}
相关文章推荐
- EXTJS4 学习日志2
- extjs4学习日志(2)数据模型中的model
- EXTJS4学习日志3(小结)
- ExtJS学习笔记
- Linux系统日志学习总结
- Java日志框架源码学习笔记(二)
- extjs学习----官方模版注释1
- Git命令学习之旅——日志和穿梭版本号
- 《R语言实战》读书笔记--学习张丹日志
- cocos2d-x学习日志 --新手向导
- Head First C学习日志 第七章 高级函数 创建函数指针
- openfire+spark+jwchat+服务器日志输出 环境搭建(学习笔记)
- 学习extjs的布局
- python 的日志logging模块学习
- 学习日志(2004.11)
- 自定义控件的学习日志(Pro.NET2.0 Windows Forms and Custom Controls)
- hadoop学习笔记之mapreduce 基于hbase日志数据的最频繁访问ip统计
- 我的MYSQL学习心得(十五) 日志
- JAVA学习日志(9-1-内部类)
- 【学习日志】keytool的使用