PDA

View Full Version : Render/layout problem



Mark Hagerman
22 Jun 2012, 7:52 AM
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
22 Jun 2012, 8:47 AM
Mark,

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

Scott.

Mark Hagerman
22 Jun 2012, 9:09 AM
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
22 Jun 2012, 9:53 AM
Ext.panel.Panel supports a loader (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-loader) configuration property, which let's you declare an Ajax loader for the panel's content (see Ext.ComponentLoader (http://docs.sencha.com/ext-js/4-0/#!/api/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
22 Jun 2012, 9:57 AM
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
22 Jun 2012, 10:07 AM
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.