您的位置:首页 > Web前端 > JavaScript

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,发现:

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'
}

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: