LogView

DataView with XTemplates for showing log-entries

by suamikim

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-debug.js"></script>

JavaScript

Ext.onReady(function() {
    var cnt = 0;
    
    Ext.define('LogEntry', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'text',    type: 'string' },
            { name: 'type',    type: 'string' }
        ]
    });
    
    Ext.create('Ext.panel.Panel', {
        itemId: 'mainPanel',
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        
        layout: 'fit',
        
        items: [{
            xtype: 'dataview',
            itemId: 'dataView',
            
            autoScroll: true,
            
            store: Ext.create('Ext.data.Store', {
                model: 'LogEntry',
                data: [
                    { text: 'error1',    type: 'error' },
                    { text: 'warn1',    type: 'warning' },
                    { text: 'info1',    type: 'info' },
                    { text: 'info2',    type: 'info' },
                    { text: 'error2',    type: 'error' }
                ]
            }),
            
            tpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                    '<div style="padding: 10px; background-color: {[this.getBackgroundColor(values.type)]}; border-bottom: 1px solid lightgray;">',
                        '<span>{text}</span>',
                    '</div>',
                '</tpl>', {
                    getBackgroundColor: function(type) {
                        var bckgrColor = 'red';
                        
                        switch (type) {
                            case 'error':
                            default:
                                bckgrColor = 'red';
                                break;
                                
                            case 'warning':
                                bckgrColor = 'orange';
                                break;
                                
                            case 'info':
                                bckgrColor = 'green';
                    ...