Sencha Touch自定义NavigationView

自定控件,类似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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
目标检测(Object Detection)是计算机视觉领域的一个核心问题,其主要任务是找出图像中所有感兴趣的目标(物体),并确定它们的类别和位置。以下是对目标检测的详细阐述: 一、基本概念 目标检测的任务是解决“在哪里?是什么?”的问题,即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态,加上成像时光照、遮挡等因素的干扰,目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题: 分类问题:判断图像中的目标属于哪个类别。 定位问题:确定目标在图像中的具体位置。 大小问题:目标可能具有不同的大小。 形状问题:目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类: Two-stage算法:先进行区域生成(Region Proposal),生成有可能包含待检物体的预选框(Region Proposal),再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法:不用生成区域提议,直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列(YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等)、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例,YOLO将目标检测视为回归问题,将输入图像一次性划分为多个区域,直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征,使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层,通过卷积层提取图像特征,通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域,为人们的生活带来了极大的便利。以下是一些主要的应用领域: 安全监控:在商场、银行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值