Posts Tagged ‘extjs’

Setting up ContentNegotioationViewResolver for using json with spring roo.

I want to make a controller, that supports crud via json. I will use it against an extjs4 data store.
The controllers that spring roo generates, can not be used for this, so I will make a rest controller by hand.

First I will use ContentNegotioationViewResolver to resolve the view, based on extensions. Resolving based on accept-header is more risky since there is not a consistent behavior among the different browsers.

This is the setup:

    <bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
        <property name="mediaTypes">
                <entry key="json" value="application/json"/>
        <property name="viewResolvers">
                <bean class="org.springframework.web.servlet.view.BeanNameViewResolver"/>
                <bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" id="tilesViewResolver">
                    <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/>
        <property name="defaultViews">
                <bean class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" />
        <!--<property name="ignoreAcceptHeader" value="true" />-->

Make sure MappingJackson is in the class path. And ignoreAcceptHeader should not be set to true if you still want the roo-generated web pages to work – they use accept-header.

Now we are ready to make the json rest controller.


Cross field model validation in extjs4

I dont see an easy way to make validations where one field depends on another. I think they must have forgotten to support it. What is missing is the model instance passed to the validation method. Now it looks like this:
    function(config, value)
and we would like it to look like this
    function(config, value, model)
, then we would have access to all fields.

But we just need to override and pass the model instance to the validation function as an extra parameter:

valid = validators[type](validation, this.get(field), this);

Ext.override(, {
    validate: function() {
        var errors = Ext.create(''),
                validations = this.validations,
                validators =,
                length, validation, field, valid, type, i;

        if (validations) {
            length = validations.length;

            for (i = 0; i < length; i++) {
                validation = validations[i];
                field = validation.field ||;
                type = validation.type;
                valid = validators[type](validation, this.get(field), this);

                if (!valid) {
                        field  : field,
                        message: validation.message || validators[type + 'Message']

        return errors;

Now we have access to the model instance: = function(config, value, model) {
    var someValue = model.get('someField')

Making custom model validations in extjs4.

Adding a custom validation to the is quite simple.

The are a few validations already, but not one that validates, that a number value lies within a minimum and maximum. I will call the new validation for range is a singleton and the new range validation is installed by adding an error message and a validation function: = 'Value must be between {0} and {1}' ; = function(config, value) {
   if (value === undefined) {
      return false;
   var min = config.min,
   max = config.max;
   if ((value < min) || (value > max)) {
      config.message = Ext.String.format(this.rangeMessage, min, max);
      return false;
   } else {
      return true;

The validation is configured like this in the validations of the model:

   field: 'price',
   type: 'range',
   min: 5,
   max: 100

This is also the config parameter of the validation function and the value parameter is the value of the field. So we have a pricfield where the number has to be between 5 and 100.

This range validation is a bit more complicated than the other validations, because it has an error message with parameters and it is calculated in the validation function. The calculated message is stored in config.message. When the model is validated the model.validate() method first checks for a config.message, then for