1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    ferdhie is on a distinguished road

      0  

    Default Resizing a dynamic loaded HTML Container to center viewport

    Resizing a dynamic loaded HTML Container to center viewport


    Hi,

    I currently having problem with using a component loader to load external page inside a Viewport, the problem is that the loaded component cannot be resized to fit the content height, so it left a hole in the bottom,

    If i use non border layout, the form and the grid cannot be resized

    here's the code details:

    Main Page

    Code:
    Ext.onReady(function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
                {
                    region: 'north',
                    autoHeight: true,
                    border: false,
                    margins: '0 0 5 0',
                    applyTo: 'header'
                },{
                    region: 'west',
                    collapsible: false,
                    title: 'Navigation',
                    width: 200,
                    autoScroll: true,
                    split: true,
                    contentEl:'menu'
                },{
                    region: 'center',
                    id: 'mainPanel'
                }
            ]
        });
        
        var links = Ext.query('.menulink');
        for(var i=0,len=links.length; i<len; i++) {
            var link = Ext.get(links[i]);
            link.on('click', function(evt) {
                var href = this.dom.href;
                var panel = Ext.create('Ext.Component',{
                        loader: {
                            url: href,
                            autoLoad: true,
                            scripts: true,
                            renderer: 'html',
                            failure: function() {
                                Ext.Msg.alert('Error, loading page failed');
                            }
                        }
                    });
                        
                    var mainPanel = Ext.getCmp('mainPanel');
                    mainPanel.removeAll();
                    mainPanel.update('');
                    mainPanel.add(panel);
                    
                    evt.preventDefault();
            });
        }
    });
    And the page is an HTML document, plus some ExtJS component on the child page

    Code:
    <h1>My Child Pages</h1>
    <div id="content"></div>
    <script type="text/javascript">
        var grid = ...
    
       var form = ...
    
        Ext.create('Ext.container.Container', {
            layout:'border',
            height: 700, // this cannot be auto height
            defaults:{split:true},
            items: [grid, form],
            renderTo: Ext.get('content')
        });
    
    
    </script>

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Vote Rating
    748
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    That's because you are rendering that Container into a <div> so the center region in the viewport won't be able to size it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    ferdhie is on a distinguished road

      0  

    Default


    If I change the child into Viewport or render to body, the child don't get loaded and only flickering for a while.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    ferdhie is on a distinguished road

      0  

    Default


    Okay, found the solution, I set the
    Code:
    <div>
    height into 100% using CSS and then problem solved.

    Thanks

Thread Participants: 1

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