Server
Form load方法的职责是填充值到form表单。一个form load方法用@ExtDirectMethod(ExtDirectMethodType.FORM_LOAD)注解,返回一个属性名称跟form表单字段属性名一致的对象。
@ExtDirectMethod(ExtDirectMethodType.FORM_LOAD)
public BasicInfo getBasicInfo(@RequestParam(value = "uid") long userId) {
BasicInfo basicInfo = new BasicInfo();
...
return basicInfo;
}
函数参数必须用@RequestParam注明,如果代码编译时没有带调试信息或参数名称跟请求参数名不一致。value属性必须跟请求参数名一致。支持defaultValue和注解@RequestParam的required属性,工作方式跟Spirng MVC一致。 支持服务器端对象参数。
Client
BasicForm的配置paramsAsHash的属性值一定要设置为true。form属性名称跟服务器端Java Bean的属性值一致。load方法可以通过配置api的load属性设定。在baseParams设定参数会在发送请求到服务器时同时发送。
//Ext JS 3.x
var basicInfo = new Ext.form.FormPanel( {
//Ext JS 4.x
var basicInfo = Ext.create('Ext.form.Panel', {
paramsAsHash: true,
...
defaultType: 'textfield',
items: [ {
fieldLabel: 'Name',
name: 'name'
}, {
fieldLabel: 'Email',
name: 'email'
}, {
fieldLabel: 'Company',
name: 'company'
} ],
baseParams: {
uid: 5,
},
api: {
load: profile.getBasicInfo,
submit: profile.updateBasicInfo
}
});
可以手动调用load方法附带其它的参数。参数名称跟baseParams中名称一致时会被覆盖。
basicInfo.getForm().load({
params: {
uid: 3
}
});
Examples
http://demo.rasc.ch/eds/extjs3/form.html
http://demo.rasc.ch/eds/extjs42/form.html
http://demo.rasc.ch/eds/extjs41/form.html
Form Post Method
1.2.1处理FORM_POST的方式跟其它类型的方法一致。仍然支持FORM_POST方法1.1.x版本中的格式。
FORM_POST方法处理Ext.form.Panel的提交。FORM_POST方法用@ExtDirectMethod(ExtDirectMethodType.FORM_POST)注解并且返回一个ExtDirectFormPostResult实例。
@Service
public class Profile {
@ExtDirectMethod(ExtDirectMethodType.FORM_POST)
public ExtDirectFormPostResult updateBasicInfo(@Valid BasicInfo basicInfo, BindingResult result) {
if (!result.hasErrors()) {
if (basicInfo.getEmail().equals("aaron@extjs.com")) {
result.rejectValue("email", null, "email already taken");
}
}
return new ExtDirectFormPostResult(result);
}
}
方法支持一个正常Spring MVC方法支持的所有参数。 http://static.springsource.org/spring/docs/3.2.x/spring-framework-reference/html/mvc.html#mvc-ann-requestmapping-arguments
也支持同样的验证方式 http://static.springsource.org/spring/docs/3.2.x/spring-framework-reference/html/validation.html#validation-mvc
Client
配置form post请求需要在BasicForm的api配置submit属性。
//Ext JS 3.x
var basicInfo = new Ext.form.FormPanel( {
//Ext JS 4.x
var basicInfo = Ext.create('Ext.form.Panel', {
...
api: {
...
submit: profile.updateBasicInfo
}
});
在submit方法可以添加其它参数。
basicInfo.getForm().submit( {
params: {
foo: 'bar',
uid: 34
}
});
Examples
http://demo.rasc.ch/eds/extjs3/form.html
http://demo.rasc.ch/eds/extjs42/form.html
http://demo.rasc.ch/eds/extjs41/form.html
Form Post With Upload
从1.2.1版本后类库处理FORM_POST方式跟其它方法一样。类库支持还1.1.x写法。
FORM_POST方法处理Ext.form.Panel submit方法提交。方法需要用@ExtDirectMethod(ExtDirectMethodType.FORM_POST)注释并且返回ExtDirectFormPostResult实例。如果方法需要处理文件上传,确保在Spring context配置了multipartResolver,类库commons-fileupload和commons-io在classpath路径如果需要的话。
FORM_POST方法处理正常文件上传需要有一个多个类型MultipartFile参数用来访问上传文件。
@Service
public class UploadService {
@ExtDirectMethod(ExtDirectMethodType.FORM_POST)
public ExtDirectFormPostResult uploadTest(@RequestParam("fileUpload") MultipartFile file) throws IOException {
ExtDirectFormPostResult resp = new ExtDirectFormPostResult(true);
if (file != null && !file.isEmpty()) {
resp.addResultProperty("fileContents", new String(file.getBytes(), StandardCharsets.ISO_8859_1));
}
return resp;
}
正如上面提到的上传功能需要一个MultipartResolver Bean存在于Spring上下文。下面的例子显示了一个通过Spring Java config配置MultipartResolver Bean定义,使用commons-fileupload类库上传文件的例子。
@Bean
public MultipartResolver multipartResolver() {
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
commonsMultipartResolver.setMaxUploadSize(52428800);
commonsMultipartResolver.setMaxInMemorySize(20480);
return commonsMultipartResolver;
}
更多信息参见spring官方文档:http://docs.spring.io/spring/docs/4.0.0.RELEASE/spring-framework-reference/htmlsingle/#mvc-multipart
Client Ext JS 3.x
FormPanel的fileUpload的属性必须设置为true,文件上传才能够成功。下面的例子用了Ext.ux.form.FileUploadField扩展。需要的JavaScript和CSS代码是Ext JS的发行版的一
部分,位于在examples / fileuploadfield文件夹。
方法的配置跟正常的FormPostMethod一样,在属性api配置submit属性。
var form = new Ext.FormPanel({
//...
fileUpload: true,
items: [{
xtype: 'fileuploadfield',
buttonOnly: false,
id: 'form-file',
fieldLabel: 'File',
name: 'fileUpload',
buttonCfg: {
text: '...'
},
//...
},
api: {
submit: uploadController.uploadTest
}
});
Client Ext JS 4.x
Extjs 4本身支持文件上传,不需要扩展。fileUpload属性必须设置为true,form panel需要配置一个xtype为filefield的field,这样用户就可以选择上传文件了。
var form = Ext.create('Ext.form.Panel', {
//...
fileUpload: true,
items: [ {
xtype: 'filefield',
buttonOnly: false,
fieldLabel: 'File',
name: 'fileUpload',
buttonText: 'Select a File...'
}],
api: {
submit: uploadController.uploadTest
}
});
Examples
http://demo.rasc.ch/eds/extjs3/upload.html
http://demo.rasc.ch/eds/extjs42/upload.html
http://demo.rasc.ch/eds/extjs41/upload.html
Form Post Exception Handling
如果FORM_POST方法按类库1.2.1样式写,这部分不需要看。
写1.1.x版本的风格FORM_POST方法由springframework的处理异常。这意味着ExtDirectSpring没有catch和管理异常,而是直接抛出了异常。对于其它类型的所有方法ExtDirectSpring捕捉异常,将它们转换成JSON消息,并将其发送到客户端。
让FORM_POST方法跟其它方法有相同行为,有必要配置一个HandlerExceptionResolver到应用程序。实现HandlerExceptionResolver接口函数需要添加代码
ExtDirectResponseBuilder.create(request, response).setException(ex).buildAndWrite()。
完整例子:
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerExceptionResolver;
import org.springframework.web.servlet.ModelAndView;
import ch.ralscha.extdirectspring.bean.ExtDirectResponseBuilder;
@Component
public class FormPostExceptionHandler implements HandlerExceptionResolver {
@Override
public ModelAndView resolveException(HttpServletRequest request, HttpServletResponse response,
final Object handler, Exception ex) {
ExtDirectResponseBuilder.create(request, response)
.setException(ex)
.buildAndWrite();
return null;
}
}
@JsonView
(1.3.6后版本支持)
支持Jackson's @JsonView功能
ExtDirectMethod注解包含一个jsonView的属性静态定义一个json view类。
动态定义view返回的类,extdirect方法可以返回一个ModelAndJsonView实例或设置返回ExtDirectFormLoadResult或ExtDirectStoreResult类对象jsonView属性。
@ExtDirectMethod(jsonView = Views.Summary.class)
public Employee getEmployee() {
Employee e = new Employee();
return e;
}
@ExtDirectMethod
public ModelAndJsonView getEmployee() {
Employee e = new Employee();
return new ModelAndJsonView(e, Views.Detail.class);
}
@ExtDirectMethod(value = ExtDirectMethodType.STORE_READ)
public ExtDirectStoreResult<Employee> employees() {
List<Employee> listOfEmployess = ....
ExtDirectStoreResult<Employee> result = new ExtDirectStoreResult<>(listOfEmployess);
result.setJsonView(Views.Summary.class);
return result;
}
在类ModelAndJsonView或返回类指定的jsonView会覆盖注解ExtDirectMethod指定的jsonView类。
除FORM_POST和SSE类型的方法外,其它方法都支持这个特性。