Как добавить панель инструментов в мой макет в extjs?

Question

Я пытаюсь добавить панель инструментов в уже созданный макет. У меня есть коды как на панели инструментов и расположение, но я не знаю, как интегрировать в тоже

Для моей панели

<script> 
Ext.onReady(function() { 
new Ext.Toolbar({renderTo: Ext.getBody(), 
items: [{ 
xtype: 'button', 
text: 'Menu Button', 
menu: [{ 
text: 'Better' 
}, { 
text: 'Good' 
}, { 
text: 'Best' 
}] 
},'->', { 
xtype: 'splitbutton', 
text: 'Split Button', 
menu: [{ 
text: 'Item One' 
}, { 
text: 'Item Two' 
}, { 
text: 'Item Three' 
}] 
},'', { 
xtype: 'cycle', 
showText: true, 
minWidth: 100, 
prependText: 'Quality: ', 
items: [{ 
text: 'High', 
checked: true 
}, { 
text: 'Medium' 
}, { 
text: 'Low' 
}] 
},] 
}); 
}); 
</script> 

и для моего макета, я

<script> 
var viewport = new Ext.Viewport({ 
layout: "border", 
defaults: { 
bodyStyle: 'padding:10px;', 
}, 
items: [{ 
region: "north", 
html: 'North', 
margins: '5 5 5 5' 
}, { 
region: 'west', 
collapsible: true, 
title: 'Some Info', 
width: 200, 
html: 'West', 
margins: '0 0 0 5' 
}, { 
region: 'center', 
title: 'Our Info', 
html: 'Center', 
margins: '0 0 0 0' 
}, { 
region: 'east', 
collapsible: true, 
width: 200, 
title: 'Their Info', 
html: 'East', 
margins: '0 5 0 0' 
}, { 
region: 'south', 
title: 'Their Info', 
html: 'South', 
width: 200, 
margins: '5 5 5 5' 
}] 
}); 
</script> 

Как может Я использую панель инструментов на этой странице? Благодаря

@Justin, Вот мой полный код

var viewport = new Ext.Viewport({ 
layout: "border", 
tbar: new Ext.Toolbar({ 
//Toolbar config options 
items: [{ 
xtype: 'button', 
height: 27, 
text: 'Menu Button', 
menu: [{ 
text: 'Better' 
}, { 
text: 'Good' 
}, { 
text: 'Best' 
}] 
}, '->', 
{ 
xtype: 'splitbutton', 
text: 'Split Button', 
menu: [{ 
text: 'Item One' 
}, { 
text: 'Item Two' 
}, { 
text: 'Item Three' 
}] 
}, '', 
{ 
xtype: 'cycle', 
showText: true, 
minWidth: 100, 
prependText: 'Quality: ', 
items: [{ 
text: 'High', 
checked: true 
}, { 
text: 'Medium' 
}, { 
text: 'Low' 
}] 
}, ] 
}), 
defaults: { 
bodyStyle: 'padding:10px;', 
}, 
//layouf config 
tems: [{ 
region: "north", 
html: 'North', 
margins: '5 5 5 5' 
}, { 
region: 'west', 
collapsible: true, 
title: 'Some Info', 
width: 200, 
html: 'West', 
margins: '0 0 0 5' 
}, { 
region: 'center', 
title: 'Our Info', 
html: 'Center', 
margins: '0 0 0 0' 
}, { 
region: 'east', 
collapsible: true, 
width: 200, 
title: 'Their Info', 
html: 'East', 
margins: '0 5 0 0' 
}, { 
region: 'south', 
title: 'Their Info', 
html: 'South', 
width: 200, 
margins: '5 5 5 5' 
}] 
}); 

Answer 1

Вы должны быть в состоянии добавить панель инструментов в качестве опции конфигурации к просветляющему или TBAR вашей главной панели.

var viewport = new Ext.Viewport({ 
    layout: "fit",   
    items: [ 
    //We add one "main" panel that fills up entire Viewport 
    { 
     layout: "border", 
     defaults: { 
     bodyStyle: 'padding:10px;', 
     }, 
     tbar: new Ext.Toolbar({ 
     //your Toolbar config options 
     }), 
     items: [ 
     //your panels here 
     ] 
    } 
    ] 
    ... 

В этом случае вы хотели бы избавиться от конфигурации «renderTo» на панели инструментов.