Server
ExtDirectSpring支持不同种类从DirectStore读请求。支持过滤,排序和/或分页,而且并不需要一个请求具有所有这些功能要求。
处理来自DirectStore一个简单的读请求的方法看起来像这样
@ExtDirectMethod(ExtDirectMethodType.STORE_READ) public List<Person> loadAllPersons() { ... }
通过注释@ExtDirectMethod(ExtDirectMethodType.STORE_READ)注解方法是一个最简单的读方法,可以返回一个集合或任意对象(包括null)。
方法如果支持过滤,排序,和\或分页,方法需要额外的参数ExtDirectStoreReadRequest,它包含了所有必须的信息,参数名称可以是任意名称。
@ExtDirectMethod(ExtDirectMethodType.STORE_READ) public List<Person> loadAllPersons(ExtDirectStoreReadRequest request) { ... }
如果客户端需要支持分页的方法,服务器端需要返回类ExtDirectStoreResult的一个实例。这个类封装返回的集和和可用的总行数。
@ExtDirectMethod(ExtDirectMethodType.STORE_READ) public ExtDirectStoreResult<Person> loadAllPersons(ExtDirectStoreReadRequest request) { ... return new ExtDirectStoreResult<Person>(totalSize, persons); }
ExtDirectStoreReadRequest包含如下参数
query String 这个属性当combo box的queryMode是‘remote‘时用。当用户在combo box输入内容后,会向服务器端发送请求,这个属性就包含用户输入的内容。
limit Integer 分页请求中每次请求服务器端返回记录条数。
start Integer 分页请求中代表记录起始位置。服务器端返回记录条数一般从start开始,到start+limit-1。
page Integer 分页请求中代表请求的页号。Extjs3.0只有limit,start两个参数。Extjs4.0增加了page参数。
sort String 排序的字段列表
dir String 排序的方向,“ASC”代表升序,“DESC”代表降序
groupBy String 分组字段列表
groupDir String 分组字段排序的方向,“ASC”代表升序,“DESC”代表降序
sorters List SortInfo Extjs4.x支持对表格多余一个字段的排序。这个集合包含了所有的排序信息
groups List GroupInfo Extjs4.x支持对表格多余一个字段的分组。这个集合包含了所有的分组信息
filters List List Filter 表格过滤列表
params Map 包含了客户端参数extraParams中的所有参数。
这些属性如果没有赋值,值为null,集合类属性没有赋值为空List。
创建ExtDirectStoreResult的实例可以用下面三个任意一个构造函数。
//如果没有分页用此构造函数 return new ExtDirectStoreResult(aCollection); //如果客户端分页,需要知道总的记录条数,参数totalNoOfRows代表总的记录条数 return new ExtDirectStoreResult(totalNoOfRows, aCollection); //如果success标志需要设置为false用第三个构造函数,前两个构造函数success设置为true return new ExtDirectStoreResult(totalNoOfRows, aCollection, false);
Grid Filters
ExtDirectStoreReadRequest属性filters是一个过滤列表. 有5个类实现了Filter接口。
BooleanFilter
DateFilter
ListFilter
NumericFilter
StringFilter
field属性代表过滤的字段名称。value属性代表要过滤属性的字段值. DateFilter和NumericFilter包含一个附加属性(comparison)代表大于,等于或小于要过滤值。
Client Ext JS 3.x
没有分页的DirectStore例子如下:
var simpleStore = new Ext.data.DirectStore( { paramsAsHash: true, root: ‘records‘, directFn: personAction.loadAllPersons, fields: [‘id‘, ‘firstName‘, ‘lastName‘] });
属性paramsAsHash值为true。 root属性值 ‘records‘. directFn要读取数据的服务器方法。 fields必须跟服务器Java bean属性一致。
另一个有用的属性是autoLoad。 DirectStore在DirectStore创建后自动从服务器加载数据。 如果想手动加载数据需要把autoLoad设置为false,调用simpleStore.load()方法。
不要设置restful属性为true。ExtDirect不支持restful特性。
一个有分页的store
var directStoreWithPaging = new Ext.data.DirectStore( { id: ‘myStore‘, paramsAsHash: true, root: ‘records‘, totalProperty: ‘total‘, remoteSort: true, directFn: personAction.loadAllPersons, fields: [‘id‘, ‘firstName‘, ‘lastName‘] });
totalProperty属性代表服务器返回对象中代表记录总条数的属性。 如果在服务器端排序属性remoteSort需要设置为true (默认false)。
如果你想初始加载数据到分页表格不要设置DirectStore属性autoLoad为true,如果autoLoad为true,store创建后会立即加载所有数据。不设置此属性值,或设置为false并且手动
调用load方法用有效的start和limit参数。只是在第一次调用时需要注意autoLoad属性,以后调用就不需要了。
Client Ext JS 4.x and Sencha Touch 2.x
创建DirectStore的例子如下,配置通常包括一个Model和一个Store对象。可以省略Model对象,在Store对象中设置所有属性。
Ext.define(‘MyModel‘, { extend: ‘Ext.data.Model‘, fields: [ ‘id‘, ‘firstName‘, ‘lastName‘ ] }); var store = Ext.create(‘Ext.data.Store‘, { model: ‘MyModel‘, proxy: { type: ‘direct‘, directFn: personAction.loadAllPersons } }); //OR move the proxy definition into the Model Ext.define(‘MyModel‘, { extend: ‘Ext.data.Model‘, fields: [ ‘id‘, ‘firstName‘, ‘lastName‘ ], proxy : { type: ‘direct‘, directFn: personAction.loadAllPersons } }); var store = Ext.create(‘Ext.data.Store‘, { model: ‘MyModel‘ }); //OR all in one Store config var store = Ext.create(‘Ext.data.Store‘, { model: ‘MyModel‘, fields: [ ‘id‘, ‘firstName‘, ‘lastName‘ ], proxy: { type: ‘direct‘, directFn: personAction.loadAllPersons } });
我建议把proxy放到model对象,这样就可以独立于store调用save()和destroy()方法.
Store对象支持自动加载和远程排序。下面的配置将会在创建后自动加载数据,在服务器根据字段lastName和firstName排序。
var store = Ext.create(‘Ext.data.Store‘, { model: ‘MyModel‘, autoLoad: true, remoteSort: true, sorters: [ { property: ‘lastName‘, direction: ‘ASC‘ }, { property: ‘firstName‘, direction: ‘DESC‘ } ] });
注意:上面例子虽然没有设置分页,但会发送分页信息。默认值为page=1, start=0和limit=25。ExtDirectStoreReadRequest包含这些值,如果服务器方法不支持分页可以忽略这些
值。
默认每页显示记录条数25可以被pageSize值覆盖。下面例子设置为50。
var store = Ext.create(‘Ext.data.Store‘, { model: ‘MyModel‘, pageSize: 50, remoteSort: true, autoLoad: true });
为了支持分页ExtDirectSpring 强制指定proxy reader的root属性值为reader: { root: ‘records‘},服务器方法必须返回ExtDirectStoreResult实例。
Ext.define(‘MyModel‘, { extend: ‘Ext.data.Model‘, fields: [ ‘id‘, ‘firstName‘, ‘lastName‘ ], proxy : { type: ‘direct‘, directFn: personAction.loadAllPersons, reader: { root: ‘records‘ } } });
可以一直设置reader: { root: ‘records‘},虽然服务器方法返回一个简单的集合并不是ExtDirectStoreResult。Extjs可以处理两种返回。这样一个model可以同时被用于一个分页
和不分页的grid。
无限滚动是在Extjs 4.x版本一个新功能,ExtDirectSpring也是支持的。仅仅需要配置store属性buffered:true即可。
var store = Ext.create(‘Ext.data.Store‘, { pageSize: 200, autoLoad: true, model: ‘MyModel‘, remoteSort: true, buffered: true })
因为无限滚动分页加载服务器数据,所以服务器端数据需要支持分页返回ExtDirectStoreResult对象。proxy reader的root属性必须是‘records‘。
Examples
http://demo.rasc.ch/eds/extjs3/grid.html
http://demo.rasc.ch/eds/extjs3/combobox.html
http://demo.rasc.ch/eds/extjs3/rowexpander.html
http://demo.rasc.ch/eds/extjs3/pie.html
http://demo.rasc.ch/eds/extjs3/gridfilter.html
http://demo.rasc.ch/eds/extjs42/gridfilter.html
http://demo.rasc.ch/eds/extjs42/infinite.html
http://demo.rasc.ch/eds/extjs42/combobox.html
http://demo.rasc.ch/eds/extjs42/rowedit.html
http://demo.rasc.ch/eds/extjs42/roweditpaging.html
http://demo.rasc.ch/eds/extjs42/grouping.html
http://demo.rasc.ch/eds/extjs42/area.html
http://demo.rasc.ch/eds/extjs42/grid.html
http://demo.rasc.ch/eds/extjs41/gridfilter.html
http://demo.rasc.ch/eds/extjs41/infinite.html
http://demo.rasc.ch/eds/extjs41/combobox.html
http://demo.rasc.ch/eds/extjs41/rowedit.html
http://demo.rasc.ch/eds/extjs41/roweditpaging.html
http://demo.rasc.ch/eds/extjs41/grouping.html
http://demo.rasc.ch/eds/extjs41/area.html
http://demo.rasc.ch/eds/extjs41/grid.html