-1

の [もっと読み込む... ] ボタンの位置に関する問題に直面していますsencha touch2。ここでは、 ListPagingプラグインを使用して [さらに読み込む] ボタンが追加され、Ext.plugins.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
                }
            }

        });

以下の結果を参照してください。 ここに画像の説明を入力

リストの一番下に同じボタンを表示するにはどうすればよいですか?

ありがとう

編集：私はsenchatouchフォーラムに問題を投稿しましたが、まだ解決策を待っています。ここで見ることができます

4

3 に答える 3

2

ちょっと奇妙です。これらのプロパティ (幅、高さ、スクロール可能) を削除して、このリストの親に「layout:fit」を追加してみてください。

于 2013-05-28T13:05:10.970 に答える
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');
}
});
于 2013-06-03T07:38:38.263 に答える
1

解決しました：

私はこれを見逃していました: infinite: true

[さらに読み込む] ボタンが下部に表示されるようになりました。

動作するデモをありがとう@blessenm :-)

于 2013-06-03T07:17:15.227 に答える