Sencha Touch自定义NavigationView

最新推荐文章于 2019-07-07 02:34:43 发布

jiangtongcn

最新推荐文章于 2019-07-07 02:34:43 发布

阅读量980

点赞数

分类专栏： WebApp 文章标签： Sencha

本文链接：https://blog.csdn.net/jiangtongcn/article/details/47838083

版权

WebApp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

自定控件，类似NavigationView.更加轻量级，减少内存消耗。

研究使用，以供备查

主要控件:

Ext.define("lab.view.base.NavigationView",{
    extend:"Ext.Container",
    xtype:"navigationView",
    config:{
        layout:{
            type:"card"
        },
        autoDestroy:true,
        items:[{
            xtype:"toolbar",
            title:"标题",
            docked:"top",
            items:[{
                xtype:"button",
                text:"后退",
                docked:"left",
                iconCls:"back",
                ui:"back",
                hidden:true,
                handler:function(){
                    var nav = this.getParent().getParent();
                    nav.doBack();
                }
            }],

        }],
        listeners:[{
            event:"activeitemchange",
            fn:"onActiveitemchange"
        }],
        viewStack:new Array(),
        showAnimation:"slideIn",
        hideAnimation:"slideOut"
    },
    onActiveitemchange:function(self, value, oldValue, eOpts){

        //value.fireEvent("active",value,oldValue);
        //if(oldValue){
        //    oldValue.fireEvent("deactive",value,oldValue);
        //}

    },
    //后退
    doBack:function(){
        var oldView = this.getActiveItem();
        var view = this.getViewStack().pop();
        oldView.fireEvent("deactive",oldView,view,this);
        view.fireEvent("active",view,oldView,this);
        this.setActiveItem(view);
        this.initView(view);
        setTimeout(function(){
            Ext.Viewport.down("navigationView").remove(oldView,true);
        },200);
    },
    //显示新视图
    doForward:function(view){
        //保存当前视图
        var oldView = this.getActiveItem();
        if(oldView){
            this.getViewStack().push(oldView);
            //发送事件
            oldView.fireEvent("deactive",oldView,view,this);
        }


        //设置新的视图
        this.setActiveItem(view);
        this.initView(view);//初始化ui组件元素
        //发送事件
        view.fireEvent("active",view,oldView,this);

    },
    //初始化ui上的组件元素
    initView:function(view){
        var toolbar = this.down("toolbar");
        if(this.getViewStack().length>0){
            toolbar.down("button[ui=back]").show();
        }else{
            toolbar.down("button[ui=back]").hide();
        }

        if(view.getTitle){
            toolbar.setTitle(view.getTitle());
        }
        //清除之前右侧的按钮
        var oldbtns = toolbar.query("button[docked=right]");
        Ext.each(oldbtns,function(btn){
            toolbar.remove(btn);
            btn.destroy();
        });
        if(view.getNavbtn){
            var navbtns = view.getNavbtn();
            if(!navbtns instanceof Array){
                navbtns=[navbtns];
            }
            Ext.each(navbtns,function(btn){
                toolbar.add({
                    xtype:"button",
                    docked:"right",
                    iconCls:btn,
                    handler:function(){
                        view.fireEvent(btn+"tap",this,view);
                    }
                });
            });
        }
    }
});

Ext.define("lab.view.NavMain",{
    extend:"lab.view.base.NavigationView",
    xtype:"navmain",
    initialize:function(){
        this.doForward(Ext.create("lab.view.Main"));
    }
});

来看一个使用doForward方法的视图

调用代码：

        listd:{
                itemtap:"onItemtap"
            }
        }
    },
    onItemtap:function(list, index, target, record, e, eOpts ){
        var noticeCard = Ext.create("lab.view.NoticeCard");
        noticeCard.setData(record.data);
        Ext.Viewport.down("navmain").doForward(noticeCard);
    },

被显示的视图：

Ext.define("lab.view.NoticeCard", {
    extend: "Ext.Container",
    config: {
        title: "公告信息",
        navbtn: ["add"],
        tpl: "<tpl><h3>{title}</h3><h5>{content}</h5><h5>{publishdate}</h5></tpl>",
        listeners: [{
            event: "active",
                fn: function (self, oldValue) {
                    console.log("view lab.view.NoticeCard receive event active...");
                }
            },
            {
                event: "deactive",
                fn: function (self, oldValue) {
                    console.log("view lab.view.NoticeCard receive event deactive...");
                }
            },{
                event:"addtap",
                fn:"onAddtap"
            }]
    },
    onAddtap:function(self){
        console.log("view NoticeCard's add button tap....");
    }
});

效果: