【问题标题】:Navigation between pages in Sencha MVC approachSencha MVC 方法中页面之间的导航
【发布时间】:2012-04-03 07:16:20
【问题描述】:

我是煎茶触摸的新手。我从 MVC 模式开始。我想从一个页面导航到另一个页面。在我的控制器中,我编写了一个点击功能。里面的警告框在点击时会起作用,但不会移动到下一个屏幕。我不知道我哪里出错了。请帮忙。 我的 app.js 看起来像这样:

//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>

Ext.application({
name: 'iPolis',

requires: [
    'Ext.MessageBox'
],

views: ['Main','mainmenu','journalsearch'],

controllers: [
    'mainmenu'

],

icon: {
    57: 'resources/icons/Icon.png',
    72: 'resources/icons/Icon~ipad.png',
    114: 'resources/icons/Icon@2x.png',
    144: 'resources/icons/Icon~ipad@2x.png'
},

phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('iPolis.view.Main'));
    Ext.Viewport.add(Ext.create('iPolis.view.journalsearch'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function() {
            window.location.reload();
        }
    );
}
});

mainmenu.js:

Ext.define("iPolis.view.mainmenu", {
extend: 'Ext.form.Panel',
requires: ['Ext.TitleBar','Ext.form.FieldSet'],
id:'menuPanel',
config: {
    fullscreen:true,





    items: [
        {
            xtype: 'toolbar',
            docked: 'top',
            title: 'iPolis',
            items: [
                {
                    //text:'Back',
                    ui:'back',
                    icon: 'home',
                    iconCls: 'home',
                    iconMask: true,
                    handler: function() {
                        iPolis.Viewport.setActiveItem('menuPanel', {type:'slide', direction:'right'});
                    }
                }]
        },

        {
            xtype: 'fieldset',
            title: 'Menu',
            items: [



                {
                    xtype: 'button',
                    text: '<div class="journal">Journal</div>',
                    labelWidth: '100%',
                    name: '',
                    id:'journal',
                    handler: function() {
                       // iPolis.Viewport.setActiveItem('journalPanel', {type:'slide', direction:'left'});
                    }

                }



            ]
        }







    ]
}



});

Journalsearch.js:

Ext.define("iPolis.view.journalsearch", {
extend: 'Ext.form.Panel',
requires: ['iPolis.view.mainmenu','Ext.TitleBar','Ext.form.Panel','Ext.form.FieldSet','Ext.Button'],

id:'journalPanel',

config: {
  //  tabBarPosition: 'bottom',
    layout: {
       // type: 'card',
        animation: {
            type: 'flip'
        }
    },

    items: [
        {
            xtype: 'toolbar',
            docked: 'top',
            title: 'iPolis',
            items: [
                {
                    //text:'Back',
                    ui:'back',
                    icon: 'home',
                    iconCls: 'home',
                    iconMask: true,
                    handler: function() {

                    }
                }]
        }
]
 }
});

控制器 mainmenu.js:

Ext.define('iPolis.controller.mainmenu', { 扩展:'Ext.app.Controller',

requires: [''],

config: {
    control: {


        '#journal': {
            tap: 'onJournalTap'
        }


    }
},

init: function() {

},


onJournalTap: function() {


    alert('i am clicked');

   var a = Ext.getCmp('menuPanel');
  a.setActiveItem(Ext.getCmp('journalPanel'));

}



});

【问题讨论】:

    标签: sencha-touch sencha-touch-2


    【解决方案1】:

    在这个函数中:

    onJournalTap: function() {
    
    
        alert('i am clicked');
    
       var a = Ext.getCmp('menuPanel');
      a.setActiveItem(Ext.getCmp('journalPanel'));
    
    }
    

    尝试使用这个命令:console.log(a),并显示它记录的内容,我会帮助你。

    PS:基本上这就是 Ext.NavigationView 的设计目的。如果您有很多视图并且只想一次设置一个 ACTIVE 视图,让我们将它们全部包含在您的容器中,然后使用 setActiveItem(该视图的索引) 显示它们

    【讨论】:

    • 非常感谢您的回复。在使用这个 console.log(a) 时,我得到:Ext.apply.create.Class。
    • 在编辑器中显示警告:Unresolved function setActiveItem()
    • 你好像还有另外一个视图叫Main,请把app/view/Main.js的源码贴在这里,不然你发过来比较好我是你源代码的压缩文件,我会帮你调试它:)
    • 我已经删除了那个 Main。我用它作为容器来显示我的主菜单,即菜单面板。现在在我的 app.js 中有: var view= Ext.Viewport.add(Ext.create('iPolis.view.mainmenu'));现在我可以访问控制器中的视图。所以我可以使用 view.push();但是我如何将另一个面板传递给 push()???????我实际上扩展了“Ext.navigation.View”而不是面板来使推送工作
    • 基本上这就是 Ext.NavigationView 的设计目的。如果您有许多视图并且只想一次设置一个 ACTIVE 视图,让我们将它们全部包含在您的容器中,然后使用 setActiveItem(index of that view) 显示它们
    猜你喜欢
    • 2015-07-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-25
    • 2021-11-29
    • 2013-02-03
    • 2021-12-10
    • 2018-03-09
    相关资源
    最近更新 更多