Ext.container.Container со своим шаблоном html

[khusamov]

Здравствуйте!

Я пытаюсь сделать компонент на основе Ext.container.Container.

Компонент по умолчанию генерирует html-код состоящий из трех вложенных div.

Как мне сделать чтобы он генерировал мой шаблон, например не три вложенных div, а только один div?

Как пользоваться renderTpl я не знаю. Пробовал его менять, но ничего путного не вышло.

[khusamov]

Вроде нашел куда копать. Если я правильно понял, надо создать свой layout и подцепить к новому виду контейнеров.

[khusamov]

Нашел как сделать. Вот код:

Ext.define('Layout.Svg', {
    	extend: 'Ext.layout.container.Container',
    	alias: 'layout.p',
    	type: 'p',
		renderTpl: ['{%this.renderContent(out,values)%}'],
	});
	
	Ext.define("Container", {
		extend: "Ext.container.Container",
		layout: 'p',
		autoEl: {
			tag: "p",
			style: "color: red;"
		}
	});
	
	Ext.create("Container", {
		renderTo: Ext.getBody(),
		html: "HTML",
		items: [{
			xtype: "component",
			html: "Пример вложения 1 в контейнер"
		}, {
			xtype: "component",
			html: "Пример вложения 2 в контейнер"
		}, {
			xtype: "component",
			html: "Пример вложения 3 в контейнер"
		}]
	});

Он выводит следующий HTML:

<p class="x-container x-container-default x-border-box" style="color: red;" id="ext-comp-1009">
<div class="x-component x-component-default" id="component-1010">Пример вложения 1 в контейнер</div>
<div class="x-component x-component-default" id="component-1011">Пример вложения 2 в контейнер</div>
<div class="x-component x-component-default" id="component-1012">Пример вложения 3 в контейнер</div>
HTML
</p>

Версия Ext JS = 5.1.0

Если я правильно понял, наследоваться нужно не от класса Ext.layout.container.Container, а от класса Ext.layout.Layout. Но в этом случае придется написать много кода на основе кода класса Ext.layout.container.Container. Это сделать нужно, так как в Ext.layout.container.Container много лишнего (например расчет размера контейнера, который в моей конкретной задаче не нужен).

[novikov]

Наследуйтесь от компонента. Лейауты вам потребуются позже, когда будете встраивать свой кастомный компонент в родительский контейнер.

Ext.define('MyComponent', {
            extend: 'Ext.Component',
            alias: 'widget.my-component',
            tpl: [
                '<tpl for="boxes">',
                '<div class="my-wrapper">',
                '<div class="my-content">{content}</div>',
                '</div>',
                '</tpl>'
            ],
            data: {
                 boxes: [
                     {
                         content: '1111111111'
                     },
                     {
                         content: '2222222222'
                     },
                     {
                         content: '3333333333'
                     }
                 ]
            }
        });
        
        
        Ext.create('MyComponent', {
            renderTo: Ext.getBody()
        });

Посмотреть пример

[khusamov]

Не могу от компонента наследоваться. Я же не просто так выбрал Контейнер. Там удобные функции: items, query и прочие. То есть в контейнер можно вкладывать другие контейнеры. Весь этот функционал отсутствует в компонентах, которые являются лишь листочками в дереве иерархии контейнеров.

[novikov]

Если нужно сохранить возможность расположения элементов вашего контейнера по лейауту, то лучше сделать так:

Ext.define('MyContainer', {
            extend: 'Ext.container.Container',
            alias: 'widget.my-container',
            
            config: {
                boxes: []
            },
            
            initComponent: function() {
                
                this.items = [];
                
                Ext.Array.each(this.getBoxes(), function(box) {
                    
                    this.items.push({
                        xtype: 'component',
                        html: box.content
                	});
                    
                }, this);
                
                this.callParent();
                
            }
        });
    
        var myCnt = Ext.create('MyContainer', {
            renderTo: Ext.getBody(),
            boxes: [
                {
                    content: '5555'
                },
                {
                    content: '77777'
                }
            ]
		});

Вместо boxes, можно написать в config и что-нибудь своё. Только потом getBoxes() нужно будет тоже поменять на getЧтоНибудьСвоё().

Переписывать лейауты не нужно. Ими нужно пользоваться.

Пример

[novikov]

Вариант с шаблоном:

Ext.define('MyContainer', {
            extend: 'Ext.container.Container',
            alias: 'widget.my-container',
            
            config: {
                boxes: []
            },
            
            initComponent: function() {
                
                this.items = [];
                
                Ext.Array.each(this.getBoxes(), function(box) {
                    
                    var myItem = Ext.widget({
                        xtype: 'component',
                        tpl: [
                            '<div class="my-wrapper">',
                            '<div class="my-content">{content}</div>',
                            '</div>'
                        ]
                	});
                    
                    myItem.update(box);
                    
                    this.items.push(myItem);
                    
                }, this);
                
                this.callParent();
                
            }
        });
    
        var myCnt = Ext.create('MyContainer', {
            renderTo: Ext.getBody(),
            boxes: [
                {
                    content: '5555'
                },
                {
                    content: '77777'
                }
            ]
		});

Пример на Фидл

[khusamov]

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

Уточнение моей задачи:

Мне нужно чтобы мой контейнер не генерировал вложенные div.
Нужно чтобы он генерировал такую конструкцию:

<мой тег с атрибутами как у верхнего div контейнера>СОДЕРЖИМОЕ</мой тег>

где содержимое берется из items, чтобы потом можно было работать с Ext.ComponentQuery.query("xtype моего компонента"). Чтобы в items можно было прописывать как свои компоненты, так и сторонние.

[khusamov]

Кстати, спасибо за песочницу! Я и не догадывался о ее существовании. Очень удобное средство для отладки.

[novikov]

Не совсем понимаю, что вы создаёте, но если вам нужно встроить контейнер внутрь определённого тега, используйте параметр renderTo или метод render:
http://docs.sencha.com/extjs/5.1/5.1...r-cfg-renderTo

Ext.define('MyContainer', {
            extend: 'Ext.container.Container',
            alias: 'widget.my-container',
            
            config: {
                targetId: null
            },
            
            initComponent: function() {
                
                var target = Ext.get(this.getTargetId());

                var containerEl = target.createChild({
                    tag: target.dom.nodeName,
                    style: target.getAttributes().style
                });
                
                this.renderTo = containerEl;
                
                this.callParent();
                
            }
        });

    
        Ext.widget({
            xtype: 'my-container',
            targetId: 'target',
            layout: 'hbox',
            items: [
                {
                    title: 'Panel 1', flex: 1
                },
                {
            		title: 'Panel 2', flex: 1
                },
                {
            		title: 'Panel 3', flex: 1
                }  
            ]
		});

Пример