Question

我的父容器有一个vbox布局，有3个项目，一个是静态数据，另外两个是列表。我希望我的列表的高度扩展到其中内容大小的100％，我有一个例子here。

正如您所看到的，当您拥有数据并准备提供服务时，这非常有用，但在我的情况下，我需要获取回调中两个列表的数据并为每个列表设置相应的存储。问题是如果我没有指定高度，列表将被折叠并且不会显示列表数据。我已经尝试'fit'并刷新（）回调中的视图，但似乎没有任何效果。有什么想法吗？

这是我在控制器中填充商店的方法：

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);
                            }
                        });
                    }
                });
            }
        });
    }
}

这是我要填充的List组件：

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);
    }
});

Answer 1

我发现解决此问题的最佳方法是按照我在config中定义的每个元素的高度，将列表中元素的数量加倍，然后添加标题的高度（在我的情况下为27px）。这产生了预期的效果，虽然它有点hacky（合适的布局应该真的有用）。

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

我能够使用Sencha Touch 2.1.1中的这两个参数来修复项目的高度：

itemHeight: 50,
variableHeights: false,

Answer 2

您可以在设置商店后设置列表的最小高度，如下所示：

list.setMinHeight(Ext.Viewport.getWindowHeight()/2);

或者您可以在列表视图的initialize功能中执行此操作。

Sencha Touch列表高度拉伸至100％

2 个答案: