至于回答您最近的评论,不,如果您不需要大多数面板的功能,vbox可能会矫枉过正。我会建议只使用纯dom。纯DOM的好处在于它可以完全控制你需要的东西。如果你使用vbox
,你最终会否定或禁用它提供的一些CSS /功能。
因此,首先,这是纯粹的DOM方法:link to example
//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的方式。注意我是如何在一个循环中创建它们:go to example
/**
* 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的方式是有点overkilling,因为它处理了一点点东西,比用纯DOM。检查两个生成的DOM节点以查看差异。
这是实施例1中产生的DOM节点:
<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>
明白我的意思?
对不起,但您为什么需要使用columnLayout来实现点击?你能详细说明你想达到什么吗?因为可能比使用columnLayout更好的解决方案。 Fyi'itemtap'也不是'Panel'中的一个有效事件,所以它肯定不会起作用。 –
嗨莱昂内尔,感谢评论。我想要实现的是有一个可点击的列。不是真正的表格列...但只要想一想就好,在列表中点击吧。但我不想创建一个列表,只是个性化的自定义栏或列。你能举一个例子来说明如何做到这一点? – Axil
嗯,你可以提供一个你想创建什么图片?你是否想要创建某种可点击区域?这可以通过dom级别的事件处理来实现。 –