I have a border layout in ExtJS,
The north region contains some HTML, but also needs to contain a toolbar like this…
So i’ve managed to get the border layout set up, added the html to the North Region of the layout, but I can’t find any workable examples of how to implement a tool bar.
I have found lot’s of examples of toolbars on their own, but I’ve not got the luxury or learning ExtJs thoroughly so it’s all greek to me.
I suspect there’s a way to define a tool bar outside of the cumbersome JSON style flow of creating a layout and somehow attaching it to the region, and I’m hoping it’s relativley simple to do. If someone can explain how I’d do this, it would really help.
Here’s the code so far…
//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',
}]
});
});
Sorry there’s so much code, but ExtJS makes me scared to touch anything that’s working.
just add
to your config (where xtype === panel)
it would look like something like this :