Question

我有一个Panel，我在其中呈现搜索表单。这有效。我的问题是在该搜索表单下呈现一个List（所以在同一个Panel中）。

这是我到目前为止所做的：

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);
    }
});

我看不到在fieldset（searchform）下呈现的任何内容。可能有什么不对？

Answer 1

大部分时间，当您没有看到组件时，因为您没有为容器或高度设置layout。

You can find more about layout here.

在您的情况下，您希望容器中有两个组件。因此，我建议Vbox layout。

Here's an example

希望这有帮助。

Answer 2

我实际上在项目中使用过这样的东西试试这个...把它放在你的fieldset的items属性中......

        {
            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\'}'
        }

在您的控制器中为搜索字段的keyup事件编写处理程序，以使用相关数据加载存储并切换列表的隐藏属性。希望列表应该与搜索结果一起出现（为我工作并且看起来非常好）。希望这会有所帮助...

在面板中呈现列表

2 个答案: