zoukankan      html  css  js  c++  java
  • 我眼中的sencha touch(2013网页装在兜里)

           sencha touch 是Extjs 的手机版,Extjs是创建富客户端的AJAX应用中的重量级框架,sencha touch当然就是面向触摸设备的重量级js框架,

    在做基于桌面的网页时经常用的js库是jquery,Extjs很少用,几乎没用过,1是因为Extjs“重”,加载时间长;2是因为Extjs自称体系学起来难度大,插件没jquery多。

           在phonegap出现后,我开始重视sencha touch这个重量级框架,并且学习了一下,用博客园rss和api做一个小应用,不过还没做完

    sencha touch 的优点

           1:由于phonegap将所有的js、图片、html等资源打包后安装到手机上,和服务器用ajax通信,所以sencha touch “重的”问题就不是问题了,而且sencha touch的稳定性,内存控制等都比较出色

           2:sencha touch 整体上看起来和ASP.NET WebForm 很像,例如 组建化、可视化、拖拉弹唱都支持,作为一个c# coder,理解起来很顺畅

           3:基于事件的机制,在手机上,超级链接的概念已经越来越淡化,事件概念越来越明显,而sencha touch 包含了常用的各种事件模型,整体效果不错

           4:mvc,虽然sencha touch 自吹自擂自己的mvc很nx,可能由于接触时间短,我还没看出这个mvc比asp.net mvc 有那些好的地方,不过mvc为构建复杂的应用提供了良好的支持

           5:类系统,为封装业务逻辑提供了工具,不用再自己折腾公共方法、私有方法 等了

           6:经过我测试我做的一个小demo开始用jqmobi,后来用sencha touch 重写了,发现sencha touch 写稳定性比我自己瞎折腾的好些

    今天下午再弄博客园首页rss,在分页的时候遇到个小麻烦,纠结我一下午

    就是list+ListPaging的时候,页码和每页多少条数据的传参问题,ListPaging 默认是ABC.ASPX?num=1&page=2.。。。。这种参数格式,

    而博客园的api是/feed/1/20/这种url重写的格式,顿时愁怀了,折腾了一下午,还好,sencha touch 是可以查看源码的,搞定了 代码如下

            var feedlist={
                xtype:'list',
                itemTpl:'<h1>{title}@{author}</h1>',
                store: Ext.create("cnblogs.store.feedlist"),
                plugins: [
                    {
                        xclass: 'Ext.plugin.ListPaging',
                        autoPaging: true,
                        listeners:{
                            loadmorecmpadded:function(obj, list, eOpts ){
                                alert('');
                            }
                        }
     
                    }
                ]
     
              }
    Ext.define('cnblogs.store.feedlist', {
        extend: 'Ext.data.Store',
     
        modal:'cnblogs.model.feedlist',
     
     
     
        config: {
            autoLoad: true,
            fields: [
                { name: 'id', type: 'int' },
                { name: 'title', type: 'string' },
                { name: 'summary', type: 'string' },
                { name: 'published', type: 'string' },
                { name: 'author', type: 'string' },
                { name: 'link', type: 'string' },
                { name: 'blogapp', type: 'string' },
                { name: 'diggs', type: 'string' },
                { name: 'views', type: 'string' },
                { name: 'comments', type: 'string' }
     
            ],
            proxy:{
                type: "jsonp",
     
                url : "*********sitehome/paged/1/10",
                extraParams:{
     
                },
                reader: {
                    type: "json",
                    rootProperty: "responseData.feed.entries"
     
                }
            }
        },
        nextPage:function(options ){
            //重写原来的方法
        //alert('- -');
           console.log('- -');
            this._proxy._url='********sitehome/paged/'+(this.currentPage + 1)+'/10'
            this.loadPage(1, options);
        }
    });

         查看源码发现,可以重写nextPage 方法,在nextPage里面对url进行修改,就可以继续用默认分分页方法和代理缓存等东西了

  • 相关阅读:
    Apache的443端口被占用解决方法
    关于变量初始化问题
    浏览无法加载控件
    关于网络数据传输
    java 对象是在什么时候创建的?
    HTML HTTP
    2020 年计划
    Docker 学习
    [腾讯 TMQ] 接口测试用例设计
    pytest + request
  • 原文地址:https://www.cnblogs.com/qqloving/p/3033156.html
Copyright © 2011-2022 走看看