我眼中的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進行修改,就可以繼續用默認分分頁方法和代理緩存等東西了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM