[rom30]

Ext.define('Ext.Third_Panel',{
	extend: 'Ext.Panel',
	id : 'id_third_panel',
	title : 'Third Panel',
	height : 400,
	width : 250,
	layout : {
		type : 'absolute'
	},
	items: 		[
	        	{
				xtype: 'textfield',
				id: 'id_f_name3',
				width: 220,
				fieldLabel: 'First Name',
				x: 10,
				y: 10
		        },
		        {
				xtype: 'textfield',
				id: 'id_l_name3',
				width: 220,
				fieldLabel: 'Last Name',
				x: 10,
				y: 30
		        }
		        ]     
});

var third_panel=Ext.create('Ext.Third_Panel');

var second_panel= new Ext.Panel({
	id : 'id_second_panel',
	title : 'Second Panel',
	height : 400,
	width : 250,
	layout : {
		type : 'absolute'
	},
	items: 		[
	        	{
				xtype: 'textfield',
				id: 'id_f_name',
				width: 220,
				fieldLabel: 'First Name',
				x: 10,
				y: 10
		        },
		        {
				xtype: 'textfield',
				id: 'id_l_name',
				width: 220,
				fieldLabel: 'Last Name',
				x: 10,
				y: 30
		        }
		        ]     
});
var first_panel= new Ext.Panel({
	id : 'id_first_panel',
	title : 'First Panel',
	height : 400
:help: 	width : 250,
	layout : {
		type : 'absolute'
	},
	
	items:[
        	{
				xtype: 'textfield',
				id: 'id_f_name1',
				width: 220,
				fieldLabel: 'First Name',
				x: 10,
				y: 50
		        },
		        {
				xtype: 'textfield',
				id: 'id_l_name1',
				width: 220,
				fieldLabel: 'Last Name',
				x: 10,
				y: 80
		        }
	   ]   
	
});

var main_window1= new Ext.Window({
			id : 'main_window',
			closeAction:'hide',
			title: 'Test Window',
			autoScroll : true,
			modal: true,
			y:20,
			width : 400,
			height : 250,
			layout : {
				type : 'absolute'
			},
			
	       
		    items: [
		                {
		                    xtype: 'tabpanel',
		                    id:'tabpanel',
		                    items: [first_panel,
		                            second_panel,
		                            third_panel
		                        
		                    ]
		                }
		            ]
		    
		});