0

我的父容器有一个 vbox 布局，有 3 个项目，一个包含静态数据，两个其他列表。我希望我的列表的高度扩展到它们内部内容大小的 100%，我在这里有一个例子。

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

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

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

2 回答 2

2

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

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

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

itemHeight: 50,
variableHeights: false,
于 2013-02-10T04:26:22.550 回答
1

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

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

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

于 2013-02-07T12:43:47.213 回答