3

I am creating a GUI for a webpage using Ext JS 4.1.1. I have tried to create a component ('GeneSearchComponent' below) which I can use in a more complicated layouts. But for some reason I cannot insert an instance of 'GeneSearchComponent' into hpanel. What am I missing in extending the pre-defined 'Ext.panel.Panel' class (and in creating a "widget" of my own)?

If I remove the call to "Ext.create('gene-search-component', ...", everything works; if I put it back in, everything breaks. I wonder why.

(I have not included the definition of 'gene-combobox'. I am pretty convinced that it's not the root cause of my problem.)

Thanks for your time!

Tuomas

Ext.define('GeneSearchComponent', {
    extend: 'Ext.panel.Panel',
    alias: ['gene-search-component'],
    constructor: function(cnfg) {
        this.callParent(arguments);
        this.initConfig(cnfg);
    },
    config: {
        collapsible: true,
        frame: true,
        title: 'Search',
        bodyPadding: '15 15 15 15',
        width: 350,
        layout: {
            type: 'vbox', 
            align: 'left'
        },
        items: [
            Ext.widget('gene-combobox', {
                id: 'comboboxid'
            }),
            Ext.create('Ext.Button', {
                text: 'Search',
                handler: function() {
                    dosomething();
        }})]
    },
    onRender: function() {
        this.callParent(arguments);
    }
});

Ext.application({
    name: 'FW',
    launch: function() {
        var bd = Ext.getBody();
        var div = Ext.get("search_form");

        var hpanel = Ext.create('Ext.panel.Panel', {
            id: 'horizontal-panel',
            title: "HBoxLayout Panel",
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            items: [
                Ext.create('Ext.container.Container', {
                    id: 'another-panel',
                    title: "VBoxLayout Panel",
                    width: 250,
                    layout: {
                        type: 'vbox',
                        align: 'left'
                    },
                    items: [{
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel One',
                        flex: 2
                    },{
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel Two',
                        flex: 1
                    },{
                        xtype: 'panel',
                        width: 250,
                        title: ' Panel Three',
                        flex: 1
                }]}),
                Ext.create('gene-search-component', {
                    id: 'searchPanel',
            })],
            renderTo: div,
        });
    }
});
4

1 回答 1

1

The problem is that you have not given the gene-search-component the widget namespace when configuring its alias.

alias: 'widget.gene-search-component'

Also to echo the comments on your OP you are doing a lot of unnecessary typing creating components in the way that you are. You should make use of the xtype field rather than using Ext.Create everywhere. I've modified your code to show you how much simpler it could be.

http://jsfiddle.net/hzXx8/

于 2012-10-03T12:16:10.180 回答