config

Ext JS 4: Two Ways to Configure Selection Model in Grid

There are two ways to configure the selection model on the grid. The two configuration options are selModel and selType. Below is an example of using both. Note, the configurations that I put in are just for demonstrations purposes, not necessarily recommended.

Example 1 – selType
This only uses configuration to set up the selection model. If using all the default configs for the selection model, the configuration options in selModel are not needed.

{
	xtype: 'grid',
	title: 'My Grid',
	store: myStore //configured elsewhere
	selType: 'checkboxmodel',
	selModel: {
		checkOnly: true,
		injectCheckbox: 1
	}
	columns: [
		// configure columns here
	]
}

Example 2 – selModel
This creates the selection model and only uses selModel.

{
	xtype: 'grid',
	title: 'My Grid',
	store: myStore //configured elsewhere
	selModel: Ext.create('Ext.selection.CheckboxModel, {
		checkOnly: true,
		injectCheckbox: 1
	}),
	columns: [
		// configure columns here
	]
}

Versions: Ext JS 4.1.1

Ext JS 4: ComboBox and the Backspace Key

I have an Ext JS 4 ComboBox with the following config:

{
	xtype: 'combo',
	fieldLabel: 'My Combo',
	emptyText: 'Select one...',
	queryMode: 'local',
	editable: false,
	lastQuery: '',
	allowBlank: false,
	forceSelection: true,
	validateOnChange: false,
	validateOnBlur: false,
	enforceMaxLength: false,
}

The important config here is “editable: false”. It turns out that if this config is set and the combobox has focus and the backspace button is pressed, the browser (IE and Chrome) will handle this event, which happens to go back one in the browser history. Not really the user experience I was looking for.

Funny how even though I’d been through my form thousands of times, I never hit the backspace key on this field. All it took was one user…

To fix it, I add the following settings to the combobox configuration:

	enableKeyEvents: true,
	listeners: {
		keydown: function(obj, e) {
			if (e.getCharCode() == e.BACKSPACE) {
				e.preventDefault();
			}
		}
	}

This prevents the backspace key event from bubbling up to the browser.

This post discusses a different aspect of comboboxes, but it help me get to the “aha – enableKeyEvents” moment. Sencha ExtJS: Allow users to find without searching in a ComboBox

Adding an Interceptor to Spring 3 Controller

Very simple case, I want to log some information for requests made into a specific controller.

I created an interceptor class like this

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

public class MyInterceptor extends HandlerInterceptorAdapter {

	@Override
	public boolean preHandle(HttpServletRequest request,
			HttpServletResponse response, Object handler) throws Exception {
		//my code here
		return super.preHandle(request, response, handler);
	}
}

And then I configured it in my Spring config file

	<!-- Configures Handler Interceptors -->	
	<mvc:interceptors>
		<!-- Changes the locale when a 'locale' request parameter is sent; e.g. /?locale=de -->
		<bean class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor" />
		<mvc:interceptor>
			<mvc:mapping path="/*" />
			<bean class="xxx.xxx.MyInterceptor" />
		</mvc:interceptor>
	</mvc:interceptors>

This caught all the entry points into my application which was what I needed.

Using Application Properties with Spring 3

I’m new to Spring and it can be a lot to take in. I was confused by properties and Spring. Not Spring configuration properties, but properties that are used in the application. I just wanted global access to my application properties. I might run into issues further down, like if I want to dynamically update properties, but so far, this is what I have.

1. In my app-config.xml Spring config file:

    
    <bean id="appProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean">
        <property name="location" value="classpath:application.properties" />
    </bean>

2. In the components that I wanted to use properties (some are annotated with @Service and others with @Component) I used the @Value notation. In addition, there were a few where I wanted to set a default in case the property was missing. In this situation the property is really there just in case something needs to be changed w/o redeploying.

@Component
public class RestClient {
	@Value("#{appProperties['property.webservice.rest.timeout.seconds']}")
	private Integer timeout = 360;
	
	@Value("#{appProperties['property.webservice.rest.filecontenttype']}")
	private String fileContentType = HTTP.DEFAULT_CONTENT_TYPE;

	public void doSomething() {
		//...
	}
}

The above worked to read in the property and the assignment was used if the property is missing.