2013-05-28 98 views
-1

我正面臨一個問題,關於的位置加載更多...按鈕sencha touch2。這裏,負載更多按鈕使用ListPaging插件添加從Ext.plugins.Listpaging文檔它指出:sencha touch ListPaging插件「加載更多」按鈕位置問題

在列表的底部添加一個負載更多按鈕。當用戶 按下此按鈕時,數據的下一頁將被加載到 商店中並附加到列表中。

但是,在這裏,加載更多按鈕的列表項出現在列表頂部,而不是底部。 見我的代碼在這裏:

Ext.define('MyApp.view.MyLIst', { 
      extend : 'Ext.dataview.List', 
      xtype : 'mylist', 
      id : 'myList' , 
      requires : [Ext.data.Store','Ext.plugin.ListPaging'], 

      config : { 
       width : '100%', 
       height : '100%', 
       loadingText : 'Loading data...', 
       emptyText : 'No Members', 
       itemTpl : '<div class="mylisttitle">{title}</div>', 
       store : 'mylistStore', 
       plugins : [ 
         { 
         xclass : 'Ext.plugin.ListPaging', 
         autoPaging : false, 
         loadNextPage: function() { 
           console.log('Load more button clicked'); 
          // fire event here 
          } 
         }], 
       masked : false, 
       mode : 'SINGLE', 
       scrollable : { 
        direction : 'vertical', 
        directionLock : true 
       } 
      } 

     }); 

,看看下面的結果: enter image description here

任何想法,我怎麼能顯示在列表的底部相同的按鈕?

感謝

編輯:我已經張貼問題senchatouch論壇上,仍在等待一個解決方案,你可以看到它here

+1

如果您有任何自定義的CSS嘗試禁用它。或者,如果您能夠在小提琴中重現相同的問題,則修復起來會更容易。這是一個工作演示http://jsfiddle.net/blessenm/9ypwk/ – blessenm

回答

1

解決它:

我錯過了這一點:infinite: true

加載更多按鈕現在出現在底部。

感謝@blessenm爲working Demo :-)

2

那樣的陌生。你可以嘗試移除這些屬性(寬度,高度和可滾動),並將「layout:fit」添加到此列表的父級。

+0

韋爾,這是我發佈這個問題後,我第一次嘗試..stil沒有改變:-( –

+1

解決,看到我的答案 –

1

如果您有任何自定義的CSS嘗試禁用它。或者,如果您能夠在小提琴中重現相同的問題,則修復起來會更容易。這是一個工作演示jsfiddle.net/blessenm/9ypwk

Ext.application({ 
    launch: function() { 
     Ext.define('TweetStore', { 
      extend: 'Ext.data.Store', 

      config: { 


     fields: ['from_user', 'profile_image_url', 'text', 'created_at'], 

      pageSize: 25, 
      autoLoad: true, 

      proxy: { 
       type: 'jsonp', 
       url: 'http://search.twitter.com/search.json', 

       pageParam: 'page', 
       limitParam: 'rpp', 

       extraParams: { 
        q: 'sencha' 
       }, 

       reader: { 
        type: 'json', 
        rootProperty: 'results' 
       } 
      } 
     } 
    }); 

    Ext.define('MyApp.list.List', { 
     extend: 'Ext.List', 

     config: { 
      useSimpleItems: false, 
      variableHeights: true, 
      infinite: true, 
      disableSelection: true, 
      allowDeselect: false, 
      store: Ext.create('TweetStore'), 
      loadingText: 'Loading data...', 
      emptyText: 'No Members', 

      plugins: [{ 
       xclass: 'Ext.plugin.ListPaging', 
       autoPaging: false 
      }], 

      itemTpl: Ext.create('Ext.XTemplate', 
       '<div>{text}</div>'), 
      masked: false, 
      mode: 'SINGLE', 
      scrollable: { 
       direction: 'vertical', 
       directionLock: true 
      } 
     } 
    }); 

    Ext.define('MyApp.list.Container', { 
     extend: 'Ext.Container', 
     config: { 
      fullscreen: true, 
      layout: 'vbox', 
      items: [{ 
       xtype: 'titlebar', 
       title: 'Load More Plugin', 
      }, { 
       xclass: 'MyApp.list.List', 
       flex: 1 
      }] 
     } 
    }); 
    Ext.create('MyApp.list.Container'); 
} 
});