Ext.container.Container со своим шаблоном html
Здравствуйте!
Я пытаюсь сделать компонент на основе Ext.container.Container. Компонент по умолчанию генерирует html-код состоящий из трех вложенных div. Как мне сделать чтобы он генерировал мой шаблон, например не три вложенных div, а только один div? Как пользоваться renderTpl я не знаю. Пробовал его менять, но ничего путного не вышло. |
Вроде нашел куда копать. Если я правильно понял, надо создать свой layout и подцепить к новому виду контейнеров.
|
Нашел как сделать. Вот код:
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 много лишнего (например расчет размера контейнера, который в моей конкретной задаче не нужен). |
Наследуйтесь от компонента. Лейауты вам потребуются позже, когда будете встраивать свой кастомный компонент в родительский контейнер.
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() }); Посмотреть пример |
Не могу от компонента наследоваться. Я же не просто так выбрал Контейнер. Там удобные функции: items, query и прочие. То есть в контейнер можно вкладывать другие контейнеры. Весь этот функционал отсутствует в компонентах, которые являются лишь листочками в дереве иерархии контейнеров.
|
Если нужно сохранить возможность расположения элементов вашего контейнера по лейауту, то лучше сделать так:
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ЧтоНибудьСвоё(). Переписывать лейауты не нужно. Ими нужно пользоваться. Пример |
Вариант с шаблоном:
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' } ] }); Пример на Фидл |
Большое спасибо за примеры. Они помогут мне лучше разобраться с наследованием от контейнера.
Уточнение моей задачи: Мне нужно чтобы мой контейнер не генерировал вложенные div. Нужно чтобы он генерировал такую конструкцию: <мой тег с атрибутами как у верхнего div контейнера>СОДЕРЖИМОЕ</мой тег> где содержимое берется из items, чтобы потом можно было работать с Ext.ComponentQuery.query("xtype моего компонента"). Чтобы в items можно было прописывать как свои компоненты, так и сторонние. |
Кстати, спасибо за песочницу! Я и не догадывался о ее существовании. Очень удобное средство для отладки.
|
Не совсем понимаю, что вы создаёте, но если вам нужно встроить контейнер внутрь определённого тега, используйте параметр 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 } ] }); Пример |
Часовой пояс GMT +3, время: 17:39. |