如何在我的主页面板中嵌入自定义搜索组件?

时间:2012-11-10 16:43:19

标签: javascript sencha-touch

我想知道如何获得:

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

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

1 个答案:

答案 0 :(得分:0)

Goooooot it!

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