Window and Tabs

by ATechieDiary

HTML

<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">
<div id="winDivId"></div>
<div id='myDiv'>Vow you have got started with extJS</div>

JavaScript

// tabs for the center
    var tabs = new Ext.TabPanel({
        region: 'center',
        margins:'3 3 3 0', 
        //activeTab: 0,
        defaults:{autoScroll:true},
        //tabPosition : "top"/"bottom"/"left"/"right",
        items:[{
            title: 'First Tab',
            html: "<div id='DRAGDIV'>This is the first tab</div>"
        },{
            title: 'Another Tab',
            //html: Ext.example.bogusMarkup
        },{
            title: 'Closable Tab',
            //html: Ext.example.bogusMarkup,
            closable:true
        }]
    });

   var myPanelConfig ={ 
        title: 'Navigation',
        region: 'west',
        split: true,
        width: 200, // "10%"
        collapsible: true,
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    }
    // Panel to the west side
    var nav = new Ext.Panel(myPanelConfig);

    var win = new Ext.Window({
        title: 'Layout Window',
        items:[nav, tabs],
        //closable:false,
        resizeable:true,
        collapsible: true,
        contentEl :Ext.get("myDiv"),
        modal: true,
        minimizable: true, // the minimize button provides no implementation
        draggable:true,
        width:600,
        height:350,
        border:false,
        plain:true,
        layout: 'border',
        listeners:{
        	close: function(){
        		alert("Window getting closed");
        	}
        }
    });
    win.show(Ext.get("winDivId"));// Ext.getBody()
   // dd = new Ext.dd.DragDrop("DRAGDIV");
   // dd.onDragDrop = function(e, id) {
   //     alert("dd was dropped on " + id);
   // }