Что касается вашего последнего комментария, нет, vbox может быть излишним, если вам не нужны большинство функций панели.Я бы предложил просто использовать чистый дом.Преимущество чистого дома в том, что вы полностью контролируете то, что вам нужно.Если вы используете vbox, вы в конечном итоге отключите или отключите некоторые из предоставляемых им функций css / *.
Итак, во-первых, это чистый метод dom: ссылка на пример
//Create a simple namespace. Habit :)
Ext.ns('NS');
/**
* This is the customized menu component
* Usage: bla bla..
*/
NS.Menu1 = Ext.extend(Ext.Component, {
/**
* @cfg menu
* An array of menu items to be rendered into the component
*/
menu: [],
initComponent: function() {
NS.Menu1.superclass.initComponent.call(this);
//We create our own customized event, so users can hook events onto it
this.addEvents({
/**
* @event menuclick
* Fires when the menu is clicked
* @param {NS.Menu1} cp this component
* @param {Menu} m The menu item
* @param {Ext.Element} a The anchor element
* ... or whatever you want to pass
*/
menuclick: true
});
//We hook an afterrender event here, so we could know
//when will be our el be rendered.
this.on('afterrender', this.onAfterRender, this);
},
onAfterRender: function() {
var me = this;
//Let's do all the fancy stuff here:
Ext.each(me.menu, function(m) {
//el property is always there as long as you subclass
//Ext.Component. It's the outermost div of the component.
//We create multiple single anchors here (of course ul/li/a is better)
var a = me.el.createChild({
tag: 'a', //so we can have :hover supports from crappy IE
html: m.text, //or anything you like
cls: 'item' //and the class to style it
//then we hook 'click' even to this anchor
}).on('click', function() {
//Then do whatever you like here
Ext.get('output1').update(m.text);
//Or even firing your own customized events, whatever you like
me.fireEvent('menuclick', me, m, a);
//or whatsoever...
});
});
}
});
//Finally, testing it out!
new NS.Menu1({
renderTo: 'menu1',
menu: [{
text: 'This is the first menu'
},{
text: 'This is the 2nd menu'
},{
text: 'This is the last menu'
}]
}).on('menuclick', function(cp, m) {
Ext.get('output2').update(m.text);
});
И потом, это путь vbox.Обратите внимание, как я создаю их в одном цикле: перейдите к примеру
/**
* This is the column bars with clickable areas
*/
Ext.ns('NS');
NS.Menu2 = Ext.extend(Ext.Panel, {
/**
* @cfg menu
* An array of menu items to be rendered into the component
*/
menu: [],
border: false,
layout: {
type: 'vbox',
align: 'stretch'
},
initComponent: function() {
var me = this;
//Same thing, you can do event hook here:
me.addEvents('menuclick');
me.items = [];
//Create all the boxes as you like
Ext.each(me.menu, function(m) {
me.items.push({
html: m.text,
bodyCssClass: 'item',
bodyStyle: 'padding-bottom: 0px;margin-bottom: 0px;',
listeners: {
afterrender: function(p) {
//As you can see, we hook the afterrender event so
//when your panels (each individual panels) are created,
//we hook the click event of the panel's root el.
p.el.on('click', function() {
Ext.get('output1').update(m.text);
//Fires event
me.fireEvent('menuclick', me, m, p.el);
});
}
}
});
});
NS.Menu2.superclass.initComponent.call(this);
}
});
new NS.Menu2({
renderTo: 'menu2',
height: 300,
menu: [{
text: 'This is the first menu'
},{
text: 'This is the 2nd menu'
},{
text: 'This is the last menu'
}]
}).on('menuclick', function(cp, m) {
Ext.get('output2').update(m.text);
});
Оба они выглядят одинаково, просто путь vbox немного излишним, так как он обрабатывает немного больше материалачем используя чистый дом.Осмотрите оба сгенерированных dom-узла, чтобы увидеть различия.
Это dom-узлы, сгенерированные в примере 1:
<div id="ext-comp-1001">
<a class="item" id="ext-gen3">This is the first menu</a>
<a class="item" id="ext-gen4">This is the 2nd menu</a>
<a class="item" id="ext-gen5">This is the last menu</a>
</div>
И это в примере 2:
<div id="ext-comp-1001" class=" x-panel x-panel-noborder">
<div class="x-panel-bwrap" id="ext-gen3">
<div class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-box-layout-ct" id="ext-gen4" style="height: 300px; ">
<div class="x-box-inner" id="ext-gen6" style="width: 836px; height: 300px; ">
<div id="ext-comp-1002" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 0px; ">
<div class="x-panel-bwrap" id="ext-gen7"><div class="x-panel-body item x-panel-body-noheader" id="ext-gen8" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the first menu</div>
</div>
</div>
<div id="ext-comp-1003" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 31px; ">
<div class="x-panel-bwrap" id="ext-gen10">
<div class="x-panel-body item x-panel-body-noheader" id="ext-gen11" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the 2nd menu</div>
</div>
</div>
<div id="ext-comp-1004" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 62px; ">
<div class="x-panel-bwrap" id="ext-gen13">
<div class="x-panel-body item x-panel-body-noheader" id="ext-gen14" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the last menu</div>
</div>
</div>
</div>
</div>
</div>
Получите, что я имею в виду?