создание xtype в Ext.Define и вызов его в элементах TabPanel: [] - PullRequest
Новая
       25

создание xtype в Ext.Define и вызов его в элементах TabPanel: []

3 голосов
/ 17 мая 2011

Я новичок в extjs в целом, особенно в версии 4:

Я создал класс: 

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

Далее я хочу вызвать этот класс в форме XTYPE в элементах tabPanel: []:
Я сделал так: 

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

Не повезло, все, что я получаю, это: Cannot create an instance of unrecognized alias: widget.MyPanel"
Вы должны подумать, что за нуб .... ; -)

Кто-то, пожалуйста, помогите !!!

Ответы [ 4 ]

7 голосов
/ 17 мая 2011

Когда вы определяете свой вид (MyPanel), почему вы установили свойство 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"
        }]
4 голосов
/ 27 мая 2011

Ах, хе-хе, я что-то полностью упустил из виду:

с псевдонимом вы создаете новую ссылку на класс в списке классов 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 голосов
/ 17 мая 2011

Хм, вы пытались уменьшить псевдоним?Я думал, что псевдонимы всегда хранятся и выбираются в нижнем регистре, но не уверен в этом

3 голосов
/ 09 июня 2011

все, что вам нужно сделать, это объявить это так: 

 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 в папку app

надеюсь, это поможет

...