ExtJs Template: Using Template Member Functions

Posted By Vitalii | March 11, 2013 | ExtJS 4.1.1
0 2947
​One or more member functions can be specified in a configuration object passed into the XTemplate constructor for more complex processing.

Js Code

tpl: ['<tpl for=".">',
        '<ul class="details">',
            '<li><b>Name:</b> {Name}</li>',
            '<li><b>Email:</b> {Email}</li>',
            '<tpl if="this.isDisabled(values)">',
                '<li class="warning"><b>Warning:</b> user is disabled</li>',
            '<tpl else>',
                '<li class="comment"><b>Comment:</b> active user</li>',
            '</tpl>',
        '</ul>',
      '</tpl>',
      {
          isDisabled: function (r) {
              return r.Disabled === true;
          }
      }],

            

ExtJs Template: Use For and If Statements

Posted By Vitalii | March 11, 2013 | ExtJS 4.1.1
0 3318
The tpl tag and the for operator are used to process the provided data array.
​The tpl tag and the if operator are used to provide conditional checks for deciding whether or not to render specific parts of the template.

Js Code

tpl: ['<tpl for=".">',
        '<ul class="details">',
           '<li><b>Name:</b> {Name}</li>',
           '<li><b>Email:</b> {Email}</li>',
           '<tpl if="Comment">',
               '<li><b>Comment:</b> {Comment}</li>',
           '</tpl>',
        '</ul>',
      '</tpl>'],

            

ExtJs 4 Panel With Simple Template

Posted By Vitalii | March 11, 2013 | ExtJS 4.1.1
0 3798
​Use "tpl" config property to setup panel's body template.
This option used in conjunction with the "data" and "tplWriteMode" configurations.

Js Code

Ext.widget({
    title: 'Simple Template',
    xtype: 'panel',
    width: 300,
    bodyPadding: 10,
    tpl: ['<ul class="details">',
              '<li><b>Name:</b> {Name}</li>',
              '<li><b>Email:</b> {Email}</li>',
          '</ul>'],
    data: {
        Name: 'User-1',
        Email: 'user-1@gmail.com'
    },
    tbar: [{
        text: 'Update Content',
        handler: function () {
            var panel = this.up('panel'),
                data = {
                    Name: 'New-User',
                    Email: 'new-user@gmail.com'
                };

            panel.update(data);
        }
    }],
    renderTo: 'output'
});
            

How To Change A Column Template On The Rendered Grid Column?

Posted By Vitalii | March 17, 2012 | ExtJS 4.0.7
0 3489
Reply to thread

Js Code

Ext.define('Ext.grid.column.UpdatableTemplate', {
	extend: 'Ext.grid.column.Column',
	alias: 'widget.updatabletemplatecolumn',
	requires: ['Ext.XTemplate'],
	constructor: function (cfg) {
		var me = this;
		me.callParent(arguments);
		me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl);
		me.renderer = function (value, p, record) {
			var data = Ext.apply({}, record.data, record.getAssociatedData());
			return me.tpl.apply(data);
		};
	},
	setTemplate: function (tpl) {
		this.tpl = Ext.create('Ext.XTemplate', tpl);
	}
});

Ext.create('Ext.grid.Panel', {
	title: 'Simpsons',
	width: 500,
	height: 200,
	store: {
		fields: ['name', 'email', 'phone'],
		data: [
			{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
			{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
			{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" },
			{ 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }
		]
	},
	tbar: [
		{
			text: 'First Template',
			handler: function () {
				this.up('grid').changeTemplate('name', '<b>{name}</b> ({email})');
			}
		},
		{
			text: 'Second Template',
			handler: function () {
				this.up('grid').changeTemplate('name', '<b>{name}</b> ({phone})');
			}
		}
	],
	columns: [
		{ header: 'Name', dataIndex: 'name', xtype: 'updatabletemplatecolumn', tpl: '{name}', flex: 1 }
	],
	changeTemplate: function (column, tpl) {
		Ext.Array.each(this.columns, function (item) {
			if (item.dataIndex == column) {
				item.setTemplate(tpl);
				return false;
			}
		});
		this.getView().refresh();
	},
	renderTo: 'output'
});