问题
I am attempting to create basic ul
in Ext 4.2.2 by defining a class extended from Ext.container.Container
.
Ideally I would like my rendered markup to be something along the lines of:
<ul>
<li>
{any Ext component here}
</li>
...
</ul>
I know I'm missing something in my current implementation that I have based off of Alex Tokarev's answer to: extjs 4 how to wrap children components of container in custom html?
Ext.define('MyUnorderedList', {
extend: 'Ext.container.Container',
requires: [
'MyListItem'
],
alias: 'widget.ul',
defaultType: 'li',
autoEl: 'ul',
renderTpl: [
'{%this.renderChildren(out,values)%}',
{
renderChildren: function(out, renderData) {
// We have to be careful here, as `this`
// points to the renderTpl reference!
var me = renderData.$comp.layout,
tree = me.getRenderTree();
if (tree) {
Ext.DomHelper.generateMarkup(tree, out);
}
}
}
]
});
Ext.define('MyListItem', {
extend: 'Ext.container.Container',
alias: 'widget.li',
autoEl: 'li',
renderTpl: [
'{%this.renderChildren(out,values)%}',
{
renderChildren: function(out, renderData) {
// We have to be careful here, as `this`
// points to the renderTpl reference!
var me = renderData.$comp.layout,
tree = me.getRenderTree();
if (tree) {
Ext.DomHelper.generateMarkup(tree, out);
}
}
}
]
});
The above does render the appropriate HTML, however I am continually getting the following error when attempting to implement this:
Uncaught TypeError: Cannot read property 'dom' of null
which references the following function that is called from Ext.layout.Layout.moveItem
:
target = target.dom || target;
Which in turn comes from renderItems
or renderChildren
.
Basically I'm at my wit's end with this thing and would love some advice on what I'm missing.
[EDIT] If the correct way to handle this is with a custom layout I would greatly appreciate being pointed in the correct direction for that as well.
回答1:
CD.. is this a proper implementation? I'm having trouble finding some decent documentation around this sort of thing.
Ext.define('MyApp.layout.None', {
extend: 'Ext.layout.container.Container',
alias: 'layout.nolayout',
reserveScrollbar: false,
managePadding: false,
usesContainerHeight: false,
usesContainerWidth: false,
usesHeight: false,
usesWidth: false,
childEls: [],
renderTpl: [
'{%this.renderBody(out,values)%}'
],
setupRenderTpl: function (renderTpl) {
var me = this;
renderTpl.renderContainer = me.doRenderContainer;
renderTpl.renderItems = me.doRenderItems;
},
calculate: function(ownerContext) {
//needs to be here as a placeholder
}
});
Ext.define('MyApp.container.ListItem', {
extend: 'Ext.container.Container',
requires: [
'MyApp.layout.None'
],
layout: 'nolayout',
alias: 'widget.li',
autoEl: 'li'
});
Ext.define('MyApp.container.UnorderedList', {
extend: 'Ext.container.Container',
requires: [
'MyApp.container.ListItem',
'MyApp.layout.None'
],
layout: 'nolayout',
alias: 'widget.ul',
defaultType: 'li',
autoEl: 'ul'
});
来源:https://stackoverflow.com/questions/29993421/extjs-4-2-2-create-dynamic-unordered-list-containing-ext-components