У меня есть макет границы в ExtJS,
Северный регион содержит некоторый HTML, но также должен содержать панель инструментов, подобную этой ...
Итак, мне удалось настроить макет границы, я добавил html в северную область макета, но я не могу найти работоспособных примеров реализации панели инструментов.
Я нашел множество примеров панелей инструментов самостоятельно, но я не могу позволить себе роскошь и не изучать ExtJ полностью, так что мне все равно.
Я подозреваю, что есть способ определить панель инструментов вне громоздкого потока в стиле 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 заставляет меня бояться касаться всего, что работает.