Sencha Touch Lists height stretch to 100% -

Sencha Touch Lists height stretch to 100% -

i have vbox layout parent container , have 3 items, 1 static info , 2 other lists. lists' heights expand 100% of size of content within of them , have illustration of here.

as can see, works great when have info right there , ready serve up, in case, need fetch info 2 lists in callback , set respective store each list. problem if don't specify height, lists collapsed , show no list data. i've tried 'fit' , refresh() view in callback nil seems work. ideas?

this method in controller fill stores:

class="lang-js prettyprint-override">function buildorgview (record, view) { var manageruid = record.get('manageruid'); var uid = record.get('uid'); //get info 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 list component i'd populate:

class="lang-js prettyprint-override">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); } });

the best way found resolve issue multiple number of elements in list height of each element have defined in config , add together height of header (in case 27px). yields desired effect although, it's bit hacky (fit layout should've worked).

class="lang-js prettyprint-override">view.getpeerslist().setheight(recs.length*50 + 27);

i able prepare heights of items using these 2 params in sencha touch 2.1.1:

class="lang-js prettyprint-override">itemheight: 50, variableheights: false,

sencha-touch sencha-touch-2