我想将图像链接到不同的视图。我搜索了 Sencha 文档和视频，但无法解决此问题。MyApp 应用程序包含 3 个视图：主视图、主页、设置、首页 1 个控制器：主控制器我想将第一个图像从主页（视图）链接到首页（视图）
应用程序.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();
}
}
);
}
});
主控制器.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'
}
]
}
});
主页.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("")
}
});
第一页.js
Ext.define('MyApp.view.firstpage', {
extend: 'Ext.Container',
xtype: 'firstcontainer',
cls: 'setting',
config: {
title: 'Setting',
iconCls: 'settings',
html: [
'first page',
].join("")
}
});
设置.js
Ext.define('MyApp.view.setting', {
extend: 'Ext.Container',
xtype: 'settingcontainer',
cls: 'setting',
config: {
title: 'Setting',
html: [
'setting page',
].join("")
}
});