Sencha touch 2 面板内的列表

Posted 2023-02-25

【中文标题】Sencha touch 2 面板内的列表

【英文标题】：Sencha touch 2 list inside a panel

【发布时间】：2012-05-07 15:18:45

【问题描述】：

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

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

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

这是我在视图上使用的配置

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' 
                    ]
                

            ]
        ,
    ],      

);

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

【问题讨论】：

itemTpl:['title'], ?.. 你为什么要提供 itemTpl 和 array

它可以是根据文档 itemTpl 的数组：String/String[]/Ext.XTemplate 当你有一个多行模板时更容易编辑。

您到底想通过这段代码实现什么？你的代码 o/p 看起来也很奇怪

我在问题中添加了一张图片以更好地描述它，代码的哪一部分对你来说似乎很奇怪，我已经按照 sencha docs 上的示例来了解如何定义所有这些东西。谢谢！

你的整个组件结构看起来很奇怪。这种结构有什么具体原因吗？

【参考方案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' 
             ]

        ,
        ],      
    
);

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

感谢您的宝贵时间。

【参考方案2】：

您是否尝试将容器布局设置为“适合”？基本上它会使用所有剩余的可用高度，这里有一个很棒的 sencha touch 布局指南：http://docs.sencha.com/touch/2-0/#!/guide/layouts 来自文档！

【参考方案3】：

面板应该有vbox布局，列表应该有fit布局并设置flex选项。

如以下示例所示，如果flex 值未设置为按钮，则它应该获得默认大小。

来自documentation：

伸缩意味着我们根据 flex 来划分可用区域 每个子组件...

这是一个例子：

Ext.define('MyApp.view.Main', 扩展：'Ext.tab.Panel'，

config: 
  tabBarPosition: 'bottom',

  items: [
    
      title: 'Welcome',
      iconCls: 'home',

      html: [
        "Some content"
      ].join("")
    ,

    
      title: "About",
      iconCls: 'star',
      layout: "vbox", // this card has vbox layout

      items: [
        docked: 'top',
        xtype: 'titlebar',
        title: 'List'
      ,

      
        xtype: "list",
        layout: "fit", // take as much space as available
        flex: 1, // define flex
        data: [
          name: 'Jamie Avins',  age: 100,
          name: 'Rob Dougan',   age: 21,
          name: 'Tommy Maintz', age: 24,
          name: 'Jacky Nguyen', age: 24,
          name: 'Ed Spencer',   age: 26
        ],
        itemTpl: 'name is age years old'
      ,

      
        xtype: 'button',
        text: "Button"
      

      ]
    
  ]

);

还有截图：

注意：我正在学习煎茶触摸，所以我不确定写的是否正确。