notification

HTML

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

CSS

.msg {
    top: -5px;
    position: absolute;
    z-index: 100;
    right: 110px;
    background-color: #AAFF8D;
    border: 2px solid green;
    border-radius: 5px;
}

JavaScript

var data = [{
    "name": "o016561",
        "status": 1,
        "locks": [{
        "ztn": "155320",
            "dtn": "20131111",
            "idn": "78"
    }, {
        "ztn": "155320",
            "dtn": "20131111",
            "idn": "91"
    }]
}, {
    "name": "o011111",
        "status": 1,
        "locks": [{
        "ztn": "155320",
            "dtn": "20131111",
            "idn": "91"
    }]
}, {
    "name": "o019999",
        "status": 0,
        "locks": [

    ]
}, {
    "name": "o020000",
        "status": 0,
        "locks": [

    ]
}, {
    "name": "o020001",
        "status": 0,
        "locks": [

    ]
}];

Ext.define("Locks", {
    extend: 'Ext.data.Model',
    fields: [
        'ztn',
        'dtn',
        'idn']
});

Ext.define("ConnectionModel", {
    extend: 'Ext.data.Model',
    fields: ['name', 'status'],
    hasMany: [{
        model: 'Locks',
        name: 'locks'
    }]
});

var store = Ext.create('Ext.data.Store', {
    model: "ConnectionModel",
    autoLoad: true,
    data: data,
    proxy: {
        type: 'memory'
    }
});
Ext.create('Ext.grid.Panel', {
    title: 'test',
    store: store,
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Status',
        dataIndex: 'status'
    }, {
        text: 'idn',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
            values = [];
            record.locks().each(function(lock){
                values.push(lock.get('idn'));
            });
            console.log(values);
            return values.join('<br\>');
        }
    }, {
        text: 'ztn + dtn',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
            values = [];
            record.locks().each(function(lock){
                values.push(lock.get('ztn') + ' ' + lock.get('dtn'));
            });
            return values.join('<br\>');
        }
    }],
    height: 200,
    width: 600,
    renderTo:...