我在ExtJS中有一个边框布局，
北部地区包含一些HTML，但也需要包含a toolbar like this...
所以我设法设置边框布局，将html添加到布局的北部区域，但我找不到任何可行的如何实现工具栏的示例。
我已经找到了很多自己的工具栏示例，但是我没有得到充分的奢侈或学习ExtJs，所以这对我来说都是非常希望的。
我怀疑有一种方法可以在繁琐的JSON样式流程之外定义一个工具栏，创建一个布局并以某种方式将它附加到该区域，我希望它的相对简单易行。如果有人能解释我是如何做到这一点的，那真的会有所帮助。
到目前为止，这是代码......
//make sure YOUR path is correct to this image!!
Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';
//this runs on DOM load - you can access all the good stuff now.
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: "border",
border: false,
renderTo: Ext.getBody(),
items: [
// ------------------------------------------------------------------
{
region: "north",
id : "toolbar-area",
xtype: 'panel',
html: [ "<div id=\"html-header\">",
"<div id=\"council-logo\"></div>",
"<ul id=\"ancillary-menu\">",
"<li><a href=\"#\">Logout</a></li>",
"<li><a href=\"#\">Gazeteer Home</a></li>",
"<li>Hello Rachel</li>",
"</ul>",
"<img id=\"inteligent-logo\" src=\"applied-images/logos/inteligent.gif\">",
"</div>" ],
/* ++++++++++++++++++++++++++++++++++++++++++++ */
/* The toolbar needs to go around here.... */
/* ++++++++++++++++++++++++++++++++++++++++++++ */
height: 100
},
// ------------------------------------------------------------------
// WEST
// ------------------------------------------------------------------
{
region: 'west',
xtype: 'panel',
split: true,
resizeable: false,
maxWidth : 350,
minWidth : 349,
collapsible: true,
title: 'Gazetteer Explorer',
width: 350,
minSize: 150,
// --------------------------------------------------------------
title: 'Nested Layout',
layout: 'border',
border: false,
id: "west",
items: [
{
// ***********************************************
// Search Form
// ***********************************************
region : "north",
height: 300,
split : true,
id : "left-form-panel",
items : [{
xtype : "form",
id : "search-form",
items : [
// Authority combo box
// ===============================
{
xtype : "combo",
fieldLabel : "Authority",
name : "authority",
hiddenName : "authority",
id : "authority-combo"
},
// ===============================
// Search Fieldset
// ===============================
{
xtype : "fieldset",
autoHeight : true,
title : "Search by...",
id : "search-fieldset",
items : [
// Ref Number text Box
// %%%%%%%%%%%%%%%%
{
xtype : "textfield",
name : "ref-number",
fieldLabel : "Ref. Number",
id : "ref-number-textfield"
},
// %%%%%%%%%%%%%%%%
// Streetname Combo
// %%%%%%%%%%%%%%%
{
xtype : "combo",
name : "street-name",
hiddenName : "street-name",
fieldLabel : "Street Name",
id : "street-name-combo"
},
// %%%%%%%%%%%%%%%%
// Postcode Combo
// %%%%%%%%%%%%%%%%
{
xtype : "combo",
name : "postcode",
hiddenName : "postcode",
fieldLabel : "Postcode",
id : "postcode-combo"
},
// %%%%%%%%%%%%%%%%
// Postcode Combo
// %%%%%%%%%%%%%%%%
{
xtype : "combo",
name : "town",
hiddenName : "town",
fieldLabel : "Town",
id : "towm-combo"
},
// %%%%%%%%%%%%%%%%
// Postcode Combo
// %%%%%%%%%%%%%%%%
{
xtype : "combo",
name : "locality",
hiddenName : "locality",
fieldLabel : "Locality",
id : "locality-combo"
},
// %%%%%%%%%%%%%%%
// Search Button
// %%%%%%%%%%%%%%%%
{
xtype : "button",
text : "Search",
id : "search-button"
},
// Reset Button
// %%%%%%%%%%%%%%%
{
xtype : "button",
text : "Reset",
id : "reset-button"
}
]
},
// =======================
]
}]
// *********************************************
},
{
region: 'center',
html: 'Tree view goes here'
}
]
},
// ------------------------------------------------------------------
{
region: 'center',
xtype: 'panel',
// --------------------------------------------------------------
layout: 'border',
border: false,
items: [
{
region: 'center',
height: 200,
split: true,
html: 'Map goes here'
},
{
region: 'south',
title: "Selection",
split: true,
height: 200,
collapsible: true,
html: 'Nested Center'
}
]
},
// ------------------------------------------------------------------
{
region: 'east',
},
// ------------------------------------------------------------------
{
region: 'south',
}]
});
});
很抱歉这里有很多代码，但ExtJS让我害怕触及任何有效的代码。
答案 0 :(得分：4)
只需添加
bbar: [
// YOUR ITEMS HERE EXAMPLE FOLLOWING
{
xtype: 'button',
text: 'test Button',
handler: function(btn){
alert('Button Click');
}
}
]
到您的配置（其中xtype === panel）
它看起来像这样：
{
region: "north",
id : "toolbar-area",
xtype: 'panel',
html: [ "<div id=\"html-header\">",
"<div id=\"council-logo\"></div>",
"<ul id=\"ancillary-menu\">",
"<li><a href=\"#\">Logout</a></li>",
"<li><a href=\"#\">Gazeteer Home</a></li>",
"<li>Hello Rachel</li>",
"</ul>",
"<img id=\"inteligent-logo\" src=\"applied-images/logos/inteligent.gif\">",
"</div>"
],
bbar: [
{
xtype: 'button',
text: 'test Button',
handler: function(btn) {
alert('Button Click');
}
}
],
height: 100
}
答案 1 :(得分：3)
@ Nexum的答案是正确的，但是为了添加更多的上下文，BorderLayout的每个区域实际上都是一个Ext.Panel，因此可以用于面板的任何配置都可以应用于某个区域。对于工具栏，请查看tbar（顶部工具栏）和bbar（底部工具栏）的Ext.Panel文档。
在一个不相关的说明中，我看到您在北面板内容的代码中手动创建了一堆HTML。这是一种痛苦的方法。非平凡标记更容易在页面中添加它作为带有周围div的标准HTML。给div一个id和一个x-hidden类，然后使用contentEl Panel配置将其拉入。
答案 2 :(得分：1)