PDA

View Full Version : AbstractContainer layout with no nested outer/innerCt?



markcooper
28 Jan 2015, 9:39 AM
Hello,

I've been looking for a decent way to make use of some sort of a custom component which I would next other Ext components in without getting extraneous div's inserted into my DOM.

Basic idea could be something like:



Ext.create('ul', {
/*
...other component stuff like listeners, etc.
*/
items: [
{
xtype: 'li',
items: [
{SOME EXT COMPONENT}
]
},
{
xtype: 'li',
items: [
{ANOTHER EXT COMPONENT}
]
}
]
});


Which would render:



<ul>
<li>{{SOME EXT COMPONENT}}</li>
<li>{{ANOTHER EXT COMPONENT}}</li>
</ul>


Any help, including telling me I'm barking up the wrong tree, would be greatly appreciated.

Thank you.

markcooper
28 Jan 2015, 12:19 PM
Ended up solving this (for now) as follows:



Ext.define('Ext.component.UnorderedList', {
extend: 'Ext.Component',

alias: 'widget.ul',

constructor: function(cfg) {
var items = this.items = [].concat(cfg.items),
i = 0,
len = items.length,
children = [];

for(; i < len; i++) {
children = children.concat({tag: 'li', html: ''});
}

delete cfg.items;

this.autoEl = {
tag: 'ul',
children: children
};

this.callParent(arguments);

this.on('afterrender', function(cmp) {
var lis = cmp.el.query('li'),
i = 0,
len = lis.length,
items = this.items,
item;

for(;i < len; i++) {
if((item = items[i]).isComponent) {
item.render(lis[i]);
} else {
Ext.widget(Ext.apply(item, {renderTo: lis[i]}));
}
}
}, this);
}
});



Not marking this as answered yet as this still feels like the (very) wrong way to do this.

markcooper
4 May 2015, 6:33 AM
The above implementation falls on it's face when the content needs to be dynamic. It is looking like a custom layout is the way to go, but I'm having trouble finding a good place to get started. Does anyone have any decent tutorials on creating custom layouts where you're making a structural html change and not just messing with styles?I've also posted on SO:http://stackoverflow.com/questions/29993421/extjs-4-2-2-create-dynamic-unordered-list-containing-ext-components?lq=1