Loading
 
What's Next: View All Tutorial →

Generate the Table with rows and column using Ext.XTemplate by iterating Array

A simple program to generate the table inside the panel using XTemplate Code Snippet #1   Ext.create('Ext.panel.Panel', { title: 'Table Structure with XTemplate', width: 500, height: 500, renderTo: Ex...

Published Date: 04/02/2015  Last Modified Date: 04/02/2015    New Post



A simple program to generate the table inside the panel using XTemplate


Code Snippet #1
 
Ext.create('Ext.panel.Panel', {
    title: 'Table Structure with XTemplate',
    width: 500,
    height: 500,
    renderTo: Ext.getBody(),
    data : {
        columns: [{
            "name": "ColA"
        },{
            "name": "ColB"
        },{
            "name": "ColC"
        }],
        rows : [{
            "valueA" : "Row 1A",
            "valueB" : "Row 1B",
            "valueC" : "Row 1C"
        }]
    },
    tpl : new Ext.XTemplate(
        "<table border='1'>" +
            "<tr>" +
                 "<tpl for='columns'>" +
                     "<th>{name}</th>" +
                 "</tpl>" +
                 "<tpl for='rows'>"+
                     "<tr>"+
                         "<td>{valueA}</td>" +
                         "<td>{valueB}</td>" +
                         "<td>{valueC}</td>" +
                     "</tr>" +
                "</tpl>"+
            "<tr>" +
        "</table>"
    )
});

<tpl for='columns'> - for attribute is used to iterate the child array

{} - Used to access the key and print the value
 

Run the program


Step 1:  Click here to open the jsfiddle with the EXTJS settings

http://jsfiddle.net/ye3j45jt/

Step 2: Paste the code snippet 1 in the Javascript section and click Run button found on the top of the page to execute the program


 
Awaiting for Administrator approval





Tags: Iterator Template

← Back to list


Related Post




×