sencha touch 2 tabpanel中List的不显示问题,解决方案

笔者在做sencha项目的时候碰到一个需求,就是"好友列表"中分为"未确认好友"和"已确认好友",两个都是一个list,自然想到的就是使用tabpanel来实现.

但是在sencha touch的开发使用过程中,我们总是会碰到不给高度就不显示的问题,非常之恼火,浪费我大把时间研究

笔者在开发这个需求的时候也碰到了,下来就分享一下方案吧:

　　1,先来看看有问题的方案,以下是代码:

　　

Ext.define("mine.view.ListFriendView", {
    extend: "Ext.tab.Panel",
    xtype: "listFriendView",
    requires: [
        'Ext.data.Store'
    ],
    config: {
        tabBarPosition:'top',
        style:'background: #ececec;',
        cls:'x-tab2',
        items: [
            {
                xtype: "toolbar",
                title: "我的好友",
                docked: "top",
                ui: "dark",
                items: {
                    xtype: "button",
                    cls: "backBtn",
                    text: "返回",
                    handler: function () {
                        var backid = Ext.Viewport.getInnerItems().length
                        Ext.Viewport.remove(this.up('listFriendView'), true);
                        Ext.Viewport.setActiveItem(backid - 2);
                    }
                }
            },
            {
　　　　　　　　　 xtype:"list",
                title:'未确认好友',
　　　　　　　　　　emptyText:"没有数据",
                scrollable: true,
　　　　　　　　　itemTpl:"........."
            },
            {
　　　　　　　　　 xtype:"list",
                title:'已确认好友',
　　　　　　　　　emptyText:"没有数据",
                scrollable: true,
　　　　　　　　　itemTpl:"........."
            }
        ]
    }

})

这样写的话,如果不给定list的高度,那么这个list是不会被显示出来的.

但是给的高度要是太小,List数据显示不完全,给的太高,如果没有数据的话,emptyText就会被挤到可视区域以外(可以用审查元素看到确实存在,但是在很下面,看不到),这就是困扰到我们的问题,

以下是解决方案,请看代码:

Ext.define("mine.view.ListFriendView", {
    extend: "Ext.tab.Panel",
    xtype: "listFriendView",
    requires: [
        'Ext.data.Store'
    ],
    config: {
        tabBarPosition:'top',
        style:'background: #ececec;',
        cls:'x-tab2',
        items: [
            {
                xtype: "toolbar",
                title: "我的好友",
                docked: "top",
                ui: "dark",
                items: {
                    xtype: "button",
                    cls: "backBtn",
                    text: "返回",
                    handler: function () {
                        var backid = Ext.Viewport.getInnerItems().length
                        Ext.Viewport.remove(this.up('listFriendView'), true);
                        Ext.Viewport.setActiveItem(backid - 2);
                    }
                }
            },
            {
                title:'未确认好友',
                scrollable: true,
                xtype:"noMyFriendListView"
            },
            {
                title:'已确认好友',
                scrollable: true,
                xtype:"myFriendListView"
            }
        ]
    }

});

这里将两个需要切换的list写到两个单独的view中

"noMyFriendListView","myFriendListView",

然后在这个tabpanel中使用xtype的方式引用这两个view,

这样就完美解决了!