隨筆 - 17  文章 - 84  trackbacks - 0
          <2012年3月>
          26272829123
          45678910
          11121314151617
          18192021222324
          25262728293031
          1234567

          如非特別說明,所有文章均為原創。如需引用,請注明出處
          Email:liangtianyu@gmail.com
          MSN:terry.liangtianyu@hotmail.com

          常用鏈接

          留言簿(4)

          隨筆分類(12)

          隨筆檔案(17)

          最新隨筆

          搜索

          •  

          積分與排名

          • 積分 - 51902
          • 排名 - 962

          最新評論

          閱讀排行榜

          評論排行榜

          在Ext的原有分頁控件中,服務器端方法是根據傳入的起始數據記錄號(start),和顯示多少條記錄(limit)來返回當前頁記錄的。有時候我們經常是根據當前頁碼(pageIndex),和每頁顯示記錄數(pageSize)來獲取當前頁數據,下面就是我根據需要自己寫的一個對Ext.PagingToolbar的擴展:Ext.PagingToolbarExt。

            1/**
            2 * @author Terry
            3 */

            4
            5Ext.PagingToolbarEx = Ext.extend(Ext.PagingToolbar, {
            6    afterPageText: '/ {0}',
            7    beforePageText: '頁',
            8    displayInfo: true,
            9    displayMsg: '顯示 {0} - {1} / {2}',
           10    emptyMsg: '沒有數據',
           11    firstText: '第一頁',
           12    prevText: '前一頁',
           13    nextText: '后一頁',
           14    lastText: '最后一頁',
           15    refreshText: '刷新',
           16    
           17    updateInfo: function(){
           18        if(this.displayEl){
           19            var count = this.store.getCount();
           20            
           21            var msg = count == 0 ? this.emptyMsg : String.format(this.displayMsg, this.cursor, this.cursor + count - 1this.store.getTotalCount());
           22            
           23            this.displayEl.update(msg);
           24        }

           25    }
          ,
           26    
           27    onLoad: function(store, r, o){
           28        if(!this.rendered){
           29            this.dsLoaded = [store, r, o];
           30            
           31            return;
           32        }

           33        
           34        if(!o.params || this.store.getTotalCount() == 0){
           35            this.cursor = 0;
           36        }

           37        else{
           38            this.cursor = (o.params[this.paramNames.start] - 1* this.pageSize + 1;
           39        }

           40        
           41        var d =this.getPageData(), ap = d.activePage, ps = d.pages;
           42        
           43        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
           44        this.field.dom.value = ap;
           45        
           46        this.first.setDisabled(ap == 1 || ps == 0);
           47        this.prev.setDisabled( ap == 1 || ps == 0);
           48        this.next.setDisabled(ap == ps || ps == 0);
           49        this.last.setDisabled(ap == ps || ps == 0);
           50        this.loading.enable();
           51        this.loading.setDisabled(ps == 0);
           52        this.updateInfo();    
           53    }
          ,
           54    
           55    getPageData: function(){
           56        var total = this.store.getTotalCount();
           57        
           58        return {
           59            total: total,
           60            activePage: total != 0 && this.cursor == 0 ? 1 : Math.ceil(this.cursor / this.pageSize),
           61            pages: total !=0 && total < this.pageSize ? 1 : Math.ceil(total / this.pageSize)
           62        }

           63    }
          ,
           64    
           65    onClick: function(which){
           66        var store = this.store;
           67        var d = this.getPageData();
           68        
           69        switch(which){
           70            case 'first':
           71                this.doLoad(1);
           72                break;
           73            case 'prev':
           74                this.doLoad(Math.max(1, d.activePage - 1));
           75                break;
           76            case 'next':
           77                this.doLoad(Math.min(d.pages, d.activePage + 1));
           78                break;
           79            case 'last':
           80                this.doLoad(d.pages);
           81                break;
           82            case 'refresh':
           83                this.doLoad(d.activePage);
           84                break;
           85        }

           86    }
          ,
           87    
           88    onPagingKeydown: function(e){
           89        var k = e.getKey(), d = this.getPageData(), pageNum;
           90        
           91        if(k == e.RETURN){
           92            e.stopEvent();
           93            
           94            pageNum = this.readPage(d)
           95            
           96            if(pageNum >= d.pages){
           97                pageNum = d.pages;
           98            }

           99            else if(pageNum <= 1){
          100                pageNum = 1;
          101            }

          102            
          103            this.doLoad(pageNum);
          104    
          105        }

          106        else if(k == e.HOME || k == e.END){
          107            e.stopEvent();
          108            pageNum = k == e.HOME ? 1 : d.pages;
          109            this.field.dom.value = pageNum;
          110        }

          111        else if(k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){
          112            e.stopEvent();
          113            
          114            if(pageNum = this.readPage(d)){
          115                var increment = e.shiftKey ? 10 : 1;
          116                
          117                if(k == e.DOWN || k == e.PAGEDOWN){
          118                    increment *= -1;
          119                }

          120                
          121                pageNum += increment;
          122                
          123                if(pageNum >= 1 & pageNum <= d.pages){
          124                    this.field.dom.value = pageNum;
          125                }

          126            }

          127        }

          128    }

          129}
          );
          130
          131Ext.reg('pagingtoolbarex', Ext.PagingToolbarEx);
          posted on 2007-11-05 08:33 Terry Liang 閱讀(16726) 評論(22)  編輯  收藏 所屬分類: Ext

          FeedBack:
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展[未登錄] 2007-11-05 09:27 凍僵的魚
          不錯哦,那么快就用上Ext2了,正為Ex2的布局頭痛~~跟1.1.1的區別太大了~~  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-05 14:27 Edward's
          請教個問題,我有個TabPanel可以通過add方法來添加panel

          現在要在panel中添加gird,怎么實現  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-05 14:35 Terry Liang
          @Edward's
          所有繼承與Ext.Container的Component都可以添加其他Componet。
          Panel中添加其他Component,最簡單的方法是在items中直接定義。  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-05 17:03 Edward's
          @Terry Liang
          tabsouth.add({
          title:"abc",
          items:new SampleGrid();
          }]
          }).show();
          其中tabsouth是一個tabpanel
          SampleGrid繼承Ext.grid.GridPanel
          執行add方法的時候,不能直接顯示gird出來,需要點擊窗口最大化  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-05 18:02 Terry Liang
          @Edward's
          我覺得是你的GridPanel沒有設置layout的原因  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-05 20:13 Edward's
          @Terry Liang
          恩,的確是layout沒設置。謝謝!  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-05 21:55 Terry Liang
          @Edward's
          不用客氣,有問題多交流!  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-05 22:03 Edward's
          恩,又有問題了
          在一個區域中加載頁面,其中的腳本不會執行  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-09 15:06 Terry Liang
          @Edward's
          這個問題我真沒特別注意過,我覺得應該和Ext的事件模式有關系吧  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-27 10:37 楊雪松
          你好,我想問下:
          如果我想在onClick中,獲得start要怎么操作呢?應該有特定的函數吧!
          謝謝……  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-11-27 11:19 Terry Liang
          @楊雪松
          假如你的start指的是當前頁:
          var d = this.getPageData();
          start = d.activePage;
          指的是起始記錄:
          start = this.cursor;
            回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2007-12-27 22:37 EXT使用者
          你好,我們公司正要使用EXT作一次開發,語言為(.net)
          由于項目比較急,需要有要帶頭來做這個,當然,是有報酬的,東西不復雜,但是需要對EXT比較熟悉,如果有意,請跟我們聯系,報酬面議
          QQ:347106
            回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2008-01-04 11:17 domino初級開發者
          在下剛接觸ext2.0,請教一個關于分頁的問題:
          ext的分頁起始是從0開始計算,domino服務器的起始是從1開始,服務端又不能修改,請問該怎么解決,需要修改ext的什么地方?在下初次接觸ext,望不吝指教  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2008-01-04 11:53 Terry Liang
          @domino初級開發者
          0頁還是第0條記錄?  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2008-01-07 18:13 domino初級開發者
          謝謝Terry Liang,我說詳細些,domino服務器的url數據請求是從1開始,就是說參數start=1是第一條記錄,start=0取不到數據,而ext分頁欄的那些按鈕的計算和請求是從零開始計算的
          我的數據加載代碼是:
          var store = new Ext.data.Store({ //建立數據源
          proxy: new Ext.data.HttpProxy({ //請求地址
          url: viewname + '?ReadViewEntries',
          method: "GET"
          }),
          baseParams:{ //設置初始請求參數
          outputformat: 'JSON',
          count: parseInt(rowsnum)
          },
          reader: new Ext.data.JsonReader({ //Json解析器
          totalProperty: '@toplevelentries', //數據行數
          root: 'viewentry' //數據行標志
          }, [
          {name: 't1', mapping: 'entrydata[0]["text"]["0"]'},
          {name: 't2', mapping: 'entrydata[1]["text"]["0"]'}
          ])
          });

          store.load({params:{start:1 }});
          結果數據就從第二頁開始顯示,而且取不到第一頁的數據

          var bbar = new Ext.PagingToolbar({ //分頁工具條
          pageSize: parseInt(rowsnum),
          store: store,
          displayInfo: true,
          displayMsg: '顯示第 {0} 條到 {1} 條記錄,一共 {2} 條',
          emptyMsg: "沒有記錄"
          });

          因為store.load({params:{start:0}}); 得不到數據,服務端也不能修改,我想修改ext關于分頁請求的代碼,把從0開始計數修改成從1開始計數,但不知該怎么樣改,不知我說明白沒有~~請不吝賜教啊,呵呵  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2008-01-08 08:31 Terry Liang
          @domino初級開發者
          就分頁來說,其實我覺得最重要的是搞清start,limit,cursor,pageSize之間的關系。
          個人建議,你可以參照我的分頁代碼,修改onClick,onPagingKeydown,然后調整其它方法就可以了。
          我有些不明白的地方:store.load({params:{start:1 }}),假如按你所說,服務器端的方法沒錯的話,肯定返回的是第一頁數據,怎么可能顯示第二頁的數據呢?
          如還有問題,可以把可以測試的相關代碼發給我,我可以看一下。  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2008-01-08 09:38 domino初級開發者
          呵呵,謝謝Terry Liang~
          服務器返回的數據沒錯,但是在ext的分頁工具欄上的顯示是錯誤的,比如有四頁數據,頁面加載后ext的分頁工具欄顯示的是“第二頁”,但是上面顯示的其實是是第一頁的數據,因此點分頁工具欄上的下一頁能取到第二頁的數據,但是工具欄顯示的卻是“第三頁”~~點擊工具欄上的“最后一頁”就只能取到倒數第二頁的數據,最后一頁的數據怎么都取不到~~

          也就是說數據是沒問題的,但是ext的分頁欄上的顯示和那些按鈕都有問題。

          這幾天我也在嘗試修改ext的分頁工具欄的代碼,不過由于我接觸ext還不到一個星期,感覺力不從心。嘿嘿~~
          我的MSN:combest-gg×hotmail.com,方便的話請幫忙看下代碼,萬分感謝  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2008-05-16 10:32 孫子兵法
          各位老大,我在做gridPanel分頁時用到了PagingToolbar,但基本上所有的資料都只說了用 ds.load({params:{start:0,limit:10}}); 建立一個HTTP 參數到遠程數據源. 感覺這樣使用數據頁面(頁面提供數據)的方法很原始,我必須在store中 使用 Ext.data.HttpProxy({url:'datapage.aspx'}), 這種方式。
          但我目前后臺AJAX類全寫好的,我用方法var data=getdata(20,25);就可得到服務器從第20條記錄開始的25條數據。所以我把store使用內存模式Ext.data.MemoryProxy(data),就行了。所有測試都OK,但PagingToolbar似乎不支持事件和方法的邦定,幫忙看下面問題DEMO
          =============================================================================================
          Ext.onReady(function(){
          //alert(TMKSOFT.getData(20,20).value); //成功調試Json數據源,服務器Ajax方法,從服務器獲取JSON數據 數據源絕對沒問題

          function getdata(st,pg)
          {
          data=eval('('+TMKSOFT.getData(st,pg).value+')');
          return data;
          }

          var data=getdata(20,20); //初始化調試了下,能成功顯示數據

          var store = new Ext.data.Store({
          proxy: new Ext.data.MemoryProxy(data),
          reader: new Ext.data.JsonReader({
          totalProperty: 'results',
          root: 'rows'
          }, [
          {name: 'id', mapping: 'id'},
          {name: 'name', mapping: 'name'},
          {name: 'organization',mapping: 'organization'},
          {name: 'homepage',mapping: 'homepage'},
          ])
          });

          //store.addListener('load',getdata); 想用Load偵聽,但也失敗

          var colM=new Ext.grid.ColumnModel([{header:'項目編號',dataIndex:'id',sortable:true},
          {header:'項目名稱',dataIndex:'name',sortable:true},
          {header:'開發團隊',dataIndex:'organization',sortable:true},
          {header:'網站地址',dataIndex:'homepage',renderer:showUrl}]);

          var grid = new Ext.grid.GridPanel({
          renderTo:'hello',
          title:"中國Java開源產品及團隊",
          bodyStyle:'width:100%',
          autoWidth:true,
          height:500,
          //width:'100%',
          cm:colM,
          store:store,
          autoExpandColumn:2,
          bbar: new Ext.PagingToolbar({
          id:'pagingtoolbar',
          pageSize: 20,
          store: store,
          displayInfo: true,
          displayMsg: '顯示第 {0} 條到 {1} 條記錄,一共 {2} 條',
          emptyMsg: "沒有記錄"
          })
          });

          //var p1=document.getElementById("ext-gen30").value; //這樣可得到需要從第幾條記錄開始
          //var p2=Ext.getCmp('pagingtoolbar').pageSize; //這樣可得到多少條紀錄
          alert(p1+" + "+p2)
          store.load({callback:getdata}); //每點一下PagingToolbar觸發什么事件,重調我getdata方法獲取新數據,我該怎么寫?
          });  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2008-09-24 15:32 aab
          terry,怎么判斷我點的是哪個翻頁按鈕,下一頁或上一頁呢?  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展[未登錄] 2009-05-21 10:14 conan
          @孫子兵法
          樓主不是給了個很好的方案嗎?只要擴展pagingToolbar,然后覆蓋需要覆蓋的方法就可以了.例如你這里的話只要覆蓋onclick方法就可以了.  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展 2009-10-11 20:59 duansky
          LZ能否好事做到底,干脆把EXT3.0的也擴展一下.我改了一天也沒改成功! 郁悶~  回復  更多評論
            
          # re: Ext 2.0使用:對分頁Ext.PagingToolbar的擴展[未登錄] 2012-03-10 21:16 小杰
          為什么我擴展的不顯示 displayMsg 信息。  回復  更多評論
            

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 古田县| 桂东县| 大姚县| 社会| 金堂县| 桐城市| 华蓥市| 资阳市| 临沭县| 五河县| 府谷县| 红安县| 木里| 大埔县| 德惠市| 道孚县| 锡林郭勒盟| 崇义县| 孝义市| 汨罗市| 且末县| 万荣县| 项城市| 尼木县| 额尔古纳市| 雷州市| 武定县| 托克逊县| 迁安市| 大安市| 抚顺县| 通化市| 霸州市| 卓资县| 凤城市| 酒泉市| 班戈县| 广州市| 甘南县| 西贡区| 海南省|