extjsのレイアウトにツールバーを追加するにはどうしたらいいですか?

私は既に作成されたレイアウトにツールバーを追加しようとしています。私は、ツールバーとレイアウトの両方のコードがありますが、私はあまりにも統合する方法を知らない

私のツールバー用

<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>

このページのツールバーはどのように使用できますか? ありがとう

@ジャスティン、ここに私のフルコードです

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'
}]
});
1

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"設定を取り除きたいでしょう。

1
追加された
Tony - 私が見ることができるようにあなたのコード全体をコピーしてください。最初に私が見るのは、あなたがrenderTo設定オプションを削除したときに、あなたは "{"のオープニングも削除したことです。 configオプションのオブジェクトを受け付ける新しいツールバーを作成しているので、新しいExt.Toolbar({//あなたの設定オプション})が必要です。
追加された 著者 Justin,
Ahhhh、あなたがビューポートにtbarを追加できるか確かめないでください。ドキュメントをダブルテイクしただけで、あなたのパネルにtbar設定を追加する必要があります。私はまた、あなたがレイアウトの設定をどこから始めるのかを見ています。あなたはテンションを持っていますが、レイアウトがどのようにレンダリングされるかわからないのでコピーの貼り付けエラーかもしれません。 Viewportレイアウトを「フィット」に変更し、現在のビューポートアイテムを含むパネルを追加する場合、基本的にはここで試しているのと同じことを達成できます。
追加された 著者 Justin,
聞いてよかった!あなたが別の質問のためになるイベントを聞くのに問題があるが、あなたがあなたの答えを見つけることができないかどうか尋ねるのをためらうことがないなら、皆を助ける。簡単なヒントとして、ボタンに「handler:someFunc(){}」設定を追加することができます。これは、ちょうど始まったばかりのときにうまくいきます。もちろん、完全なアプリケーションのためには、MVCのアプローチでアプリケーションを設計する方法に関するドキュメントをチェックすることをお勧めします。チェックアウト: sencha.com/learn/extjs/?4x また、チェックアウトしてくださいボタンのドキュメントはこちら: docs.sencha .com/ext-js/4-0 /#!/ api/Ext.button.Button
追加された 著者 Justin,
ここから始めてください(3部): sencha.com/learn/architecting-your-app-in-ext-js-4-part-1 第2部では、コントローラを接続してビューイベントをリッスンする方法を示し始めます。
追加された 著者 Justin,
ちょっとジャスティン、お返事ありがとう。私はまだちょっと残っている!私はextjsの初心者なので、どうしたらいいか分からない。あなたの回答を使って自分のコードを編集しますが、まだ進歩していません。私の完全なコードを見て、何かが欠けている場合は私をtekllしてください。ありがとう
追加された 著者 Tony,
、お返事をありがとうございます。今、このコードは私のレイアウトを示していますが、まだ私のツールバーを表示することができません。
追加された 著者 Tony,
ジャスティン、もう一度ありがとう。出来た!私は新しいコードを入力する必要はありませんでした。レイアウト:フィット、コマンドはそれを動作させた。再度、感謝します。私はあなたがit.myを見ることができるように、後で私の完全なコードを置くつもりです。
追加された 著者 Tony,
justin、クリック/イベントのリスンに対応する簡単なチュートリアルはありますか?
追加された 著者 Tony,
大丈夫、私はこれをチェックします。再度、感謝します。
追加された 著者 Tony,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript