Как правильно создавать компоненты?
 

пишу вот так:

menuPanel = function () {
        menuPanel.superclass.constructor.call(this, {
        animate:true,
        enableDD:false,
        loader: new Ext.tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
        lines: true,
        title: 'Меню',
        id:'treepanel',
                     region:'west'
                    ,layout:'fit'
                    ,frame:true
                    ,border:false
                    ,width:200
                    ,split:true
                    ,collapsible:true
                    ,collapseMode:'mini',
        root: new Ext.tree.AsyncTreeNode({
                text: 'Autos',
                draggable:false,
                children: json
                }),
        rootVisible:true,

        });
}
Ext.extend(menuPanel,Ext.tree.TreePanel,{});

Ext.reg('menutree', menuPanel);

потом:

var main_viewport = new Ext.Viewport({
        layout:'border',
        title:'Основное окно',
        items:[
            {        id:'treepanel',
                     xtype: 'menutree',
            pnl
         ]
    });

Все работает, но мне не нравится что настройки позиционирования в компоненте. Если я делаю, вот так:

menuPanel = function () {
        menuPanel.superclass.constructor.call(this, {
        animate:true,
        enableDD:false,
        loader: new Ext.tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
        lines: true,
        title: 'Меню',
        id:'treepanel',
        root: new Ext.tree.AsyncTreeNode({
                text: 'Autos',
                draggable:false,
                children: json
                }),
        rootVisible:true,

        });
}
Ext.extend(menuPanel,Ext.tree.TreePanel,{});

Ext.reg('menutree', menuPanel);

//А потом:

    var main_viewport = new Ext.Viewport({
        layout:'border',
        title:'Основное окно',
        items:[
            {        id:'treepanel',
                     xtype: 'menutree',
                     region:'west'
                    ,layout:'fit'
                    ,frame:true
                    ,border:false
                    ,width:200
                    ,split:true
                    ,collapsible:true
                    ,collapseMode:'mini'
            },
            pnl
         ]
    });

То панель не появляется. Как мне сделать основные части системы компонентами без настроек отображения, а потом создавать их экземпляры донастраивая. Мне нравится идея с xtype, но я что-то видимо не понял.

Ext -> class[] Component : namespace { // Объявляем класс потомка родителя суперкласса прототипа
	public method(a) { // Публичный метод класса в JS — самое обычное дело. Как и компонент
		return a;
	}
}
class[][] Component[] extend namespace; // Иницализируем эту хрень
...
Component[] public x = 10; // Мы даже можем добавить свойства в наш потомок родителя суперкласса прототипа!
...
Component foo = new Component; // Запускаем эту хрень
foo :: method( foo :: x ); // 10

JS такой JS.

Вы точно на JS пишете? Я почему, то вижу C# или C++

Синтаксиса с -> и с описанием типа переменной вида:

Component[] public x = 10;

я не встречал/ :blink:

Вы хотите создавть пренастроенные классы или новые компоненты, без участия существующих компонентов extjs?

Вообще основную идею как писать абстрактный преднастроенный класс можно взять отсюда
http://tdg-i.com/364/abstract-classes-with-ext-js
http://blog.extjs.eu/know-how/factor...xt-extensions/

VKS я понял.

1) Просто как я вижу xtype создает новый экземпляр этого класса.

2) Я хочу создать преднастроенный класс в котором не содератся настройки лайоута. А настройки лайоута делать уже в том месте где пишу xtype. Почему, то не получалось.

Описываем абстрактный класс, куда выносим то, что у нас планируется использовать во всех компонентах такого типа, данный абстрактный класс пустой.

Ext.ns('App');

App.AbstractPanel = Ext.extend(Ext.Panel, {
  
    initComponent: function() {
 
        // create config object
        var config = {};
 
        // build config
        this.buildConfig(config);
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
 
        // call parent
        App.AbstractPanel.superclass.initComponent.call(this);
 
    }, // eo function initComponent
    
    buildConfig: function(config) {
        this.buildItems(config);
    }, // eo function buildConfig
    
    buildItems: function(config) {
        config.items = undefined;
    } // eo function buildItems
    
});

Пишем свой преднастроенный класс

Ext.ns('App.Catalog');
App.Catalog.Panel = Ext.extend(App.AbstractPanel, {
    
    buildItems:function(config) {
        config.items = [{
	    title	    : 'Левая панель',
	    region	    : 'west',
	    layout	    : 'fit',
	    width	    : 260,
	    split	    : true,
	    collapsible	    : true,
	    autoScroll	    : true,
	    margins	    : '5 0 5 5',
	    cmargins	    : '5 5 5 5'
        },{
	    title	    : 'Правая панель',
	    region	    : 'center',
	    layout	    : 'fit',
	    margins	    : '5 5 5 0',
	    cmargins	    : '5 5 5 0'
        }];
    } // eo function buildItems

});
// Register xtype
Ext.reg('catalogpanel', App.Catalog.Panel);

Ну и далее уже где вам нужно вызывете catalogpanel через xtype, например в лайоуте, например:

var main_viewport = new Ext.Viewport({
        layout:'border',
        title:'Основное окно',
        items:[{xtype: 'catalogpanel', layout: 'border', border: false}]
    });