clickable column/bar/horizontal layout with sencha - html

Question

I have a problem trying to make a column clickable on sencha. I tried various ways, putting the text in a container, component, etc and I cant get it to react to a click.
Here is the code snippet. Check out the listener, it doesnt work when I tap on the text or that layout bar. Please help!
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) {
}
}
});

Answer 1

As to answer your last comment, no, vbox might be overkill if you do not need most panel's functionalities. I would suggest to just use pure dom. The good thing about pure dom is that it you have your full control over what you need. If you use vbox, you will end up negating or disabling some of the css/functionalities it is providing.
So first, this is pure dom method: 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);
});
And then, this is the vbox way. Notice how I create them in a single loop: 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);
});
Both of them looks similar, just vbox way is a little bit overkilling as it processed a little bit more stuff than using pure dom. Inspect both generated dom nodes to see the differences.
This is the dom nodes generated in example 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>
And this is in example 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>
Get what I mean?