ExtJs Template: Using Template Member Functions

By Vitaliy on March 11, 2013. ExtJS 4.1.1
2856
​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

By Vitaliy on March 11, 2013. ExtJS 4.1.1
3216
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

By Vitaliy on March 11, 2013. ExtJS 4.1.1
3663
​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'
});