Создание объекта класса
 

Есть код:
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,
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

]
}
]

});

Здесь видно , что надо создать по-видимому класс
для 2-х полей , и вставлять объект этого класса в панели.
Только "id" каждому полю в каждой панели присваивать
разные.
Изучаю ExtJS синтаксис - изв-те если что

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.