How to use the html id in sencha touch - sencha-touch

Question

I am new to sencha touch. I am creating a app in which i am using a html . When that span is clicked a function in controller should be called . I have attached the view and controller with this question.
View
Ext.define('SlideNav.view.Viewport', {
extend: 'Ext.Container',
xtype: 'app_viewport',
requires: [
'Ext.TitleBar'
],
config: {
fullscreen: true,
layout: 'hbox',
items : [
{
docked: 'top',
xtype: 'panel',
height: 40,
style:'background:white ;height:40px;color:black',
items:[
{
html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
}
],
listeners: {
initialize:function(){
this.fireEvent('onPopulateDashBoardData', this);
}
/* tap: {
fn: function(event, el){ console.log("tapped!");
this.fireEvent('onPopulateDashBoardData', this);
},
element: 'element',
delegate: '#TopNews'
}*/
}
},
{
xtype : 'main',
cls: 'slide',
// Needed to fit the whole content
width: '100%'
}, {
xtype : 'navigation',
width : 250
}]
}
});
controller.js
Ext.define('SlideNav.controller.App',{
extend: 'Ext.app.Controller',
config:{
refs:{
app_viewport: 'app_viewport',
main : 'main',
navigation : 'navigation',
navBtn : 'button[name="nav_btn"]',
},
control : {
app_viewport:{
onPopulateDashBoardData:'toggleNav'
},
navBtn : {
tap : 'toggleNav'
},
navigation : {
itemtap : function(list, index, target, record){
this.toggleNav();
console.log(record);
alert(record._data.title);
}
}
}
},
/**
* Toggle the slide navogation view
*/
toggleNav : function(){
var me = this,
mainEl = me.getMain().element;
console.log('hai');
if (mainEl.hasCls('out')) {
mainEl.removeCls('out').addCls('in');
me.getMain().setMasked(false);
} else {
mainEl.removeCls('in').addCls('out');
me.getMain().setMasked(true);
}
}
});
In the above question , i want to click a text with id TopNews from and want to call a function toggleNav in controller. I tried to fire a event with the name onPopulateDashBoardData and tried to use that event in the controller. But it is also not working . What should you know.

Answer 1

The way you are referring the text is wrong.
Do this:-
items:[{
name: 'top_news', // add this name for referring
html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
}]
Controller:-
refs:{
menu: container[name='top_news']
},
control : {
menu : {
initialize: function(container) {
container.element.on({
tap: 'toggleNav',
scope: this,
delegate: '#TopNews'
});
}
}
}