Ext JS 6 Modern Set Field Renderer in itemTpl

In Ext Js 6 Modern (or Sencha Touch), if Ext.grid.plugin.RowExpander plugin is enabled for Ext.grid.Grid, there will be a expander icon (plus icon) at left side of each row. Clicking the expander icon will expand the selected row, and more detail will be displayed. This detail page can be set by itemConfig.body.tpl option.

Like following code

Ext.define('Forestry.app.systemManage.UserManagement', {
			extend: 'Ext.grid.Grid',
			itemConfig: {
				body: {
					tpl: '<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles}<br/></div>'
				}
			},
                        ...
}

And the tpl option is actually XTemplate, so the above code can be written as following form as well:

var itemTpl = new Ext.XTemplate('<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles}<br/></div>');

Ext.define('Forestry.app.systemManage.UserManagement', {
			extend: 'Ext.grid.Grid',
			itemConfig: {
				body: {
					tpl: itemTpl
				}
			},
                        ...
}

Note that here XTemplate cannot be replaced by Template class (using Template will display raw literal value as {…})

To use a renderer function for field in the template string, we need add a member function to the template

function generateRoleNameByRoles(roles){
    return roles.join(',');
}
itemTpl.generateRoleNameByRoles = generateRoleNameByRoles;

Then the template can be changed like this

var itemTpl = new Ext.XTemplate('<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles:generateRoleNameByRoles}<br/></div>');

The post Ext JS 6 Modern Set Field Renderer in itemTpl appeared first on Redino blog.