View Full Version : Using Placeholders for Custom Components

27 May 2010, 6:44 AM
I have two custom components that I am using and currently I am modifying the ui.js file to add them to the code. I know! That is not the best way to handle it. What I did was add a placeholder within the Designer (a TextField in place of the custom xDateTime field and a plain Panel in place of a ManagedIFrame panel.

What would be a better way of replacing the placeholders in my initComponent() method of the .js file instead of directly modifying the items structure in the .ui.js file?


27 May 2010, 7:14 AM
Yikes... :-) You can take what I said here (http://www.extjs.com/forum/showthread.php?100197-Sublcass-configs&p=471730#post471730) and use the Ext.Container's (http://www.extjs.com/deploy/dev/docs/?class=Ext.Container) "remove" and "insert" methods to take out and replace your placeholders. Let me know if you need additional help.

You will also be happy to know that we're going to be adding the ability to configure and import user extension components and save/export your own user components. When we release that feature, you'll have the ability to stop using placeholders :-) I think it's clever that you're using placeholders though just for your design-time purpose to make sure things are laid out correctly...

27 May 2010, 7:23 AM
It was the only way for me to be able to lay things out correctly. Ok. I will look into the remove and insert methods. If I need help, I'll ask!

I am very anxious to get the next version of the Designer that has the ability to import custom components!


28 May 2010, 5:19 AM

I got it working! Works like a charm! Here is what I did:

1. Save the owner container of the placeholder object.
2. Determine the index of the placeholder in its container.
3. Remove the placeholder.
4. Insert the new object at the saved index.

Here is a sample of my code (note: MapFrame is the autoRef of my placeholder object).

var ctnr = this.MapFrame.ownerCt;
var i = ctnr.items.indexOf(this.MapFrame);
ctnr.remove(this.MapFrame, true);
ctnr.insert(i, {
xtype: 'iframepanel',
id: 'MapFrame',
ref: 'MapFrame',
region: 'center',
defaultSrc: 'http://www.mydomain.com/myapp/...'