3

I have a trouble with using 'lookupReference' method.

I have a panel with config.

Ext.define('TestPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'mypanel',
    referenceHolder: true,
    config: { value: null },
    items: [{ xtype: 'textfield', reference: 'name'}],
    updateValue: function(value) {
        this.lookupReference('name').setValue(value);
    }
});

And when I create a panel as follow

Ext.widget('mypanel', {value: 1});

I get error because this.lookupReference('name') in panel's updateValue method is null.

Fiddle

How to use 'lookupReference' in update method?

Thanks.

ki11en
  • 657
  • 4
  • 24

1 Answers1

4

The updateValue is called before the component is rendered.

You can wait for afterrender: https://fiddle.sencha.com/#view/editor&fiddle/1p2i

CD..
  • 72,281
  • 25
  • 154
  • 163
  • I created a function for call update on afterrender `callAfterRender: function (view) { if (view.rendered) { return false; } var fn = arguments.callee.caller; view.un('afterrender', fn, view); view.on('afterrender', fn.apply.bind(fn, view, fn.arguments), null, { single: true }); return true; }`. And I am using this function in update functions `if (callAfterRender(this)) { return; }` – ki11en Jan 30 '17 at 13:21
  • @CD.. Could you explain the code in your fiddle? Why is there a `return` on line 21? And what is the syntax `this.updateValue.bind(this, value)` actually doing? – Alexis Dufrenoy Feb 20 '23 at 14:53
  • 1
    The `return` is there just to avoid going on to line 24. The [`bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. – CD.. Feb 20 '23 at 16:18
  • 1
    Ok, thank you. Your example solved my problem, by the way. So double thank you! – Alexis Dufrenoy Feb 20 '23 at 16:29