ext js 4 dataview grouping

gistfile1.js

Ext.create('Ext.XTemplate',
            '<h1>Active Users</h1>',
            '<tpl for=".">',
                '<tpl if="active == true">',
                    '<div class="users">',
                        '<p>{name}</p>',
                    '</div>',
                '</tpl>',
            '</tpl>',
            '<h1>Deactive Users</h1>',
            '<tpl for=".">',
                '<tpl if="active == false">',
                    '<div class="users">',
                        '<p>{name}</p>',
                    '</div>',
                '</tpl>',
            '</tpl>'
            );

/*
user data
{
    "success":true,
    "data": [{
        "id": 1,
        "email": "[email protected]",
        "name": "Sample User",
        "locale": "en",
        "time_zone": "Casablanca",
        "active": true
    },{
        "id": 2,
        "email": "[email protected]",
        "name": "Sample User 1",
        "locale": "ru",
        "time_zone": "Casablanca1",
        "active": true
    },{
        "id": 3,
        "email": "[email protected]",
        "name": "Sample User 2",
        "locale": "tr",
        "time_zone": "Casablanca",
        "active": false
    }]
}
*/