sencha touch如何使导航像Touch-Theming示例通过sencha触摸

问题描述

我正在创建一个应用程序，其中我必须创建弹出窗口，如的一个提示，但不知道我是什么我缺少的野兔是我的代码的标题栏和列表按钮。

  Ext.define（'ov_app.view.HeaderBar'，{
 xtype：'HeaderBar'，
 extends：'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'
}，{
 xtyp e：'container'，
 html：'< img src =resources / images / logo.png>'
}，{
 xtype：'spacer'
 }，{
 iconCls：'home'，
 iconMask：true，
 id：'homeBtn'，
 ui：'plain'，
 action：'push-查看'
} 
] 
} 
}）; 
  

`

和我的控制器代码main.js处理列表按钮上的选项卡操作。

  Ext.define（'ov_app.controller.MainController'，{
 extends：'Ext.app.Controller' ，
 config：{
 control：{
'button [action = push-view]'：{
 tap：'pushViewFunction'
}，
 'button [action = ShowMoreOption]'：{
点击：'togglMenu'
}，
}，
}，
 
 pushViewFunction：function（） {
 ov_app.container.setActiveItem（0）; 
}，
 togglMenu：function（）{
 console.log（hello）; 
} 
 togglMenu：function（button）{
 this.getStyleBubble（）。showBy（button）
}，
}）; 
  

`

当我尝试点击在顶部的列表按钮上，我在控制台中看到的错误是这个

而且我在模型，视图中的任何文件中没有看到这个getStyleBubble函数的任何定义，控制器，存储目录。所以它定义在任何触摸目录文件或我错过了一些东西。

解决方案

如果您下载整个源代码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，
宽度：200，
 //居中：true，
 styleHtmlContent：true，
 html：'< p> hello虚拟内容在弹出框< / p>'，
可滚动：true 
}）; 
} 
 this.overlay.showBy（button）; 
  

`

I am creating an app in which I have to create the popup like sencha touch theming expample to select the navigation items.

I tried to see its code on github for a hint but don't know what I am missing hare is my code for header bar and the list button.

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'
        }
    ]
}
});

`

and code for my controller main.js to Handel the tab action on list button.

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)
},
});

`

when I try to click on the list button on the top the error i see in my console is this

and also I didn't see any definition for this 'getStyleBubble' function in any of the file in model, views, controller, store directories. So is it defined in any touch directories files or I am missing something.

解决方案

There is no getStyleBubble() function deceleration in the controllers file also not in any file if you download the whole source code zip folder I think they have not uploaded complete source code. But i found solution to my answer. I have to create a new panel and make it toggle with the click of the list button like this.

 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);

`

这篇关于sencha touch如何使导航像Touch-Theming示例通过sencha触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！