更改视图原生应用 Sencha Touch

Posted 2023-02-26

【中文标题】更改视图原生应用 Sencha Touch

【英文标题】：Change view native app Sencha Touch

【发布时间】：2013-05-30 13:27:17

【问题描述】：

我创建了一个非常简单的应用程序来测试带有 Sencha Touch 的原生 android 应用程序。我有两个面板。在第一个面板中点击按钮时，必须打开第二个面板。在我的浏览器中效果很好，但是当我创建一个原生 Android 应用程序时，只显示初始视图。当我点击按钮时，不会显示第二个视图。

这是我的代码：

Ext.application(
views: [
    'MyPanel',
    'MyPanel1'
],
controllers: [
    'MyController1'
],
name: 'MyApp',

launch: function() 

    Ext.create('MyApp.view.MyPanel', fullscreen: true);
 );

Ext.define('MyApp.view.MyPanel', 
extend: 'Ext.Panel',
alias: 'widget.mypanel',

config: 
    items: [
        
            xtype: 'button',
            itemId: 'mybutton',
            text: 'V1'
        
    ],
    listeners: [
        
            fn: 'onMybuttonTap',
            event: 'tap',
            delegate: '#mybutton'
        
    ]
,

onMybuttonTap: function(button, e, eOpts) 
    this.fireEvent('getPan1');

);


Ext.define('MyApp.view.MyPanel1', 
extend: 'Ext.Panel',
alias: 'widget.mypanel1',

config: 
    items: [
        
            xtype: 'button',
            itemId: 'mybutton1',
            text: 'V2'
        
    ],
    listeners: [
        
            fn: 'onMybutton1Tap',
            event: 'tap',
            delegate: '#mybutton1'
        
    ]
,

onMybutton1Tap: function(button, e, eOpts) 
    this.fireEvent('getPan');


);

Ext.define('MyApp.controller.override.MyController1', 
override: 'MyApp.controller.MyController1',

config: 
    refs: 
        myView: 'mypanel',
        myView2: 'mypanel1'
    ,
    control: 
        myView: 
            getPan1: 'getPan1'
        ,
        myView2: 
            getPan: 'getPan'
        
    
,

getPan1: function()
    var a = Ext.create('MyApp.view.MyPanel1', fullscreen: true);
    a.show();
,

getPan: function()
    var a = Ext.create('MyApp.view.MyPanel', fullscreen: true);
    a.show();

);

在我看来，在本机应用程序中，事件未在控制器中捕获。我做错了什么？

【参考方案1】：

试试这个按钮代码：

    xtype : 'button'
    id : 'mybutton',
    text : 'V1',
    listeners : 
        tap : function()
            alert("tapped button");
        
    

或者如果您希望从控制器内部调用该函数（这始终是可取的），那么您的按钮代码将变为 ::

    xtype : 'button'
    id : 'mybutton',
    text : 'V1'

在你的控制器中你会得到以下内容

config : 
    refs : 
        mybutton1 : 'panelID button[text="V1"]'
    ,
    control : 
        mybutton1 : 
            tap : 'tappedButtonFunction
        
    
,

tappedButtonFunction : function()
    alert("tapped this button");
    // Do something

另外，在不使用覆盖的情况下尝试您的代码。它应该工作。我以前从未见过它，您可以覆盖自己的代码，而不仅仅是简单地编码。

【讨论】：

在浏览器中完美运行。但是在本机应用程序中，我没有收到来自控制器的警报。在视图中使用监听器的第一种情况适用于本机应用程序。

那么你不能像我给你的第一个选项那样在视图中使用监听器吗？

如果我在视图中使用监听器，那么我不能使用控制器。

我想我知道我做错了什么。我是否需要在文件中指定哪些视图/控制器/模型/商店都应该在包中？

不完全是。您知道如何在 Ext.Application 代码下的 app.js 文件中指定视图、控制器、模型、商店等的名称吗？好吧，您应该将这些视图/控制器/模型/存储的代码放入它们自己的文件夹中，并使用 Sencha 概述的文件夹结构。如果你不这样做，它们没有使用应用程序逻辑以正确的顺序加载，你的代码找不到它们。

【参考方案2】：

app.js

Ext.application(
views: [
    'MyPanel',
    'MyPanel1'
],
controllers: [
    'MyController1'
],
name: 'MyApp',

launch: function() 
    console.log("appstart");
    Ext.create('MyApp.view.MyPanel', fullscreen: true);


);

app/controller/MyController1.js：

Ext.define('MyApp.controller.override.MyController1', 
override: 'MyApp.controller.MyController1',

config : 
    refs : 
        mybutton : 'mypanel button[text="V1"]'
    ,
    control : 
        mybutton : 
            tap : 'tappedButtonFunction'
        
    
,

tappedButtonFunction : function()
        console.log("Tapped");
        Ext.Msg.alert("Test");
        // Do something
    
);

app/view/MyPanel.js

Ext.define('MyApp.view.MyPanel', 
extend: 'Ext.Panel',
alias: 'widget.mypanel',

requires: [
    'Ext.MessageBox'
],

config: 
    id: 'PanelID',
    items: [
        
            xtype: 'button',
            id: 'mybutton',
            text: 'V1'
        
    ]


);

但是控制器在原生应用中没有捕获到事件。