0
我想將圖像鏈接到不同的視圖。我搜索了Sencha文檔和視頻，但無法解決此問題。 MyApp應用程序包含3次：主，家庭，設置，第一頁1控制器：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/[email protected]',
'144': 'resources/icons/[email protected]'
},
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("")
}
});
當您點擊圖像時，視圖應該改變。那是你想要達到的目標嗎？ – GenieWanted 2013-05-03 13:03:27
yes確切點擊圖片時，視圖應該改變。 Geeniewanted 5月3日在13:03 – 2013-06-17 08:42:58