如何从上一页导航回主页按钮
How to navigate back to home button from my last page
Ext.define('MyApp.view.ui.MyPanel', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
layout: {
type: 'card',
animation: {
type: 'slide',
}
},
items: [
/************** panel home ***************/
{
xtype: 'panel',
id:'homePanel',
layout: {
type: 'card',
animation: {
type: 'slide'
}
},
items : [
{
xtype: 'panel',
items : [{
xtype: 'toolbar',
items : [
{
xtype: 'image',
docked: 'left',
html: '<div class="applogo"><img src="../images/logo.png"/></div>',
ui: 'light'
},
{
xtype: 'button',
docked: 'right',
html: '<img src="../images/about_us.png"/>',
id: 'BtnInfo',
itemId: 'BtnInfo',
style: '',
handler:function(){
Ext.getCmp('homePanel').setActiveItem('aboutusPanel');
}
},
]
},
{ xtype: 'panel',
height: 136,
items: [{
xtype: 'carousel',
id:'HomeCarousel',
height: 136,
items: [
{
title: 'title card 1',
html: '<img src="../images/image_5.png"/>'
},
{
title: 'title card 2',
html: '<img src="../images/image_2.png"/>'
},
{
title: 'title card 3',
html: '<img src="../images/image_3.png"/>'
},
{
title: 'title card 4',
html: '<img src="../images/image_4.png"/>'
}
]
}],
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Locations</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>',
id: 'BtnLocationsHome',
itemId: 'BtnLocationsHome',
text: 'Locations',
handler:function(){
Ext.getCmp('homePanel').setActiveItem('locationPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/services.png" align="left"/></span><span class="list_text">Services</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
itemId: 'BtnServices',
text: 'Services',
handler: function() {
Ext.getCmp('homePanel').setActiveItem('servicesPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/downloads.png" align="left"/></span><span class="list_text">Downloads</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>',
id: 'BtnDownloads',
itemId: 'BtnDownloads',
text: 'Downloads',
handler: function() {
Ext.getCmp('homePanel').setActiveItem('downloadPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/promotions.png" align="left"/></span><span class="list_text">Promotions</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>',
id: 'BtnPromotions',
itemId: 'BtnPromotions',
text: 'Promotions',
handler: function() {
Ext.getCmp('homePanel').setActiveItem('promotionPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/coupons.png" align="left"/></span><span class="list_text">Coupons</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
itemId: 'BtnCoupons',
text: 'Coupons',
handler: function() {
Ext.getCmp('homePanel').setActiveItem('couponPanel');
}
}
]
}
]},
/* home panel end */
/**************** location **********************/
{
xtype: 'panel',
id:'locationPanel',
layout: {
type: 'card',
animation: {
type: 'slide'
}
},
items : [
{
xtype: 'panel',
items : [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: 'Locations',
items: [
{
xtype: 'button',
docked: 'left',
html: '<img src="../images/back_arrow.png"/>',
id: 'BtnBackLoc',
itemId: 'BtnBackLoc',
handler: function() {
Ext.getCmp('homePanel').setActiveItem(0);
//this.getParent().parent.setActiveItem('homePanel')
//Ext.getCmp('locationPanel').setActiveItem(0);
}
},
{
xtype: 'button',
docked: 'right',
html: '<img src="../images/home.png"/>',
id: 'LocationBtnHome',
handler: function() {
Ext.getCmp('homePanel').setActiveItem(0);
}
}
]
},
{
xtype: 'panel',
items: [
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Showrooms</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
id: 'BtnShowroomLoc',
itemId: 'BtnShowroomLoc',
handler:function(){
Ext.getCmp('locationPanel').setActiveItem('showroomPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Service Centers</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
id: 'BtnServiceCenterLoc',
itemId: 'BtnServiceCenterLoc',
handler:function(){
Ext.getCmp('locationPanel').setActiveItem('servicecenterPanel');
}
},
{
xtype: 'button',
height: 45,
html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Driving Schools</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>',
id: 'BtnDriveLoc',
itemId: 'BtnDriveLoc',
handler:function(){
Ext.getCmp('locationPanel').setActiveItem('drivingschoolPanel');
}
}
]
}
]
}
]
},
/* panel location end */
只需在后退按钮处理程序中使用setActiveItem();函数。在设置活动项功能中，只需提及您的主面板。
相关文章：
- window.onpopstate不工作;当我导航回页面时，不会发生任何事情
- 在主页上时，我的整个导航都会突出显示
- 如何导航回搜索页面
- 只有当我导航回窗口时，angular ng show才有效
- 如何限制用户导航回以前的页面并刷新
- Angularjs 应用程序不会使用 ui-router 路由回主页
- PagerJS刷新导航回第一页
- 如何从外部网页导航回使用 pushState 创建的伪 URL
- 警报在使用jQuery Mobile时导航到主页
- 阻止用户使用主干网导航回特定路线
- 如何从上一页导航回主页按钮
- 如何使用index.html、ui.router和重定向回主页
- 如何在导航栏(主页)隐藏链接
- 在Ionic中导航回主屏幕而不显示后退按钮
- 用锚标记链接回主页
- 导航回上一页时Ajax调用不起作用
- 记住从第二页导航回第一页时的滚动位置
- 导航回 AngularJs 中先前选择的选项卡
- 使用强制重新加载或导航回主页时，背景图像大小调整不起作用
- 从子页面导航到主页并滚动到 id 的方法
