View Full Version : extjs4 dataview tpl checkbox events in mvc workflow

2 Apr 2012, 3:42 PM
getting my head around Extjs.

In a mvc environment I can set up a listener on controller for the Ext check box for a change event and that works.

However I have a dataview with a tpl which contains checkboxes, the listener on the controller does not fire. How do I set up to listen for form element events from a tpl in the controller.

Second related question. Obviously tpl (html) checkboxes look different to the Ext check boxes. Is there anyway to use a Ext checkbox in a tpl.

I tried (apply data shortened for post) but just outputs [object object]

prepareData: function(data) {
var incLinkChkBx = Ext.create('Ext.form.field.Checkbox',{ name: 'test',
fieldLabel: 'test',

Ext.apply(data, {
INC_LINK_CB: incLinkChkBx,
return data;

tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="FileID{FILE_ID}">',
'<span class="thumb-file-name" title="{FILE_NAME}">{SHORTNAME}</span>',
'<div class="thumb"><img src="{SP_URL}" title="{FILE_NAME}" width="{IMAGE_SIZE}" height="{IMAGE_SIZE}"></div>',
'<div class="bskcheckbox">{INC_LINK_CB}</div></div>',
'<div class="x-clear"></div>'

Thanks in advance

3 Apr 2012, 8:12 AM
An HTML checkbox will not work like an Ext JS checkbox as the HTML checkbox is not a component. In your dataview you can add a click listener using delegate to target your checkbox. You can then fire an event on the dataview so that your controller can listen for that event.

3 Apr 2012, 8:13 AM
Moved to Ext JS 4 Q&A forum.

3 Apr 2012, 8:48 AM
In the controller;

onLaunch function, I call the store load passing in a call back function.

/** * call when the control is launched
onLaunch: function() {
//get the basket store
var bskStore = Ext.getStore('myStore');
//load the store and set a call back for once loaded
callback: this.bsksetup,
scope: this

When the store as loaded and the call back function is called.

* called on store load of the basket view
* we can now run through the dataview and set up intial display
bsksetup: function(objBsk) {
//get all the indvidual link check boxes
var obj = Ext.select('input[name=incindlink]').elements;
for (var i=0; i < obj.length; i++) {
//loop through and see if checked by default
if (!obj[i].checked) {
//its not checked to apply clas to radio div to hide
var objDiv = Ext.getDom('ioi-radiodiv-' + obj[i].value);
//now grb the dom element of the dataview
var objDataView = Ext.get('images-view');
//add event click for the entire dataview
objDataView.on (

First I run through all the data view object and set a div to hide or show via css. (The user can set up a default to have the checkbox we care about checked or unchecked on load, so we have to dynamically hide or show the div).

Then I set a listener on the data view, so any click within that view will fire and call the function updateIndLinkDiv

* Function that looks at the basket data view clcik events
* if the event is a checkbox called incindlink show or hide the
* radio buttons
updateIndLinkDiv: function(evt,t) {
var objCkBox = evt.getTarget();//get the target object
//chk if the obj is a checkbox and the type we are looking for
if ( objCkBox.type == 'checkbox' && objCkBox.name == 'incindlink' ) {
//now get the div wrapping the radio buttons
var objDiv = Ext.getDom('ioi-radiodiv-' + objCkBox.value);
if (objCkBox.checked) { // test if checked
//remove the class so the div shows
} else {
//add the class so the div hides

This function checks to see if the event target is a checkbox and a checkbox we care about.
The checkbox value as a unique id (from database) we now get the div of the unique id and either display or hide the div using a css class.

With this i was able to keep the MVC framework and do all the work in the controller.

Posted in case anyone else finds it helpful