Extjs 4 学习日志
一。开始研究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) {
// return 121;
// }
}
]
});
var myStore = new Ext.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可以配置
Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions and 'POST' for 'create', 'update' and 'destroy' actions. The Ext.data.proxy.Rest maps these to the correct RESTful methods.
也就是说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
});
delete me.fields;
me.implicitModel = true;
}
也就是说，如果STORE中只定义FIELDS而不定义MODEL，其实STORE会自动创建一个MODEL，所以正常情况下还是定义MODEL比较好。在不支持METADATA后，只能定义MODEL（不知道还有没有更好的解决办法）
还有一个很奇怪的问题，如果在MODEL中定义了FIELDS，在返回结果集中也返回METADATA里面增加FIELDS信息，则STORE中增加的DATA也会用METADATA中的FIELDS定义，而不会采用
MODEL中的定义。目前没找到原因。
通过STORE获取FIELDS：
var fields = myStore.model.prototype.fields;
var m = 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.关于保存
var ed = 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'
}
