Question

我想将图片链接到不同的视图。我搜索过Sencha文档和视频，但无法解决此问题。 MyApp应用程序包含3个视图：main，home，setting，firstpage 1 controller：maincontroller我想将第一张图片从主页（查看）链接到firstpage（查看）

App.js

Ext.Loader.setPath({
    'Ext': 'touch/src',
    'MyApp': 'app'
});
viewport: {
        layout: {
            type: 'card',
            animation: {
                type: 'fade',
                direction: 'left',
                duration: 300
            }
        }
    }
//</debug>
Ext.application({
    name: 'MyApp',
    requires: [      'Ext.MessageBox'    ],
    views: [        'Main', 'home', 'setting','firstpage'  ],
    controllers: [ 'maincontroller' ],
    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'
    },
    isIconPrecomposed: true,
    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },
    launch: function() {
// Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
        Ext.Viewport.add(Ext.create('MyApp.view.home'));
    },  
    onUpdated: function() {        
            Ext.Msg.confirm(
   "Application Update",   "This application has just successfully been updated to the latest version. Reload now?",
                               function(buttonId) {             
                        if (buttonId === 'yes') {                   
                    window.location.reload();
                                            }                          
            }
                        );                      
                  }
});

maincontroller.js

Ext.define('MyApp.controler.maincontroller', {
    extend: 'Ext.app.Controller',   
    xtype: 'controllerpanel',
     refs : {
        homecontroller : 'firstdiv',        
    },
    views : [    'home', 'firstpage'  ],    
    config: {
        control: {
            '#firstdiv': {
                // On the tap event, call onNewTap
                tap: 'onFirstImageTap'
            }
        }
    },  
    launch: function() {
        // When our controller is launched, create an instance of our User view and add it to the viewport
        // which has a card layout
        Ext.Viewport.add(Ext.create('MyApp.view.home'));                
    },  
    onFirstImageTap: function() {
        // When the user taps on the button, create a new reference of our New view, and set it as the active
        // item of Ext.Viewport
        Ext.Viewport.setActiveItem(Ext.create('MyApp.view.firstpage'));
            }
});

main.js（查看）

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',

    config: {


        items: [  
        {
        xtype: 'homecontainer'
        },
        {
           xtype: 'settingcontainer'
        },
        {
            xtype: 'firstcontainer'
        }
        ]
    }
});

home.js

Ext.define('MyApp.view.home', {
    extend: 'Ext.Container',
    xtype: 'homecontainer', 
    config: {   
    title: 'Home',  
    cls: 'maincss',      
    html: [
                '<div id=firstdiv>',
                '<img src="resources/images/1.jpg" height="25%" width="25%" />',            
                '</div>',   
               '<img src="resources/images/2.jpg" height="25%" width="50%" />',
               '<img src="resources/images/3.jpg" height="25%" width="25%" />',       
                '<img src="resources/images/4.jpg" height="25%" width="25%" />',               
                '<img src="resources/images/5.jpg" height="25%" width="25%" />',        
               '<img src="resources/images/6.jpg" height="25%" width="50%" />',     
               '<img src="resources/images/7.jpg" height="50%" width="25%"/>',  
               '<img src="resources/images/8.jpg" height="25%" width="25%" />',
               '<img src="resources/images/9.jpg" height="25%" width="25%"/>',
               '<img src="resources/images/10.jpg" height="25%" width="25%"/>',
               '<img src="resources/images/11.jpg" height="25%" width="25%"/>',
               '<img src="resources/images/12.jpg" height="25%" width="50%"/>',

               ].join("")
    }
});

firstpage.js

Ext.define('MyApp.view.firstpage', {
     extend: 'Ext.Container',   
      xtype: 'firstcontainer',
    cls: 'setting',
    config: {
        title: 'Setting',
        iconCls: 'settings',     
    html: [
    'first page',
               ].join("")
    }
});

setting.js

Ext.define('MyApp.view.setting', {
    extend: 'Ext.Container',
    xtype: 'settingcontainer',
    cls: 'setting',
    config: {
        title: 'Setting',
    html: [
             'setting page',
               ].join("")
    }
});

Answer 1

这段代码可能会给你一个想法。

Ext.define('MyApp.view.home', {
    extend: 'Ext.Container',
    xtype: 'homecontainer',
    config: {
        title: 'Home',
        cls: 'maincss',
        html: [
            '<div id=firstdiv>',
                '<img src="resources/images/1.jpg" height="25%" width="25%"/>',
            '</div>',
            '<img src="resources/images/2.jpg" height="25%" width="50%" />',
            '<img src="resources/images/3.jpg" height="25%" width="25%" />',
            '<img src="resources/images/4.jpg" height="25%" width="25%" />',
            '<img src="resources/images/5.jpg" height="25%" width="25%" />',
            '<img src="resources/images/6.jpg" height="25%" width="50%" />',
            '<img src="resources/images/7.jpg" height="50%" width="25%"/>',
            '<img src="resources/images/8.jpg" height="25%" width="25%" />',
            '<img src="resources/images/9.jpg" height="25%" width="25%"/>',
            '<img src="resources/images/10.jpg" height="25%" width="25%"/>',
            '<img src="resources/images/11.jpg" height="25%" width="25%"/>',
            '<img src="resources/images/12.jpg" height="25%" width="50%"/>',
         ].join(""),
         listeners: {
            show: function (panel) {
                var el = panel.element,
                    image = el.down('#firstdiv');
                    image.on('tap', function (e, t) {
                        Ext.Viewport.setActiveItem(
                                Ext.create('MyApp.view.firstpage'));
                    }, panel);
                }
            }
        }
    });

Here is a link to the fiddle.

Answer 2

该代码适用于特定的DOM。使用相同的代码，这就是我如何使15个不同的图像打开一个新的视图。

var el = panel.element,
events = el.down('#events');
events.on('tap', function (e, t) {
Ext.Viewport.setActiveItem(Ext.create('OrchardApp.view.Events'));},
panel.animateActiveItem(1, {type:'slide', direction:'left'}));

要在我有事件的地方添加更多图片=将其更改为您希望成为触发器的img的名称。添加任意多个。最后三行复制并粘贴更改视图的名称（在我的情况下，事件和此构建的名称是OrchardApp，因此将其更改为您的任何内容。忽略最后一行。我现在无法使其工作但请添加

panel));

最后

所以，例如，你可以......

events = el.down('#events');
contact = el.down('#contact');
about = el.down('#about');

然后使用您希望导航的视图的其余代码。

希望有所帮助。现在，如果有人能告诉我如何制作动画，我将不胜感激。

将图像链接到不同的视图

2 个答案: