我正在创建一个应用程序,我必须在其中创建类似sencha touch theming expample的弹出窗口以选择导航项。
我试图在github上查看其代码以获取提示,但不知道我错过的是hare是我的标题栏代码和列表按钮。
Ext.define('ov_app.view.HeaderBar', {
xtype : 'HeaderBar',
extend:'Ext.Toolbar',
config: {
// xtype : 'toolbar',
ui: 'plain',
docked: 'top',
cls: 'menuBar',
border:0,
defaults:{
border: 0,
},
items: [
{
iconCls: 'list',
iconMask: true,
ui: 'plain',
action: 'ShowMoreOption',
},{
xtype: 'spacer'
},{
xtype: 'container',
html: '<img src="resources/images/logo.png">'
},{
xtype: 'spacer'
},{
iconCls: 'home',
iconMask: true,
id: 'homeBtn',
ui: 'plain',
action: 'push-view'
}
]
}
});
`
并将我的控制器main.js的代码添加到Handel列表按钮上的选项卡操作。
Ext.define('ov_app.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control: {
'button[action=push-view]': {
tap: 'pushViewFunction'
},
'button[action=ShowMoreOption]':{
tap: 'togglMenu'
},
},
},
pushViewFunction: function() {
ov_app.container.setActiveItem(0);
},
togglMenu: function(){
console.log("hello");
}
togglMenu: function(button) {
this.getStyleBubble().showBy(button)
},
});
`
当我尝试单击顶部的列表按钮时,我在控制台中看到的错误是
未捕获的TypeError:对象[object Object]没有方法'getStyleBubble'
我也没有在模型,视图,控制器,商店目录中的任何文件中看到这个'getStyleBubble'函数的任何定义。所以它在任何触摸目录文件中定义,或者我遗漏了一些东西。
答案 0 :(得分:0)
如果下载整个源代码zip文件夹,控制器文件中也没有getStyleBubble()函数减速也没有在任何文件中我认为他们没有上传完整的源代码。但我找到了解决方案。我必须创建一个新的面板,然后单击列表按钮进行切换。
togglMenu: function(button){
if(!this.overlay) {
this.overlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
},
height: 200,
width: 200,
//centered: true,
styleHtmlContent: true,
html: '<p>hello dummy content in the pop up box </p>',
scrollable: true
});
}
this.overlay.showBy(button);
`