Question

我是sencha的新手，并且标签栏有问题。我的第一个视图有2个按钮，下面有一个列表。点击任何项目列表导航到详细视图，该视图显示底部标签栏，其中有4个图标，并且它有一个返回homeContent视图的后退按钮。

现在，当我在homeContent.js中点击readyButton时，我想导航到ReadyScreenView.js。它现在正在这样做，但是我没有此屏幕顶部的后退按钮，并且它没有标签栏。

如何确保所有视图都有一个标签栏和一个返回上一屏幕的后退按钮。如果我选择底部栏图标，它会导航很好，标签栏仍然存在。只有通过单击按钮完成导航，我才会看到底部的标签栏和后退按钮。任何帮助将受到高度赞赏。

main.js

Ext.define('COSD.view.Main', {
extend: 'Ext.tab.Panel',
requires: [
    'Ext.TitleBar',
],
config: {
    tabBarPosition: 'bottom',
    layout:'card',

    items: [

       {
        xtype:'homeContainer'
       },
       {
        xtype:'readyscreenview'
       },
       {
        xtype:'emergencyscreenview'
       },
       {
        xtype:'allnews'
       }

    ]
}
});

homeContainer.js

Ext.define('COSD.view.HomeContainer',{
extend:'Ext.NavigationView',
xtype:'homeContainer',
config:{
    title:'Home',
    iconCls:'home',


    scrollable:true,
    styleHtmlContent:true,
    styleHTMLCls:'home',
    html:[].join(""),

    items:[


        {
            xtype:'newsContent'
        }
    ]

}

})

homeContent.js

Ext.define('COSD.view.HomeContent',{
extend:'Ext.Panel',
xtype:'newsContent',
config:{
    title:'San Diego County Emergency ',
    iconCls:'home',
    cls:'toolbar',
    layout:'vbox',

    items:[

            {

                xtype: 'button',
                id:'readyButton',
                  style:'border-radius:0',
                  cls:'ReadyImageButton',
                pressedCls:'ReadyImageButtonSelected',


    html:'<div class="mainbutton-container-green"> <div class="mainbutton-thumb"><img src="resources/images/AppHome_ReadyIcon-Default Platform.png" /></div><div class="mainbutton-content"><i> <h3 class="mainbutton-title">ReadySanDiego</h3><p>Plan, Prepare </p></i></div></div>',

           },
           {

                xtype: 'button',
                id:'emergencyButton',
                  style:'border-radius:0',
                  cls:'EmergencyImageButton',
               pressedCls:'EmergencyImageButtonSelected',

                html:'<div class="mainbutton-container-red"> <div class="mainbutton-thumb"><img src="resources/images/AppHome_EmergencyIcon-Default Platform.png" /></div><div class="mainbutton-content"><i> <h3 class="mainbutton-title">Emergency</h3><p>News, Maps, Shelters </p></i></div></div>',


           },
           { 

                xtype: 'label',
                cls:'NewsUpdate',
                html: 'News Updates'
            }, 
            { 

                xtype: 'label',
                cls:'LatestNews',
                //autoEl:{id:'timediv'}
                html: '<div id="timediv">Latest News | Refreshed: 8/2/2013 10:36:26 AM</div>'
            }, 

        {
                xtype:'list',
                id:'newslistContent',
                loadingText: "loading...",
                emptyText: '<div>No notes found.</div>',
                store:'HomeStore',
                itemTpl:'<div><p>{title}</p><p class="newsItemTitle">{publishedDate}</p></div>',
                 flex: 1,
            plugins: [
        {
            xclass: 'Ext.plugin.PullRefresh',
            pullRefreshText: 'Pull to refresh...',


        },
        {
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true,

        }
    ],
        }
    ]
}
})

ReadyButtonController.js

Ext.define('COSD.controller.ReadyButtonController', {
extend: 'Ext.app.Controller',

config: {
    control: {
        '#readyButton': {
            // On the tap event, call onNewTap
            tap: 'onNewTap'
        }
    },

},

launch: function() {
  },

onNewTap: function() {


                        Ext.Viewport.animateActiveItem({xtype: 'readyscreenview'},{type: 'slide',direction: 'left'});


}
});

ReadyScreenView.js

Ext.define('COSD.view.ReadyScreenView', {
extend: 'Ext.Container',
xtype:'readyscreenview',

config: {
    title:'Ready',
    iconCls:'home',
    layout: 'vbox',
    scrollable:true,
    styleHtmlContent:true,
    styleHTMLCls:'home',
    html:[].join(""),

    items:[

           {

                xtype:'titlebar',
                cls:'toolbarReady',
                title:'Ready',
                docked:'top',
                ui:'plain',
                style: {
                    color:'#FFFFFF',
                    fontSize:'12pt'
                    }
           }
           ,
            {

                xtype: 'button',
                id:'prepareDisaster',
                  style:'border-radius:0',
                  cls:'NavButtonListing',
                 pressedCls:'NavButtonListingSelected', 
                  //                    html:'<div class="listbutton-container"> <div class="listbutton-thumb"><img src="resources/images/CoSD_PrepareIcon-Default Platform.png"/></img></div><div class="listbutton-content"> <h3 class="listbutton-title">Prepare for Disasters</h3></div></div>',

                html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_PrepareIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Prepare for Disasters</h3></div></div>',

           },
           {

                xtype: 'button',
                id:'makeAPlan',
                style:'border-radius:0',
                cls:'NavButtonListing',
                pressedCls:'NavButtonListingSelected', 
                html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_MakeAPlanIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Make a Plan</h3></div></div>',

           },
           {

                xtype: 'button',
                id:'buildAKit',
                style:'border-radius:0',
                cls:'NavButtonListing',
                pressedCls:'NavButtonListingSelected',
                html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_BuildAKitIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Build a Kit</h3></div></div>',

           },
            {

                xtype: 'button',
                id:'stayInformed',
                style:'border-radius:0',
                cls:'NavButtonListing',
                pressedCls:'NavButtonListingSelected',
                html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_StayInformedIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Stay Informed</h3></div></div>',

           },
              {

                xtype: 'button',
                id:'getInvolved',
                style:'border-radius:0',
                cls:'NavButtonListing',
                pressedCls:'NavButtonListingSelected',
                html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_GetInvolvedIcon-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Get Involved</h3></div></div>',

           },
            {

                xtype: 'button',
                id:'communityReadiness',
                style:'border-radius:0',
                cls:'NavButtonListing',
                pressedCls:'NavButtonListingSelected',
                html:'<div class="ButtonListings-container"> <div class="ButtonListings-thumb"><img src="resources/images/CoSD_CommReadiness-Default Platform.png" /></div><div class="ButtonListings-content"><h3 class="listbutton-title">Community Readiness</h3></div></div>',

           },
           ]
   }

});

Answer 1

您的onNewTap应push homeContainer Ext.define('COSD.controller.ReadyButtonController', { extend: 'Ext.app.Controller', config: { control: { '#readyButton': { // On the tap event, call onNewTap tap: 'onNewTap' } }, refs: { homeContainer: 'homeContainer' } }, launch: function() { }, onNewTap: function() { this.getHomeContainer().push({xtype: 'readyscreenview'}) } }); {{1}}

{{1}}

Sencha Touch 2：从按钮点击加载视图在标题栏上没有底部标签栏和后退按钮

1 个答案: