Sencha Touch自定义NavigationView

来源：互联网发布：乡村旅游数据去哪里找编辑：程序博客网时间：2024/05/21 19:20

自定控件，类似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....");    }});

效果:

0 0