1. #1
    Ext JS Premium Member Stanback's Avatar
    Join Date
    Jun 2010
    Boulder, Colorado
    Vote Rating
    Stanback is on a distinguished road


    Default Ref Property Gone?

    I am trying to use the 'ref' property on components for injecting back references like I could with Ext3. This was used on a lot of my previous code to get instances to various form fields that needed special handling. The nice thing was the ../ notation that allowed references to be placed where it was convenient.

    Here is the method in Ext3's Ext.Component that handled it:
    PHP Code:
        initRef : function(){
             * @cfg {String} ref
             * <p>A path specification, relative to the Component's <code>{@link #ownerCt}</code>
             * specifying into which ancestor Container to place a named reference to this Component.</p>
             * <p>The ancestor axis can be traversed by using '/' characters in the path.
             * For example, to put a reference to a Toolbar Button into <i>the Panel which owns the Toolbar</i>:</p><pre><code>
    var myGrid = new Ext.grid.EditorGridPanel({
        title: 'My EditorGridPanel',
        store: myStore,
        colModel: myColModel,
        tbar: [{
            text: 'Save',
            handler: saveChanges,
            disabled: true,
            ref: '../saveButton'
        listeners: {
            afteredit: function() {
    //          The button reference is in the GridPanel
             * <p>In the code above, if the <code>ref</code> had been <code>'saveButton'</code>
             * the reference would have been placed into the Toolbar. Each '/' in the <code>ref</code>
             * moves up one level from the Component's <code>{@link #ownerCt}</code>.</p>
             * <p>Also see the <code>{@link #added}</code> and <code>{@link #removed}</code> events.</p>
    if(this.ref && !this.refOwner){
    levels this.ref.split('/'),
    last levels.length,

    && last){
    t[this.refName levels[--i]] = this;
                     * @type Ext.Container
                     * @property refOwner
                     * The ancestor Container into which the {@link #ref} reference was inserted if this Component
                     * is a child of a Container, and has been configured with a <code>ref</code>.
    this.refOwner t;

    removeRef : function() {
            if (
    this.refOwner && this.refName) {
    delete this.refOwner[this.refName];
    delete this.refOwner;
    Is this planned for Ext4 or was it intentionally removed?

    If it has been removed, what is the best-practice alternative? There are times when validators and listeners aren't enough and manually instantiating is messy. Setting itemId on the sub-component and using Ext.getCmp(itemId) works but seems cumbersome and requires itemIds to be globally unique. For form fields, I can use Form.findField(name) but I was under the impression that it created extra overhead.

  2. #2
    Ext JS Premium Member
    Join Date
    Sep 2008
    Vote Rating
    kaigan is on a distinguished road



    Have a look at ComponentQuery and down/up/child on Containers

Similar Threads

  1. Ref Property
    By rodrigok in forum Ext: Discussion
    Replies: 33
    Last Post: 10 Nov 2011, 1:41 PM
  2. get value/property
    By Generic1 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 27 Jul 2009, 6:47 AM
  3. Set CSS property
    By stvlinux in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 14 Oct 2008, 8:12 AM
  4. property, id, root, total property config help
    By Jigesh Shah in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Apr 2008, 2:50 PM

Thread Participants: 1