• https://www.sencha.com/forum/showthread.php?103560-How-to-replace-placeholder-components&langid=14

    コード:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    /**
    * 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);
    }
    }
    });

    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…
    コード:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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.

    Prev:
    (DONE) JSON Repsonses Should Have Unique Filename
    Next:
    [Resolved] IE8 Bug - Ie Error: System Does Not Support the Specified Encoding