How to replace placeholder components

[froamer]

While we are waiting for Ext Designer to incorporate the ability to use custom components, you may find this override useful. It replaces a component (a place holder component for example) with another...

FOR EXTJS3...

/**
     * Replaces a component with another, preserving the original config
     * @param {Component} newComponent the new component to replace this one with
     * @return {Component} this the replaced component
     */
    Ext.override(Ext.Component, {
        replaceWith : function(newComponent){
            var ctnr = this.ownerCt;
            // if the refOwner is a form or if newComponent.ownerForm config is set to the form
            var form = newComponent.ownerForm ? newComponent.ownerForm : this.refOwner.form;
            var i = ctnr.items.indexOf(this);
            // apply initialConfig
            Ext.applyIf(newComponent, this.initialConfig);
            ctnr.remove(this, true);
            var added = ctnr.insert(i, newComponent);
            // if the component is in a form
            if (form){
                // remove the old component from the form
                form.remove(this);
                // add the new component to the form
                form.add(added);
            }
        }  
    }); 

FOR EXTJS4 (Thanks JoelRSimpson)...

/**
 * Replaces a component with another, preserving the original config
 * @param {Component} newComponent the new component to replace this one with
 * @return {Component} this the replaced component
 */
Ext.override(Ext.Component, {
    replaceWith : function(newComponent){
        var ctnr = this.ownerCt;
        // if the Owner container is a form or if newComponent.ownerForm config is set to the form
        var form = newComponent.ownerForm ? newComponent.ownerForm : this.ownerCt.form;
        var i = ctnr.items.indexOf(this);
        // apply initialConfig
        Ext.applyIf(newComponent, this.initialConfig);
        ctnr.remove(this, true);
        var added = ctnr.insert(i, newComponent);
        // if the component is in a form
        if (form){
            // remove the old component from the form
            form.remove(this);
            // add the new component to the form
            form.add(added);
        }
    }
}); 

To use it, design your form in Ext Designer and add placeholder components where you want to include custom components. Give them an autoRef and export the project.

Paste the above override into a JavaScript file and load it in your page along with any custom component files needed.

In the subclass initComponent method you can then do something like this...

this.tagsField.replaceWith({
    xtype:'superboxselect',
    mode: 'local',
    displayField: 'tag',
    displayFieldTpl: '{tag}',
    valueField: 'tag',
    queryDelay: 0,
    triggerAction: 'all'
}); 

In the example above my placeholder component had an autoRef of "tagsField" and I am replacing it with the rather groovy SuperBoxSelect custom component.

Note: thanks to Otávio's post below, the original config is preserved so you only need to specify the config needed by your new component.

[oaugustus]

Great job guy,

It's very useful. I have a suggestion on replaceWith method:

    replaceWith : function(newComponent){
        var ctnr = this.ownerCt;

        // if the refOwner is a form or if newComponent.ownerForm config is seted get the form
        var form = newComponent.ownerForm ? newComponent.ownerForm : this.refOwner.form;
        
        var i = ctnr.items.indexOf(this);
        
        // apply initialConfig, thus not need rewrite config on "this.tagsField.replaceWith({xtype: 'superboxselect'})"
        Ext.applyIf(newComponent, this.initialConfig);
            
        ctnr.remove(this, true);
        var added = ctnr.insert(i, newComponent);
        
        // if the component is in a form
        if (form){
            // remove the old component to the form reference
            form.remove(this);
            
            // add the new component to the form reference to setValue work fine.
            form.add(added);
        }
            
    } 

Cheers, and thank you for sharing.

[froamer]

Hi Otávio,

Many thanks for taking this to the next logical step, preservation of the original config is a great improvement. I have tested this in my code and it works well. I have adjusted my original post so people reading this will get your tweaks.

[jarrednicholls]

Very nice froamer and Otávio. A great workaround for UX components!

[skawaii]

Awesome! Just what I was looking for. Thanks!

[wemerson.januario]

very nice Override.

[htammen]

Inside a FormPanel this technique only seems to work if the component that replaces the placeholder has a clearInvalid() method. This is the case for all Field components and its subcomponents.

I tried to replace the placeholder with an Ext.Container that contains other field subcomponents and I´ve got the error "f.clearInvalid is not a function" for the container component. Also the replacement with a ReCaptcha component (see http://www.sencha.com/forum/showthre...HA-Form-Plugin) didn´t work. I had to add the clearInvalid() method to the ReCaptcha component.
If I replace the placeholder with a composite field everything works fine.

:-((

[jarrednicholls]

I think the FormPanel will register all Field child items within itself when it's initializing. It uses that enumeration of Fields for rolling through validations, etc. You can put a placeholder of a Container and should be able to replace it with another Container no problem...if you use a Field placeholder, you're best off replacing it with another Field component.

[fargs]

Hi,

I am having an issue with using the superselectbox ux in a component that was built using the Ext Designer.

I have used the replaceWith override and a textfield placeholder. I "link" my form component into my "Edit existing item" page and I have a window that uses another "linked" form for my "New" page. Pretty straight forward.

The edit page gets rendered first. When I click the New button to show the New window, an additional control seem to be displayed on the edit form and 2 new labels are displayed on the new form but no control. This may be a bit confusing so I have included a link to some screenshots to help explain. (I tried linking them directly in the post but I couldn't them to show up)

The first screenshot is when the first page loads and the second is when the window is shown.

http://picasaweb.google.com/lesliefa...entScreenshots

Thanks for you help!

[jarrednicholls]

Hi fargs,

So you are using the same form inside of two different containers, correct? Are you using the same "instance" or creating a new instance of the form per Window? Doesn't it sound like the Window is using a different instance of the form. If you provide some code samples, I could probably pinpoint the issue.

Thanks,
Jarred