1. #1
    Mark Hagerman
    Guest

    Default Answered: Render/layout problem

    Answered: Render/layout problem


    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.

  2. 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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,630
    Answers
    613
    Vote Rating
    399
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Mark,

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

    Scott.

  4. #3
    Mark Hagerman
    Guest

    Default


    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?

  5. #4
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    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:

    Code:
    myPanel.loader.load()
    Also note that autoHeight: true is not supported in ExtJs v4.x. Use a layout instead.
    Last edited by friend; 22 Jun 2012 at 9:54 AM. Reason: additional verbage

  6. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,630
    Answers
    613
    Vote Rating
    399
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  7. #6
    Mark Hagerman
    Guest

    Default


    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.

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar