Render/layout problem

[Mark Hagerman]

In my code, I define a panel which (eventually) will need to be overwritten with data from a JSON file:

{
itemId: 'offerText',
xtype: 'panel',
padding: '0 0 0 124',
autoHeight: true,
border: false,
hidden: true,
html: ''
}

For now, I'm testing by setting a listener on another component, and manipulating the above panel in response to a change event. The listener is in a controller I've created for the functionality I'm working on:

handleChange: function(theField, newValue, oldValue)
{
var theText = theField.ownerCt.ownerCt.getComponent('offerText');

// Ext.DomHelper.overwrite(theText.getEl(),
// '<p>Later, this will be set to the appropriate text for the offer</p>',
// false);
theText.getEl().update('<p>Later, this will be set to the appropriate text for the offer</p>');
theText.getEl().repaint();
theText.setVisible(true);
// theField.ownerCt.ownerCt.doComponentLayout();
this.getNewOrder().doLayout();
// this.getNewOrder().show();
}

As you can see, I've tried a number of ways to get the modified panel to display, but nothing seems to work; the panel's div has a height property of zero, and nothing I do seems to change that. How do I force the app to re-render the panel?

N.B.: Inspecting the DOM with Firefinder shows that both overwrite() and update() are behaving as desired; it's the formatting of the enclosing <div> that's got me beat.

[scottmartin]

Mark,

Can I get you to summarize what your overall goal is?

Scott.

[Mark Hagerman]

Basically, when I select an option from a combobox list, I need to display a text description of that option's details below the combobox.

That doesn't seem particularly germane to the question, though. In a generic sense, how to I tell the window to recalculate its appearance, and display itself as if the panel had had the new text in it all along?

[friend]

Ext.panel.Panel supports a loader configuration property, which let's you declare an Ajax loader for the panel's content (see Ext.ComponentLoader for an example).

You can later do something like below to reload the panel contents:

myPanel.loader.load()

Also note that autoHeight: true is not supported in ExtJs v4.x. Use a layout instead.

[scottmartin]

Please check the example in the following thread to see if this is close:
http://www.sencha.com/forum/showthread.php?219945

Scott.

[Mark Hagerman]

Thanks to all, but I found the answer myself. The key (for my purposes) is NOT to use:

theText.getEl().update('<p>Later, this will be set to the appropriate text for the offer</p>');

instead, I'm using:

theText.update('<p>Later, this will be set to the appropriate text for the offer</p>');

This causes the panel to appropriately size itself, so when I invoke doLayout() on the parent container, everything comes out right.