Geek asks and answers

Creating xtype in Ext.Define and calling it in TabPanel elements: []

I am new to extjs in general, especially for version 4:

I created a class:

Ext.define('MyPanel', {
    extend:'Ext.panel.Panel',
    views: ["MyPanel"],

    config: {
        width: 200,
        height: 300,
        title: "HELLO"
    },

    constructor:function(config) {
        this.initConfig(config);
        return this;
    },
    alias: 'widget.MyPanel'
});

Next, I want to call this class as XTYPE in tabPanel elements: []:
I liked this:

items: [{
    title: 'Kontakt',
    id: 'kontaktTab',
    closable:true,
    closeAction: 'hide',
    layout: 'fit',
    items:[{
            xtype: "MyPanel"
        }]

Unlucky, all I get is: Cannot create an instance of unrecognized alias: widget.MyPanel"
You should think about that noob ....; -)

Someone please help !!!

+3
source share
4 answers

Germ, did you try to squeeze your nickname. I thought that aliases are always stored and selected in lower case, but not sure about it

+4
source

When you define your view (MyPanel), why did you set the property views?

Ext.define('MyPanel', {
    extend:'Ext.panel.Panel',
    alias: 'widget.MyPanel'
    views: ["MyPanel"],    <------ Why do you need this???
    config: {
        width: 200,
        height: 300,
        title: "HELLO"
    },
    constructor:function(config) {
        this.initConfig(config);
        return this;
    }
});

, requires. :

Ext.define('MyApp.view.Viewport',{
    extend: 'Ext.container.Viewport', 
    layout: 'border',
    requires: [
        'MyPanel'       <--- This will ensure that this view file needs to be loaded
    ],  
    .
    .
    .
    items: [{
        title: 'Kontakt',
        id: 'kontaktTab',
        closable:true,
        closeAction: 'hide',
        layout: 'fit',
        items:[{
            xtype: "MyPanel"
        }]
+7

, -, :

ExtJS. , , , ,

var newMyPanel = Ext.create('widget.MyPanel');

, xtype, :

var myContainer = Ext.create('Ext.panel.Panel',{
    items: [{
        xtype: 'MyPanel'
    }]
});

Ext widget.MyPanel.

, , . (, Perl, )

:

constructor: function() {
     this.callParent(arguments);
     // Your own code here
}

, Rob

+4

, , :

 var panel1 =  Ext.create('Ext.app.myPanel',{title : 'panel 1',height:350});//title and hight are optionals if u have already defined them

:

...
items : [panel1 ]
...

:

 Ext.require([
, 'Ext.app.myPanel'
]);

mypanel.js

,

+3

More articles:


All Articles