javascript - 面板内的 Sencha touch 2 列表

Question

有一个很常见的任务要做，我需要在列表上方的搜索表单来显示结果，问题是列表没有显示结果，商店和代理工作正常，因为当我使用 Firebug 定位时列表中的列表项始终具有 0 像素的高度。

我已经搜索过了，解决这个问题的常用方法是使用合适的布局，但是在父面板上使用它会使所有内容看起来很小，就好像使用的宽度是 10 像素一样。

我无法设置固定高度，因为我希望列表填充剩余空间，而且当我希望使用按钮和输入字段的默认大小时，flex 选项也不会拉伸(stretch)搜索表单。

这是我在 View 上使用的配置

Ext.define('MyApp.view.search.Search', {
extend:'Ext.navigation.View',
xtype: 'search_view',
config:{
    items:[
        {
            fullscreen:true,
            scroll:false,
            xtype:'panel',
            title:'Search',
            items:[
                {
                    xtype:'searchfield',
                    name:'search',
                    label:'Search',
                },
                {
                    xtype:'container',
                    layout:'hbox',
                    width:'100%',
                    margin:'3 0 0 0',
                    defaults:{
                        flex:1
                    },
                    items:[
                        {
                            xtype:'selectfield',
                            options:[
                                {text:'Option 1', value:'opt1'},
                                {text:'Option 2', value:'opt2'}
                            ]
                        },
                        {
                            xtype:'button',
                            text:'Search',
                            action:'search'
                        }
                    ]   
                },
                {
                    xtype:'list',
                    itemTpl:['{title}'],
                    onItemDisclosure:true,
                    plugins:[
                        { xclass: 'Ext.plugin.ListPaging' }
                    ]
                }

            ]
        },
    ],      
}
});

这张图片描述了我想要实现的目标，我通过手动设置列表容器的高度截取了这张截图，正如你所看到的那样，问题是默认情况下列表高度不会填充表单下方的空间.

Answer 1

这就是我最终解决这个问题的方法，它更像是一种解决方法，因为我不得不将布局更改为仅包含列表，并使用工具栏作为搜索选项，这样工具栏控件仅使用他们需要正确绘制自己的最小高度。

Ext.define('MyApp.view.search.Search', {
extend:'Ext.Container',
xtype: 'search_view',
config:{
    fullscreen:true,
    layout:'card'
    items:[
        {
            xtype:'toolbar',
            docked:'top',
            items:[
                {
                    xtype:'searchfield',
                    name:'search',
                    flex:6
                },
                {
                    xtype:'button',
                    action:'search',
                    iconCls:'search',
                    iconMask:true,
                    ui:'simple',
                    flex:1
                }
                    ]
        },
        {
            xtype:'toolbar',
            docked:'top',
            items:[
                {
                    xtype:'selectfield',
                    flex:1,
                    options:[
                        {text:'Option 1', value:'opt1'},
                        {text:'Option 2', value:'opt2'}
                    ]
                }
            ]
        },
        {
             xtype:'list',
             itemTpl:['{title}'],
             onItemDisclosure:true,
             plugins:[
                 { xclass: 'Ext.plugin.ListPaging' }
             ]

        },
        ],      
    }
});

如您所见，我有两个工具栏停靠在顶部，列表填满了整个布局。这是它现在的样子的屏幕截图。

感谢您的宝贵时间。