Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default Unanswered: Loading HTML using loader messes up the html.

    Unanswered: Loading HTML using loader messes up the html.


    If I use loader config to load html into a panel the html gets messed up, meaning vertical spacing of <p> elements is much less.

    If I load the html with panel.body.update() the vertical spacing is fine. How can I avoid this problem? For reasons I won't get into, I must load the html into the panel using loader.

    Code:
    me.companyAgreementPopup.down('#companyAgreementText').body.update("<iframe width='100%' height='100%' frameborder='0' src='" + me.agreementUrl + "'></iframe>");
    The screenshot below shows the issue (sensitive data blocked out). The upper image is fine, the lower image has vertical spacing issue.

    html_messed_up.png

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    I'm wondering if anyone could comment on this. Thanks in advance.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    This might be the last issue I need to solve for the feature I'm working on. Can anyone comment on how to get around this? Thanks.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,010
    Answers
    382
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I'm not able to reproduce the issue you're describing. You may need to provide a code snippet or at least an example of HTML that you're seeing rendered differently using loader versus update().

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    Below is simplified code and html that should be saved to file myText1.html, and a screenshot of the issue.

    In the screenshot, the top panel displays HTML properly, in the lower panel, the HTML is not displayed properly, not enough space between lines.

    htmlWrong.png

    Code:
    Ext.onReady( function (){            
        var window = new Ext.Window({
            height: 500, width: 350, autoShow: true, border: false, plain: true,title: 'Static',        
            items: [{
                html: '', layout: 'fit', autoScroll: true, id: 'myText', width: 340,height: 250
            }, {
                html: '', layout: 'fit', autoScroll: true, id: 'myText2', width: 340,height: 250,
                    loader: {
                        url: 'myText1.html',
                        renderer: 'html'
                    }        
                }]        
        });
    
    
    var panel = Ext.getCmp('myText');
    if (panel.body) {
        panel.body.update("<iframe width='100%' height='100%' frameborder='0' src='myText1.html'></iframe>");
    }
    
    
    var panel2 = Ext.getCmp('myText2');
    panel2.getLoader().load();
    });
    Save this HTML to file myText1.html:

    Code:
    <p align="center">This is the Text Title</p>
    <p>This is a line of text that is intended to be long enough to wrap to the next line in a panel.</p>
    <p>This is a line of text that is intended to be long enough to wrap to the next line in a panel.</p>
    <p>This is a line of text that is intended to be long enough to wrap to the next line in a panel.</p>
    <p>This is a line of text that is intended to be long enough to wrap to the next line in a panel.</p>
    <p>This is a line of text that is intended to be long enough to wrap to the next line in a panel.</p>
    <p>This is a line of text that is intended to be long enough to wrap to the next line in a panel.</p>

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    I should add that I need to load HTML in the panel using loader, because I am loading HTML in a controller, and I need to listen for scroll events on the panel body, and this is the only way I could get it to work.

    So I don't want to try other ways of loading the HTML, because all the other ways don't seem to allow listening to scroll events. Remember, I am loading the text and handling scroll events in a controller, after the panel is rendered, so please take that into consideration when offering suggestions.

Thread Participants: 2