1. #1
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    101
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default How to replace placeholder components

    How to replace placeholder components


    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...
    PHP Code:
    /**
         * 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 
    ctnr.items.indexOf(this);
                
    // apply initialConfig
                
    Ext.applyIf(newComponentthis.initialConfig);
                
    ctnr.remove(thistrue);
                var 
    added ctnr.insert(inewComponent);
                
    // 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)...
    PHP Code:
    /**
     * 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 
    ctnr.items.indexOf(this);
            
    // apply initialConfig
            
    Ext.applyIf(newComponentthis.initialConfig);
            
    ctnr.remove(thistrue);
            var 
    added ctnr.insert(inewComponent);
            
    // 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...
    PHP Code:
    this.tagsField.replaceWith({
        
    xtype:'superboxselect',
        
    mode'local',
        
    displayField'tag',
        
    displayFieldTpl'{tag}',
        
    valueField'tag',
        
    queryDelay0,
        
    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.
    Last edited by froamer; 28 Sep 2011 at 9:50 PM. Reason: Added ExtJS 4 Support thanks to JoelRSimpson

  2. #2
    Ext JS Premium Member oaugustus's Avatar
    Join Date
    May 2007
    Location
    Belo Horizonte, Brazil
    Posts
    66
    Vote Rating
    2
    oaugustus is on a distinguished road

      0  

    Default


    Great job guy,

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

    PHP Code:
        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 
    ctnr.items.indexOf(this);
            
            
    // apply initialConfig, thus not need rewrite config on "this.tagsField.replaceWith({xtype: 'superboxselect'})"
            
    Ext.applyIf(newComponentthis.initialConfig);
                
            
    ctnr.remove(thistrue);
            var 
    added ctnr.insert(inewComponent);
            
            
    // 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.
    Otávio Augusto Rodrigues Fernandes
    Net On - Soluções Tecnológicas Ltda
    Desenvolvimento e Consultoria em ExtJS
    www.neton.com.br
    otavio@neton.com.br
    (31) 3075-7868

  3. #3
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    101
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


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

  5. #5
    Ext User
    Join Date
    Jul 2010
    Posts
    1
    Vote Rating
    0
    skawaii is on a distinguished road

      0  

    Default


    Awesome! Just what I was looking for. Thanks!

  6. #6
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    435
    Vote Rating
    6
    wemerson.januario is on a distinguished road

      0  

    Default


    very nice Override.
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer

  7. #7
    Ext JS Premium Member htammen's Avatar
    Join Date
    Jul 2010
    Location
    Germany, Hannover
    Posts
    74
    Vote Rating
    0
    htammen is on a distinguished road

      0  

    Default


    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.

    :-((

  8. #8
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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.

  9. #9
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Hamilton ON Canada
    Posts
    25
    Vote Rating
    0
    fargs is on a distinguished road

      0  

    Default Issue creating multiple Instances of a a component

    Issue creating multiple Instances of a a component


    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!

  10. #10
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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

Similar Threads

  1. [CLOSED][3.0.3] Corrupt placeholder-bar
    By defcon1 in forum Ext 3.x: Bugs
    Replies: 6
    Last Post: 17 Nov 2009, 2:11 AM
  2. Image placeholder...
    By jollyca in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 28 Aug 2008, 6:44 AM
  3. [Ext 2.0] Best/Supported way to replace() components
    By JEBriggs in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 21 Feb 2008, 10:38 AM
  4. [Ext 2.0] Best/Supported way to replace() components
    By JEBriggs in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 23 Aug 2007, 12:30 PM
  5. How to customize the placeholder
    By joey in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 14 Jul 2007, 4:57 AM

Thread Participants: 14