Layout 如何在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>

---

您应该能够将工具栏作为配置选项添加到主面板的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”配置。

您应该能够将工具栏作为配置选项添加到主面板的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”配置。

嘿，贾斯汀，谢谢您的回答。我还是有点卡住了！我是extjs新手，所以我仍然不知道该怎么做。我使用您的响应编辑代码，但仍然没有取得进展。看一看我的完整代码，如果缺少什么，告诉我。谢谢-复制你的全部代码以便我能看到。我看到的第一件事是，当您删除renderTo config选项时，您还删除了开头的“{”。记住，您正在创建一个新的工具栏，它接受配置选项的对象，因此您需要新的Ext.toolbar（{//your config options}），谢谢你的回复。现在，这段代码显示了我的布局，但仍然无法显示我的工具栏。啊，我不确定你是否可以将tbar添加到视口中。只是在文档中做了双重检查…你必须将tbar配置添加到面板中。我还看到了从何处开始布局配置而不是项目：你有tems:但这可能只是一个副本paste错误，因为我不确定您的布局将如何渲染。如果您将视口布局更改为“适合”，并添加包含当前视口项目的面板，则基本上可以完成与我们在此尝试的相同的操作。贾斯汀，再次感谢。成功了！我不必输入任何新代码。布局：适合，命令使其工作。谢谢我的下一个任务是让菜单项在点击时触发事件。嘿，贾斯汀，谢谢你的回答。我还是有点卡住了！我是extjs新手，所以我仍然不知道该怎么做。我使用你的回复编辑我的代码，但仍然没有进展。看看我的完整代码和d如果缺少什么，请告诉我。谢谢-复制您的整个代码以便我查看。我看到的第一件事是，当您删除renderTo配置选项时，您还删除了开头的“{”。请记住，您正在创建一个新工具栏，它接受配置选项的对象，因此您需要新的Ext.toolbar（{//your config options}），谢谢你的回复。现在，这段代码显示了我的布局，但仍然无法显示我的工具栏。啊，我不确定你是否可以将tbar添加到视口中。只是在文档中做了双重检查…你必须将tbar配置添加到面板中。我还看到了从何处开始布局配置而不是项目：你有tems:但这可能只是一个副本paste错误，因为我不确定您的布局将如何渲染。如果您将视口布局更改为“适合”，并添加包含当前视口项目的面板，则基本上可以完成与我们在此尝试的相同的操作。贾斯汀，再次感谢。成功了！我不必输入任何新代码。布局：适合，命令使其工作。谢谢我稍后会把我的完整代码放上去，这样你就可以看到了。我的下一个任务现在是让菜单项在单击时触发事件。

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
      ]
    }
  ]
  ...