0

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

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

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

我看不到在字段集（搜索表单）下呈现的任何内容。有什么问题？

4

2 回答 2

1

大多数时候，当您看不到组件时，是因为您没有为容器或高度设置布局。

您可以在此处找到有关布局的更多信息。

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

这是一个例子

希望这可以帮助。

于 2012-11-27T23:34:45.333 回答
0

我实际上在一个项目中使用了这样的东西试试这个......把它放在你的字段集的项目属性中......

        {
            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 事件编写一个处理程序，以使用相关数据加载存储并切换列表的隐藏属性。希望列表应该与搜索结果一起出现（为我工作并且看起来相当不错）。希望这可以帮助...

于 2012-11-28T05:27:05.783 回答