ext direct spring Form Method and @JsonView

最新推荐文章于 2021-02-15 20:18:41 发布

HelloWorldDemo

最新推荐文章于 2021-02-15 20:18:41 发布

阅读量1.9k

点赞数

文章标签： extjs spring direct

Form Load Method

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版本中的格式。

Server
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类型的方法外，其它方法都支持这个特性。

HelloWorldDemo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext direct spring Form Method and @JsonView

Form Load MethodServerForm load方法的职责是填充值到form表单。一个form load方法用@ExtDirectMethod(ExtDirectMethodType.FORM_LOAD)注解，返回一个属性名称跟form表单字段属性名一致的对象。 @ExtDirectMethod(ExtDirectMethodType.FORM_LOAD) p
复制链接

扫一扫