Sencha Touch 2 - 当我在第二个视图中点击后退按钮时,为什么导航栏中的额外按钮不会隐藏?

时间:2013-08-13 04:29:39

标签: sencha-touch-2

为什么点击按钮后导航栏中的额外按钮不会隐藏?

我的项目有3个视图 的 1。主页视图
2.分类视图
3. ShowListCategory查看

当我点击“ShowListCategory”中的按钮时。我的额外按钮没有隐藏。我的代码错了?

这是我的代码。

主页视图:

Ext.define('Catalog.view.Home', {
    extend: 'Ext.navigation.View',
    xtype: 'homepanel',
    config: {
        navigationBar: {
            items: [
                {
                    xtype: 'button',
                    text: 'Categories',
                    id: 'category',
                    translate: true,
                    translationKey: 'navigationbar.category',
                    align: 'left',
                    action : 'Categories'
                }
            ]
        },
        title: 'All',
        iconCls: 'list',
        cls: 'home',
        styleHtmlContent: true,
        tabBarPosition: 'bottom',
        items:[
            {
                title: "All Apps",
                xtype: 'list',
                id:'Applist',
                itemTpl: new Ext.XTemplate(
                    '<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
                    '<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
                    '<span style="font-size:16px;">{name}</span><br>',
                    '<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
                    '</div>'

                ),
                store: {
                    autoLoad: true,
                    fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
                    sorters: [{
                        property:'created_at',
                        direction:'DESC'
                    }],
                    proxy: {
                        type: 'jsonp',
                        url: 'http://127.0.0.1:3000/appinfos.json',
                        reader:{
                            type: 'json',
                            rootProperty:'appinfos'
                        }   
                    }
                }
            }
        ]
    }
});

类别视图

Ext.define('Catalog.view.Navigation', {
    extend: 'Ext.navigation.View',
    xtype: 'navigation',
    requires: ['Ext.data.Store'],
    config: {
        navigationBar: false,
        title: 'Catalog',
        ui: 'dark',
        items: [
            {
                xtype: 'list',
                id: 'Catlist',
                itemTpl: '<span style="font-size:16px;" id="cattname">{name}</span>',
                store: {
                    storeId: 'myStore',
                    autoLoad: true,
                    fields: ['id','name'],
                    sorters: [{
                        property:'name',
                    }],
                    proxy: {
                        type: 'jsonp',
                        url: 'http://127.0.0.1:3000/categories.json',
                        reader:{
                            type: 'json',
                            rootProperty:'Catalog'
                        }   
                    }
                }
            }
        ]   
    }
});

ShowListCategory查看

Ext.define('Catalog.view.showSearchCategory', {
    extend: 'Ext.navigation.View',
    xtype: 'showSearchCategory',
    requires: ['Ext.data.Store'],
    config: {
        catid: null,
        navigationBar: false,
        items: [
            {
                xtype: 'list',
                itemTpl: new Ext.XTemplate(
                    '<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
                    '<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
                    '<span style="font-size:16px;">{name}</span><br>',
                    '<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
                    '</div>'

                ),
                store: {
                    autoLoad: true,
                    storeId: 'allapp',
                    fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
                    sorters: [{
                        property:'created_at',
                        direction:'DESC'
                    }],
                    proxy: {
                        type: 'jsonp',
                        url: 'http://127.0.0.1:3000/appinfos.json',
                        reader:{
                            type: 'json',
                            rootProperty:'appinfos'
                        }   
                    }
                }
            }
        ]       
    },
    initialize: function() {
        var sto = Ext.getStore('allapp');
        sto.clearFilter();
        sto.filter('categoryid', this.getCatid());
        this.callParent(arguments);
    }
});

这是我的控制器:

Ext.define('Catalog.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            homepanel: 'homepanel',
            but: 'homepanel #category',
            categoryButton: 'button[action=Categories]', 
            list:'list',
            homepanellist: 'homepanel #Applist',
            navigationlist: 'navigation #Catlist',
            navigation: 'navigation',
            showSearchCategory: 'showSearchCategory'

        },
        control: {
            homepanellist:{
                itemtap: 'showApp'
            },
            categoryButton:{
                tap: 'showCat'
            },
            homepanel: {
                back: 'backButtonHandler'
            },
            navigationlist:{
                itemtap: 'showCatQuery'
            },
            navigation:{
                back: 'backButtonNav'
            },
            showSearchCategory:{
                back: 'backFromCategoryList'
            }
        }
    },

    //called when the Application is launched, remove if not needed
    showApp: function(list,index,element,record) {
        Ext.getCmp('category').hide();
        // this.getBut().setHidden(true);
        var Catname = Ext.get('catname').dom.innerHTML;
        var butDown = '';
        var gal = record.get('gallery');
        var items2 = [];
        if(gal.length > 0){
            for(var i = 0; i < gal.length;i++){
                items2.push({
                    html:'<center><img style="margin-top:10px;" src="http://127.0.0.1:3000/system/gallery_apps/imgs/000/000/'+gal[i].id+'/original/'+gal[i].img_file_name+'" width="200" height="300"></center>'
                }) 
            } 
        }
        // Check OS Mobile
        if(Ext.os.name == "iOS"){
            butDown = "<div style='float:right;position: relative;top: -20px;'><a href='"+record.get('url_ios')+"'><img src='touch/resources/images/d_ios.png' style='width: 100px;float: right;margin-top: -15px;'></a></div>";
        }else{
            butDown = "<div style='float:right;position: relative;top: -20px;'><a href='"+record.get('url_android')+"'><img src='touch/resources/images/d_and.png' style='width: 100px;float: right;margin-top: -15px;'></a></div>";
        }
        // Check OS Mobile
        this.getHomepanel().push({ 
            xtype: 'panel',
            title: 'info',
            scrollable: true,
            styleHtmlContent: true,
            layout: {
                type: 'vbox'
            },
            items: [
                {
                    xtype: 'panel',
                    style: 'margin-left: -1.2em;margin-right: -1.2em;margin-top: -1.2em;',
                    height:100,
                    html: '<div style="width: 100%;height: 100px;padding: 1.2em;border-bottom:2px ridge #C5C7BC;">'+
                        '<div style="float:left;width:85px;">'+
                            '<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/'+record.get('id')+'/original/'+record.get('appicon_file_name')+'" width="75" heigh="75"></img>'+
                        '</div>'+
                        '<div style="word-wrap: break-word;"><b><p style="font-size:15px;margin:0;">'+record.get('name')+'</p></b><p>'+Catname+'</p></div>'+
                        butDown+
                    '</div>'+
                    '<div style="clear:both;"></div>'

                },
                {
                    // xtype:'datascreen',
                    // data:record.data
                    xtype:'carousel',
                    direction: 'horizontal',
                    height:325,
                    style: 'margin-left: -1.2em;margin-right: -1.2em;background-color:#C0C0C0;box-shadow:inset 3px 3px 49px #fafafa;border-bottom:2px ridge #C5C7BC;',
                    listeners:
                    {
                        'afterrender': function(carousel) {
                            carousel.pageTurner = new Ext.util.DelayedTask(function() {
                                if (this.getActiveIndex() == this.items.length - 1) {
                                    this.setActiveItem(0, 'slide');
                                }
                                else {
                                    this.next();
                                }
                                this.pageTurner.delay(6000);
                            }, carousel);
                            carousel.pageTurner.delay(6000);
                        }
                    },
                    items: items2 
                },
                {
                    xtype: 'panel',
                    style: 'margin-left: -1.2em;margin-right: -1.2em;',
                    html: 
                    '<div style="width: 100%;padding: 1.2em;border-bottom:2px ridge #C5C7BC;">'+
                        '<h1 style="font-size:16px;font-weight:bold;color:black;">Description</h1>'+
                        '<div id="deS">'+
                            record.get('description')+
                        '</div>'+
                    '</div>'
                }
            ]
        }); 
    },
    backButtonHandler: function(button){
        Ext.getCmp('category').show();
    },
    backButtonNav: function(button){
        Ext.getCmp('category').hide();
    },
    showCat: function(btn){
        Ext.getCmp('category').hide();
        this.getHomepanel().push(
            {
                xtype: 'panel',
                title: 'Categories',
                scrollable: true,
                styleHtmlContent: true,
                layout: {
                    type: 'fit'
                }, 
                items: [
                    {
                        xtype: 'navigation'
                    }
                ]
            }
        );

        // this.but().setHidden(true);

    },
    backFromCategoryList: function(button){
       Ext.getCmp('category').hide(); 
    },
    showCatQuery: function(list,index,element,record){
        Ext.getCmp('category').hide(); 
        var catid = record.get('id');
        var catname = record.get('name');
        this.getHomepanel().push({
            xtype: 'panel',
            title: catname,
            scrollable: true,
            styleHtmlContent: true,
            layout: {
                type: 'fit'
            }, 
            items: [
                {
                    catid: catid,
                    xtype: 'showSearchCategory',
                }
            ]
        });
    }

});

我检查了我的控制台日志。当我点击ShowListCategory View中的后退按钮时,它将从homepanel返回方法。

1 个答案:

答案 0 :(得分:0)

你必须摧毁它。 并且必须在tapclick之后再次重新创建它 。Ext.getCmp( 'BTN')破坏(); 这里'btn'是按钮的id