我有一个问题，试图使列在sencha上可点击。我尝试了各种方法，将文本放入容器，组件等，但我无法让它对点击做出反应。
下面是代码片段。看看这个监听器，当我点击文本或布局栏时，它不起作用。请帮助!
app.views.test = Ext.extend(Ext.Panel, {
scroll: "vertical",
id: 'test',
initComponent: function() {
var testbar = {
layout : {
type : 'vbox',
align : 'start',
pack : 'start'
},
width : '60%',
items : [{
html : 'press this column
bar : '5 0 0 15',
width : '100%'
}],
listeners: {
itemtap : function () {
console.log("goto next");
}
}
};
var testViews = {
items : [ testbar ]
};
this.items = [ testViews ];
app.views.test.superclass.initComponent.apply(this, arguments);
},
onSelect: function(sel, records){
if (records[0] !== undefined) {
}
}
});
回答你的最后一个评论，不，如果你不需要面板的大多数功能，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方式。注意我是如何在一个循环中创建它们的:
/**
* 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中生成的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>
明白我的意思吗?