我眼中的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进行修改，就可以继续用默认分分页方法和代理缓存等东西了