How to make two lists in different columns or boxes in a Sencha Touch app?

Question

I am trying to make two lists in a same view, I am separating the view in two flex boxes and inside of this includes each list but it is not working properly.. any clue of this implementation or suggestion? I am working with Sencha Touch 2.3.1 framework.

Thanks in advance.

 /**
 * 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
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
    });

And here the view include in a card layout named "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')
            }
        ]
    }
});

Your question is way too broad to be answered as is. Including some code might be a good idea — martskins, Apr 27 '15 at 13:22
Hi @AlanStallwood, I have added the news view, basicly in the home I need two boxes with listview in each one. — inane, Apr 27 '15 at 14:35

Alan S · Answer 1 · 2015-04-30T21:17:25.127

Add flex:1 to each list. Here is a working example I created using 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
                }]
            }]
        }]
    });
}

});

Thanks Alan, but at the moment it is not working, I don´t see these list in the boxes, I don´t understand why??? — inane, Apr 28 '15 at 08:05
Thank you very much.... so, Alan, now it is working but the list is empty, strange behavior.. any clue? — inane, Apr 28 '15 at 11:05
I am trying to add the code in my view, but I don´t know what is the best way..I am using MVC...Could you please help me in this implementation? Thanks!!! — inane, Apr 28 '15 at 13:09
I will try to find a solution for this implementation and I will post in the forum. Thanks a lot! — inane, Apr 28 '15 at 13:30

How to make two lists in different columns or boxes in a Sencha Touch app?

1 Answers1