我是sencha touch的新手。我正在创建一个应用程序,我正在使用HTML。单击该跨度时,应调用控制器中的函数。我已经在视图和控制器上添加了这个问题。
查看
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);
}
}
});
在上面的问题中,我想点击一个id为TopNews的文本,并想在控制器中调用一个函数toggleNav。我尝试使用名称onPopulateDashBoardData触发一个事件,并尝试在控制器中使用该事件。但它也没有用。你应该知道什么。
答案 0 :(得分:1)
你引用文字的方式是错误的。
这样做: -
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>'
}]
控制器: -
refs:{
menu: container[name='top_news']
},
control : {
menu : {
initialize: function(container) {
container.element.on({
tap: 'toggleNav',
scope: this,
delegate: '#TopNews'
});
}
}
}