Sencha觸摸面板內的2個列表

Question

我需要一個非常常見的任務，我需要一個列表上方的搜索表單來顯示結果，問題是列表沒有顯示結果，存儲和代理工作正常，因為當我使用firebug來查找列表項時列表的高度始終為0px。

我已經搜索過，解決這個問題的常用方法是使用適合的布局，但在父面板上使用它會使所有看起來都很小，就像使用的寬度是10px一樣。

我不能設置一個固定的高度，因為我希望列表填充剩余的空間，並且當我希望使用按鈕和輸入字段的默認大小時，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' }
                    ]
                }

            ]
        },
    ],      
}
});

這個圖像描述了我想要實現的內容，我通過手動設置高度到列表容器來獲取此屏幕截圖，因為您可以看到它的工作原理問題是列表高度默認情況下不填充表單下方的空間。

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

        },
        ],      
    }
});

如您所見，我有兩個工具欄停靠在頂部，列表填充整個布局。 這是它現在看起來的截圖。

謝謝你的時間。

Answer 2

你嘗試過將容器布局設置為“適合”嗎？基本上它會使用所有剩余的可用高度，這里有一個關於sencha touch布局的精彩指南： http ： //docs.sencha.com/touch/2-0/從文檔中直接＃！/ guide / layouts ！

Answer 3

面板應具有vbox布局，列表應具有fit布局並設置flex選項。

如果示例如下所示，如果未將flex值設置為按鈕，則應獲得默認大小。

從文檔 ：

彎曲意味着我們根據每個子組件的flex來划分可用區域...

這是一個例子：

Ext.define（'MyApp.view.Main'，{extend：'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"
      }

      ]
    }
  ]
}

}）;

截圖：

注意：我正在學習Sencha Touch，所以我不確定寫的是否正確。