Container.lookupComponent to accept raw Elements

[Animal]

Sometimes, it's useful just to be able to use raw DIVs or IMGs to add to Containers.

We power users know that they need to be encapsulated by a Component (In fact, a BoxComponent when the Container's layout deals with sizing), but others shouldn't have to bother if all they want to do is add "things" to a layout.

So I propose



lookupComponent : function(comp){
if(typeof comp == 'string'){
return Ext.ComponentMgr.get(comp);
} else if ((comp instanceof Ext.Element) || (comp.nodeType == 1)) {
return new Ext.BoxComponent({
el: comp,
style: {
display: 'block'
}
});
}else if(!comp.events){
return this.createComponent(comp);
}
return comp;
},


Create a BoxComponent out of any raw element being added into a Container.

[aconran]

I like it, makes sense to me.

[Animal]

Yes, there have been so many threads where people have asked "how do I just add an HTML <whatever> element to a Panel?"

In fact, it ought to be able to accept DomHelper specs too:



lookupComponent : function(comp){
if(typeof comp == 'string'){
return Ext.ComponentMgr.get(comp);
} else if ((comp instanceof Ext.Element) || (comp.nodeType == 1)) {
return new Ext.BoxComponent({
el: comp,
style: {
display: 'block'
}
});
} else if (comp.tag) {
return new Ext.BoxComponent({
el: Ext.getBody().createChild(comp),
style: {
display: 'block'
}
});
}else if(!comp.events){
return this.createComponent(comp);
}
return comp;
},


Of course you wouldn't get DomHelper's defaulting to creation of a DIV because it uses presence of a tag property to determine that it's a DomHelper spec rather than a Component config.

So you could



myContainer.add({tag: 'div', cls: 'foo', cn:[...]});

[jack.slocum]

That functionality already exists although it is implemented a little differently.


myContainer.add({
xtype:'box',
autoEl: 'div',
cls: 'my-class'
});

or for DomHelper style:


myContainer.add({
xtype:'box',
autoEl: {
tag: 'div',
cls: 'foo',
cn: [...]
}
});

and for the original (existing element):


myContainer.add({
xtype:'box',
el: 'existing-el'
});

or


myContainer.add({
xtype:'box',
el: someEl
});

The reason why we chose to go this way for more flexible for reuse. As a very very basic example, throw in some css, and you can make simple reusable definitions:


Ext.ux.Spacer = {
xtype: 'box',
autoEl: {cls: 'x-spacer'}
};

then:


...
myContainer.add(Ext.ux.Spacer);
...