sencha touch 自定义cardpanel控件 模仿改进NavigationView …

sencha touch 自定义cardpanel控件 模仿改进NavigationView …

注(

原创地址:http://www.cnblogs.com/mlzs/archive/2013/06/09/3128318.html

原创作者:魔狼再世

代码:

/*
*模仿且改进NavigationView
*返回时自动销毁视图,节约内存
*/
Ext.define('ux.CardPanel', {
    extend: 'Ext.Container',
    xtype: 'cardPanel',
    requires: ['Ext.TitleBar'],
    config: {
        //布局,type不可更改
        layout: {
            type: 'card',
            animation: {
                duration: 300,
                easing: 'ease-out',
                type: 'slide',
                direction: 'left'
            }
        },
        //初始视图xtype
        defItemId: null,
        //顶部导航条
        navBar: {
            docked: 'top'
        },
        //顶部控件组,在子视图中配置
        navBarItems: null,
        //返回按钮
        backBtn: {
            align: 'left',
            ui: 'back'
        },
        //返回按钮显示状态,在子视图中配置
        backHide: false,
        //临时cls,在子视图中配置
        pCls: null,
        //底部导航栏、可选格式btmBar:'xtype',在子视图中配置
        btmBar: null
    },
    //初始化
    initialize: function () {
        var me = this;
        //监控界面切换事件
        me.on({
            activeitemchange: me.onActiveitemchange,
            scope: me
        });
        //初始化
        //历史记录
        me.viewStack = [];
        //视图加载状态
        me.viewStatus = {};
        //<debug>
        var layout = me.getLayout(),
        itemId = me.getDefItemId();
        if (layout && !layout.isCard) {
            Ext.Logger.error('CardPanel中layout的布局只能是card布局');
        }
        //</debug>
        if (itemId) {
            this.push(itemId);
            this.upView(this.getActiveItem());
        }
    },
    //更新返回按钮显示状态
    updateBackHide: function (newItem, oldItem) {
        var backBtn = this.getBackBtn();
        if (newItem) {
            backBtn.hide();
        } else {
            backBtn.show();
        }
    },
    //更新底部导航栏
    updateBtmBar: function (newItem, oldItem) {
        if (newItem == oldItem) return;
        if (oldItem) {
            oldItem = this.down(oldItem);
            this.remove(oldItem);
        }
        if (newItem) {
            newItem = Ext.create(newItem);
            this.add(newItem);
        }
    },
    //创建导航栏控件组
    applyNavBarItems: function (newItems) {
        if (!newItems) return false;
        var me = this,
        navItems = [],
        i,
        ln;
        newItems = Ext.Array.from(newItems);
        for (i = 0, ln = newItems.length; i < ln; i++) {
            navItems.push(me.factoryItem(newItems[i]));
        }
        return navItems;
    },
    //更新导航栏控件组
    updateNavBarItems: function (newItem, oldItem) {
        var navBar = this.getNavBar();
        if (oldItem) {
            var i, ln;
            for (i = 0, ln = oldItem.length; i < ln; i++) {
                navBar.remove(oldItem[i]);
            }
        }
        if (newItem) {
            navBar.add(newItem);
        }
    },
    //创建顶部导航栏
    applyNavBar: function (config) {
        return Ext.factory(config, Ext.TitleBar, this.getNavBar());
    },
    //更新临时cls
    updatePCls: function (newItem, oldItem) {
        if (oldItem) {
            this.removeCls(oldItem);
        }
        if (newItem) {
            this.addCls(newItem);
        }
    },
    //更新顶部导航栏
    updateNavBar: function (newItem, oldItem) {
        if (oldItem) {
            this.remove(oldItem);
        }
        if (newItem) {
            this.add(newItem);
        }
    },
    //创建返回按钮
    applyBackBtn: function (config) {
        return Ext.factory(config, Ext.Button, this.getBackBtn());
    },
    //更新返回按钮
    updateBackBtn: function (newItem, oldItem) {
        if (oldItem) {
            this.getNavBar().remove(oldItem);
        }
        if (newItem) {
            this.getNavBar().add(newItem);
            newItem.on({
                scope: this,
                tap: this.onBackButtonTap
            });
        }
    },
    //添加历史记录
    viewStackPush: function (xtype) {
        if (!xtype) return;
        this.viewStatus[xtype] = true;
        this.viewStack.push(xtype);
    },
    //移除最后一个历史记录
    viewStackPop: function () {
        var last = this.getLateViewStack();
        if (!last) return;
        this.viewStatus[last] = false;
        this.viewStack.pop();
    },
    //获得最后一个元素
    getLateViewStack: function () {
        var viewStack = this.viewStack,
        vLength = viewStack.length - 1;
        if (vLength > -1) {
            return viewStack[vLength];
        }
        return null;
    },
    //只保留指定纪录,清空其他纪录
    viewStackOne: function (xtype) {
        this.viewStack = [xtype];
        this.viewStatus = {
            xtype: true
        };
    },
    //界面切换,处理后退
    onActiveitemchange: function (t, newView, oldView) {
        this.upView(newView);
    },
    //更新视图
    upView: function (view) {
        if (!view) return;
        //更新后退按钮
        this.setBackHide(view.config.backHide || this.viewStack.length == 1);
        //更新按钮组
        var items = view.config.navBarItems || false;
        this.setNavBarItems(items);
        //更新cls
        var pCls = view.config.pCls || false;
        this.setPCls(pCls);
        //更新标题
        var title = view.config.title || '';
        this.getNavBar().setTitle(title);
        //更新底部导航栏
        var btmBar = view.config.btmBar || false;
        this.setBtmBar(btmBar);
        //触发被显示视图的事件
        view.fireEvent('showView', view, this);
    },
    //添加视图
    //注意xtype是指alternateClassName
    push: function (xtype, params) {
        var me = this,
        view = this.getActiveItem();
        /*过滤已经添加的视图*/
        if (!this.viewStatus[xtype]) {
            view = Ext.create(xtype, {
                itemId: xtype
            });
            if (params) {
                view.setConfig(params);
            }
            this.viewStackPush(xtype);
            this.setActiveItem(view);
        } else if (view.getItemId() != xtype) {
            this.viewStackPush(xtype);
            this.setActiveItem(xtype);
        }
    },
    //移除最后一个视图
    pop: function () {
        var me = this,
        innerItems = this.getInnerItems(),
        ord = innerItems[innerItems.length - 1];
        if (ord) {
            //触发被移除视图的事件
            ord.fireEvent('removrView', ord, this);
            me.viewStackPop();
            if (!ord.config.isNoHide) {
                //                先隐藏防止出错,在pop时可能会隐藏掉切换动画
                //                如果出现这种情况为子视图添加 isNoHide: true
                ord.hide();
            }
            //强制销毁,防止销毁不完全引发错误
            me.remove(ord, true);
        }
    },
    //除了指定视图,移除其他视图
    popAll: function (xtype, isHide) {
        var me = this,
        innerItems = this.getInnerItems(),
        i,
        ord;
        me.viewStackOne(xtype);
        for (i = innerItems.length - 1; i > -1; i--) {
            /*过滤掉需要显示的视图*/
            ord = innerItems[i];
            if (ord.getItemId() != xtype) {
                if (isHide) {
                    //直接隐藏,去掉界面切换动画
                    //如果后续动作是添加新的视图必须如此,否则会出错
                    ord.hide();
                }
                me.remove(ord, true);
            }
        }
    },
    //返回上一个历史记录
    onBackButtonTap: function () {
        this.pop();
        this.setActiveItem(this.getLateViewStack());
        this.fireEvent('back', this);
    }
});

主视图js:

/*
*主视图,负责视图切换
*/
Ext.define('app.view.Main', {
    extend: 'ux.CardPanel',
    requires: ['app.view.Home', 'Ext.picker.Picker','app.view.uitl.MyBar'],
    xtype: 'main',
    config: {
        id: 'main',
        cls: 'cardPanel',
        backBtn: {
            iconCls: 'reply',
            iconMask: true,
            cls: 'replyBtn'
        },
        //默认显示的界面itemId
        defItemId: 'home'
    } 
 });

子视图js:

Ext.define('app.view.message.List', {
    alternateClassName: 'messageList',
    extend: 'Ext.List',
    xtype: 'messageList',
    requires: ['Ext.plugin.ListPaging'],
    config: {
        cls: 'list',
        //标题
        title: '校园资讯',
        //用于控制navBarItems中的css
        pCls: '',
        //底部导航栏,直接填写alternateClassName
        btmBar: 'myBar',
        //解决pop时没有切换效果的问题
        isNoHide: true,
        //额外的按钮组,只能是按钮组。不能添加其他属性
        navBarItems: [{
            itemId: 'mBtn',
            xtype: 'button',
            align: 'right',
            iconMask: true,
            cls: 'nBg',
            iconCls: 'search',
            action: 'show',
            show: 'messageSearch'
        }],
        plugins: [{
            xclass: 'Ext.plugin.ListPaging'
        }],
        itemTpl: '<div class="title">{Title}</div><div class="sm">时间 {Time}&nbsp;&nbsp;&nbsp;&nbsp;发布来源:{Auth}</div><div class="like"><div class="ico comment">0</div></div>',
        store: 'messageList'
    }
});

Tip:

2013.9.6

更改CardPanel

优化navBarItems结构,itemId不再必须设置

优化for循环结果

修复popAll方法中ord为全局变量的问题

2013.9.6

更改push方法,可以在传入配置参数(只在第一次创建视图时有效)

2013.10.7

优化代码细节

2013.10.10

更改pop方法,将代码this.setActiveItem(this.getLateViewStack());移动到onBackButtonTap方法中,以解决pop后再push无动画效果的问题

转载于:https://my.oschina.net/victorHomePage/blog/169516

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109991.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • DOCKER学习笔记(MAC)

    DOCKER学习笔记(MAC)

  • python安装dlib库_pycharm安装dlib失败

    python安装dlib库_pycharm安装dlib失败dlib库可以实现人脸的检测,所以有些小伙伴在学习人脸识别和检测的时候有可能会用到此库。本人python版本为3.7,在dlib的下载官网上只找到python3.6的版本,当然还有很多文章上写的是安装cmake进行编译再安装boost然后再使用pipinstalldlib安装即可,但是本人试了很多还是不行。3.7版本的dlib资源文件在csdn的其它文章中就有,淘宝0.5元即可下载,下载完成后将文件放置python文件下的Scripts文件夹中即可,结果如图。然后启动cmd,使用pipinstall

  • vue3 axios跨域_vueaxios跨域请求

    vue3 axios跨域_vueaxios跨域请求//vue.config.jsconstpath=require(“path”);constwebpack=require(“webpack”);module.exports={//项目部署的基本路径//默认假设你的应用将会部署在域名的根部//比如,https://www.vue-cli.com///如果你的应用是部署在一个子路径下,那么你需要在这里指定子路径,比如,如果你部署在https://www.my-vue.com/my-ap.

  • CTF—逆向入门题目(超详细)

    CTF—逆向入门题目(超详细)0x00:介绍以下为一些简单的Windows逆向入门题目,帮助一些刚接触逆向又无法下手的朋友,如果对安卓逆向感兴趣的朋友可以看一下我的这一篇安卓逆向入门题目哦:https://blog.csdn.net/CharlesGodX/article/details/866029580×01:题目1.Bugkuctf平台中的逆向题easy_vb:打开文件发现需要输入注册码获取flag…

  • IOCP配合AcceptEX「建议收藏」

    IOCP配合AcceptEX「建议收藏」IOCP配合AcceptEx的例子(1)(2006-7-214:33:00)【收藏】【评论】【打印】【关闭】标签:C++ VC 网络 服务器 在论坛找到的,搬进来备查,呵呵感谢作者的辛苦劳动:)作者:chang290     发表时间:2005-12-1716:38:00     这是在学《Windows网络

  • java正则表达式详解

    java正则表达式详解一、正则表达式术语1)元字符:非一般字符,具有某种意义的字符。如:\bX:\b边界符,以X开始的单词2)正则表达式语法大全 字符 说明 \ 将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如,”n”匹配字符”n”。”\n”匹配换行符。序列”\\”匹配”\”,”\(“匹配”(“。 …

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号