笔者在做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,

这样就完美解决了!