如何将自定义搜索组件嵌套在主面板中？

Question

嗨，我想知道我如何获得：

Ext.define("GS.view.search", {
extend : 'Ext.form.Panel',
xtype : 'fieldsetform',
requires : [ 'Ext.form.FieldSet' ],

config : {
    width : 350,
    pack : 'start',
    align : 'start',
    items : [ {
        xtype : 'fieldset',

        items : [ {
            xtype : 'searchfield',
            name : 'query',
            placeHolder : 'Beneficios, premios o lugares',
            border : 1
        }, {
            xtype : 'searchfield',
            name : 'query',
            placeHolder : 'Beneficios, premios o lugares',
            border : 1
        } ]

    } ]
}
});

以下面板的内部（Ext.create，不起作用）：

var search = Ext.create("GS.view.search");
Ext.define("GS.view.Home", {
        extend : 'Ext.Panel',
        xtype : "panelhome",
        fullscreen : true,
        layout : 'vbox',
        requires : ['GS.view.search'],

        config : {
            title : 'Home',
            iconCls : 'home',
            cls : 'home',
            scrollable : true,
            stylehtmlContent : true,
            contentEl:'searchid',

            items : [{
                        xtype : 'panel',
                        width : '100%',
                        flex : 1,
                        style : 'background-color: #FFFFF',
                        layout : 'hbox',
                        items : [search]
                    }]
        }
    }); 

非常感谢您提供的任何帮助。

Answer 1

太好了！

Ext.define("GS.view.search", {
extend : 'Ext.Panel',
id : 'searchid',
alias: "widget.search",

requires : [ 'Ext.form.FieldSet' ],

config : {
    width : 350,
    pack : 'start',
    align : 'start',
    items : [ {
        xtype : 'fieldset',

        items : [ {
            xtype : 'searchfield',
            name : 'query',
            placeHolder : 'Beneficios, premios o lugares',
            border : 1
        }, {
            xtype : 'searchfield',
            name : 'query',
            placeHolder : 'Beneficios, premios o lugares',
            border : 1
        } ]

    } ]
}
});

var search = new Ext.create('GS.view.search');

Ext.define("GS.view.Home", {
extend : 'Ext.form.Panel',
xtype : "panelhome",
fullscreen : true,
layout : 'vbox',
requires : ['GS.view.search'],

config : {
    title : 'Home',
    iconCls : 'home',
    cls : 'home',
    scrollable : true,
    stylehtmlContent : true,

    items : [{
        xtype : 'panel',
        width : '100%',
        flex : 1,
        style : 'background-color: #FFFFF',
        layout : 'hbox',
        items : [search]
        }]
}
});