在面板中呈现列表

Question

我有一个面板，我呈现一个搜索表单。这工作。 我的问题是在该搜索表单下呈现列表（所以在同一个面板中）。

这是我迄今所做的：

Ext.define("TCM.view.UserSearch", 
{ 
    extend: "Ext.form.Panel", 

    requires: 
    [ 
     "Ext.form.FieldSet", 
     "Ext.List" 
    ], 

    xtype: "usersearch", 

    config: 
    { 
     scrollable:'vertical' 
    }, 

    initialize: function() 
    { 
     this.callParent(arguments); 

     var clubsStore = Ext.create('TCM.store.Clubs'); 
     clubsStore.load(); 

     var usersStore = Ext.create('TCM.store.Users'); 

     var searchButton = 
     { 
      xtype: 'button', 
      ui: 'action', 
      text: 'Search', 
      handler: this.onSearchButtonTap, 
      scope: this 
     }; 

     var topToolbar = 
     { 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Search', 
      items: [ 
       { xtype: 'spacer' }, 
       searchButton 
      ] 
     }; 

     var userClub = 
     { 
      xtype: 'selectfield', 
      store: clubsStore, 
      name: 'clubId', 
      label: 'Club', 
      displayField : 'name', 
      valueField : 'id', 
      required: true 
     }; 

     var userList = 
     { 
      xtype: 'list', 
      store: usersStore, 
      itemTpl: '{name}', 
      title: 'Search results' 
     }; 

     this.add([ 
      topToolbar, 
      { 
       xtype: "fieldset", 
       items: [userClub] 
      }, 
      userList 
     ]); 
    }, 

    onSearchButtonTap: function() 
    { 
     console.log("searchUserCommand"); 
     this.fireEvent("searchUserCommand", this); 
    } 
}); 

我什么都看不到正在字段（在searchform）下显现。什么可能是错的？

Answer 1

大多数情况下，当您没有看到组件时，这是因为您没有将layout设置为您的容器或高度。

You can find more about layout here.

在你的情况，你想在你的容器两个部分组成。所以我建议一个Vbox layout。

Here's an example

希望这有助于。

Answer 2

我实际使用这样的事情在一个项目中尝试这个......你的字段集的项目属性将这个......

 { 
      xtype: 'searchfield', 
      clearIcon: true, 
      placeHolder: 'Type Some text' 
     }, 
     { 
      xtype: 'list', 
      hidden:true, //Initially hidden populate as user types something 
      height: '150px', 
      pressedDelay: 1, 
      loadingText: '', 
      store: 'listStore', 
      itemTpl: '{\'What you want to be displayed as per your model field\'}' 
     } 

在你的控制器写的处理程序searchfield的keyup事件用相关数据加载商店并切换列表的隐藏属性。希望列表应该与搜索结果一起出现（为我工作，看起来相当不错）。希望这有助于...