Sencha Touch Lists height stretch to 100%

Question

I have a vbox layout for my parent container and have 3 items, one with static data and two other lists. I would like my lists' heights expand to 100% of the size of the content inside of them and I have an example of this here.

As you can see, this works great when you have the data right there and ready to serve up, but in my case, I need to fetch the data for the two lists in the callback and set the respective store for each list. The problem is if I don't specify a height, the lists will be collapsed and will show no list data. I've tried 'fit' and to refresh() the view in the callback but nothing seems to work. Any ideas?

This is my method in the controller to fill the stores:

function buildOrgView (record, view) {
    var managerUid = record.get('managerUid');
    var uid = record.get('uid');
    //Get data for org view
    if (managerUid) {
        var managerStore = new People.store.EmployeeDetails();//Ext.data.StoreManager.lookup('mgrDetailsStore');
        managerStore.getProxy().setUrl(People.app.userDetailsUrl + managerUid);
        managerStore.load({
            callback: function (records) {
                var peerStore = new People.store.OrgMembers();
                peerStore.getProxy().setUrl(People.app.orgMembersUrl + managerUid);
                peerStore.load({
                    callback: function (recs) {
                        Ext.each(recs, function(item, idx, allItems) {
                           if (item.get('fullName') == record.get('fullName')) {
                               peerStore.remove(item);
                           }
                        });
                        view.getPeersList().setStore(peerStore);

                        var drStore = new People.store.OrgMembers();
                        drStore.getProxy().setUrl(People.app.orgMembersUrl + uid);
                        drStore.load({
                            callback: function (recs) {
                                view.getDirectReportsList().setStore(drStore);
                            }
                        });
                    }
                });
            }
        });
    }
}

This is the List component I'd like to populate:

Ext.define('People.view.people.OrgList', {
    extend: 'Ext.List',
    xtype: 'orgList',
    config: {
        cls: 'peopleInfo',
        store: 'OrgMembers',
//        scrollable: true,
//        height: 300,
        itemTpl: [
            "<div class='listView small'>",
            "   <tpl if='workforceID != undefined'>",
            "       <tpl if='workforceID == \"phind\"'>",
            "           <div class='avatar notFound user'></div>",
            "       <tpl else>",
            "           <div class='avatar'></div>",
            "       </tpl>",
            "   </tpl>",
            "   <ul class='data'>",
            "      <li><h3>{fullName}</h3></li>",
            "   </ul>",
            "</div>"
        ],
        listeners: [
            {
                fn: 'onPersonTap',
                event: 'itemtap'
            }
        ]
    },
    onPersonTap: function (dataview, newValue, oldValue, eOpts) {
        debugger;
        this.fireEvent('persontap', this, newValue, oldValue, eOpts);
    }
});

occasl occasl · Accepted Answer · 2013-02-10T04:26:22

The best way I found to resolve this issue was to multiple the number of elements in the list by the height of each element as I have defined in config and then add the height of the header (in my case 27px). That yields the desired effect although, it's a bit hacky (fit layout should've really worked).

view.getPeersList().setHeight(recs.length*50 + 27);

I was able to fix the heights of the items using these two params in Sencha Touch 2.1.1:

itemHeight: 50,
variableHeights: false,

Sencha Touch Lists height stretch to 100%

2 Answers