notification

by Johan Vandeplas

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

Ext.create('Ext.panel.Panel', {
    layout: 'border',
    xtype: 'panel',
    title: 'Simpsons',
    height: 500,
    renderTo: Ext.getBody()
});

var component = Ext.create('Ext.Component', {
    cls: 'msg',
    html: 'Hello world!',
    addCls: function(){
    console.log('added cls');
      this.callParent(arguments);  
    },
    padding: 20,
    renderTo: Ext.getBody()
});

component.addCls('test');