Extjs Exercise 1.3- top toolbar

by mowglisanu

HTML

<link rel="stylesheet" href="http://webstar/GGLCustom/extjs/resources/css/ext-all.css">

JavaScript

var viewport = new Ext.Viewport({
    "layout":"border",
    "renderTo":Ext.getBody(),
    "items": [
        {
            region: 'north', 
            xtype:'toolbar', 
            height:30,
            items:[
                '',
                {xtype: 'tbbutton', text:'Click Me', id: 'dragme'},
                '->',
                {xtype:'tbbutton', text:'Click Him'}
            ]
        },
        {region: 'west', xtype:'panel', split:true, collapseMode: 'mini',width: 200, html: 'west', id: 'dropme'},
        {
            region: 'center', 
            xtype: 'tabpanel',
            activeTab: 0,
            items:[{
                title:'<i>Italics</i>',
                html: '<center>Middle</center>'
            },{
                title:'<b>Bold</b>',
                layout:'accordion',
                items:[
                    {title:'One', html:'two'},
                    {title:'Aye', html:'bee'}
                    ]
            }]
        },
        {region: 'east', xtype: 'panel', split: true, width: 200, html: 'east'},
        {region: 'south', xtype: 'panel', html: 'South',bodyStyle:'background-color:red;'}
    ]
});
var drag = new Ext.dd.DragSource('dragme');
var drop = new Ext.dd.DropTarget('dropme', {
    notifyDrop: function(e){
        console.log(e.getEl(),e.getDragEl());
        return true;
    }
});