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

は、あなたがあなたのメインパネルのBBARまたは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」設定を取り除きたいと思うでしょう。