javascript - 如何在 Sencha Touch 应用程序中的不同列或框中创建两个列表？

Question

我试图在同一个 View 中创建两个列表，我将 View 分隔在两个弹性框中，其中包含每个列表，但它无法正常工作..此实现或建议有任何线索吗？我正在使用 Sencha Touch 2.3.1 框架。

提前致谢。

 /**
 * The home view
 */
Ext.define('xx.view.home.BlocksHome', {
    extend  : 'Ext.Container',
    xtype   : 'blocksHome',
    requires: [
        'Ext.TitleBar',
        'Ext.dataview.List',
        'xx.view.news.News'
    ],
    config  : {
        items: [
            // selection container
            {
                xtype   : 'container',
                cls     : 'home-container',
                flex    : 2,
                layout  : {
                    type : 'hbox',
                    align: 'stretch'
                },
                defaults: {
                    xtype           : 'container',
                    styleHtmlContent: true,
                    flex            : 1
                },
                items   : [
                    // Data Collection
                    {
                        cls  : 'news-container',
                        iconCls: 'inbox',
                        height: 800,
                        layout: 'vbox',
                        items: [
                            {
                                cls  : 'news-collection-header',
                                layout: 'hbox',
                                items: [
                                    {
                                        html: '<h4>' + xx.Text.getText('NEWS') +'</h4>',
                                        flex: 2
                                    },
                                    {
                                        xtype : 'button',
                                        itemId: 'toNewsCollection',
                                        iconCls: 'inbox',
                                        text  : xx.Text.getText('NEWS'),
                                        flex: 1
                                    },
                                    {
                                        xtype: 'news',
                                        layout: 'card'
                                    }
                                ]
                            }
                        ]
                    },
                    // Customers
                    {
                        cls  : 'open-activities',
                        layout: 'vbox',
                        items: [
                            {
                                cls  : 'open-activities-header',
                                layout: 'hbox',
                                items : [
                                    {
                                        html: '<h4>' +       xx.getText('ACTIVITY_LIST_TITLE') +'</h4>',
                                        flex: 2
                                    },
                                    {
                                        xtype   : 'button',
                                        itemId: 'toActivitiesCollection',
                                        iconCls: 'check2',
                                        text    : xx.Text.getText('ACTIVITY_LIST_TITLE'),
                                        flex: 1
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
    });

这里的 View 包含在名为“news”的卡片布局中

Ext.define('xx.view.news.List', {
    extend: 'Ext.dataview.List',
    xtype: 'news',
    requires: [
        'Ext.TitleBar',
        'Ext.plugin.PullRefresh'
    ],

    config: {
        plugins: [
            {
                xclass: 'Ext.plugin.PullRefresh',
                listeners: {
                    painted: function(element) {
                        if (Ext.browser.is.IE) {
                            // position pull to refresh centered
                            Ext.get(element.query('.x-list-pullrefresh')[0]).setStyle('left', (Ext.getBody().getWidth() / 2) - 132 + 'px');
                        }
                    }
                }
            }
        ],
        store: 'News',
        itemTpl: '<div class="newslistline">' +
            '        <div class="newssubject"><tpl if="unread == \'true\'"><span style class="newsNew">new</span></tpl>{subject}</div>' +
            '        <div class="newsupdatedate">{[xx.Helper.formatSAPdate2Str(values.updatedate)]}</div>' +
            '        <div class="newsupdateby">{responsible}</div>' +
            '        <div class="newsattachment {[values.attflag == \'true\'?  \'attachment\' :  \' \']}">' +

            '        </div>' +
            '     </div>',
        emptyText: xx.Text.getText('NEWS_LIST_EMPTY'),
        loadingText: xx.Text.getText('NEWS_LIST_LOADING'),
        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: xx.Text.getText('NEWS_LIST_TITLE')
            }
        ]
    }
});

Answer 1

将 flex:1 添加到每个列表。这是我使用 Sencha Fiddle 创建的一个工作示例。

Ext.application({
name: 'Fiddle',

launch: function() {
    Ext.define('News', {
        extend: 'Ext.data.Model',
        config: {
            fields: ['subject']
        }
    });

    var store1 = Ext.create('Ext.data.Store', {
        model: 'News',
        data: [{
            subject: 'Item1'
        }, {
            subject: 'Item2'
        }]
    });

    var store2 = Ext.create('Ext.data.Store', {
        model: 'News',
        data: [{
            subject: 'Record1'
        }, {
            subject: 'Record2'
        }]
    });

    Ext.define('xx.view.news.List', {
        extend: 'Ext.List',
        xtype: 'news',
        requires: ['Ext.TitleBar'],

        emptyText: 'Empty',
        loadingText: 'Loading',
        config: {
            itemTpl: '<div class="newslistline">{subject}</div>'
        }
    });

    Ext.create("Ext.Container", {
        fullscreen: true,
        tabBarPosition: 'bottom',
        items: [{
            xtype: 'container',
            cls: 'home-container',
            flex: 2,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            defaults: {
                xtype: 'container',
                styleHtmlContent: true,
                flex: 1
            },
            items: [{
                cls: 'news-container',
                iconCls: 'inbox',
                height: 800,
                layout: 'vbox',
                items: [{
                    cls: 'news-collection-header',
                    layout: 'hbox',
                    items: [{
                        html: '<h4>Title</h4>',
                        flex: 2
                    }, {
                        xtype: 'button',
                        itemId: 'toNewsCollection',
                        iconCls: 'inbox',
                        text: 'Something',
                        flex: 1
                    }]
                }, {
                    xtype: 'news',
                    flex: 1,
                    store: store1
                }]
            }, {
                cls: 'open-activities',
                layout: 'vbox',
                items: [{
                    cls: 'open-activities-header',
                    layout: 'hbox',
                    items: [{
                        html: '<h4>Title</h4>',
                        flex: 2,
                        itemTpl: '<div class="newslistline">{subject}</div>'
                    }, {
                        xtype: 'button',
                        itemId: 'toActivitiesCollection',
                        iconCls: 'check2',
                        text: 'Something',
                        flex: 1
                    }]
                }, {
                    xtype: 'news',
                    flex: 1,
                    store: store2
                }]
            }]
        }]
    });
}

});