1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default BorderLayout - removing panels from NestedLayout

    BorderLayout - removing panels from NestedLayout


    Jack

    I've been playing around with your updated feed-viewer example released with the newest beta. I've been trying to add support for a default view mode and a wide view mode and have come up with a couple issues.

    1) A GridPanel/ContentPanel cannot be added to more than one BorderLayout.
    2) When I remove a NestedLayoutPanel from a BorderLayout and add a different NestedLayout Panel, the new NestedLayoutPanel doesn't show up properly. May be related to issue 1.

    The relevant code is below. Perhaps I am doing something wrong.

    Code:
                <snip>
    
                layout.add('east', new YAHOO.ext.ContentPanel('suggested', {title: 'Suggested Feeds', fitToFrame:true}));
    
                // create the feed grid
                this.createGrid();
    
                // create the preview panel and toolbar
                previewBody = new YAHOO.ext.Actor('preview-body');
                var tb = new YAHOO.ext.Toolbar('preview-tb');
                tb.addButton({text: 'View in New Tab', className: 'view-tab', click: this.showInTab.createDelegate(this)});
                tb.addSeparator();
                tb.addButton({text: 'View in New Window', className: 'view-window', click: this.showInWindow.createDelegate(this)});
    
                preview = new YAHOO.ext.ContentPanel('preview', {title: "Preview", fitToFrame:true, toolbar: tb, resizeEl:'preview-body'});
                gridPanel = new YAHOO.ext.GridPanel(grid, 'Feed Articles');
    
                defaultLayout = new YAHOO.ext.BorderLayout('defaultcontent', {
                    south: {
                        split:true,
                        initialSize: 250,
                        minSize: 100,
                        maxSize: 400,
                        autoScroll:false,
                        collapsible:true,
                        titlebar: true,
                        animate: true,
                        cmargins: {top:2,bottom:0,right:0,left:0}
                    },
                    center: {
                        autoScroll:false,
                        titlebar:false
                    }
                });
    
                defaultLayout.beginUpdate();
                defaultLayout.add('center', gridPanel);
                defaultLayout.add('south', preview);
                defaultLayout.restoreState();
                defaultLayout.endUpdate(true);
                defaultPanel = new YAHOO.ext.NestedLayoutPanel(defaultLayout, 'View Feed');
    
                wideLayout = new YAHOO.ext.BorderLayout('widecontent', {
                    east: {
                        split:true,
                        initialSize: 250,
                        minSize: 100,
                        maxSize: 400,
                        autoScroll:false,
                        collapsible:true,
                        titlebar: true,
                        animate: true,
                        cmargins: {top:2,bottom:0,right:0,left:0}
                    },
                    center: {
                        autoScroll:false,
                        titlebar:false
                    }
                });
    
                wideLayout.beginUpdate();
                wideLayout.add('center', gridPanel);
                wideLayout.add('east', preview);
                wideLayout.restoreState();
                wideLayout.endUpdate(true);
                widePanel = new YAHOO.ext.NestedLayoutPanel(wideLayout, 'View Feed');
    
                // restore any state information
                layout.restoreState();
                layout.endUpdate();
    
                // load the default feed
                //this.loadFeed('http://www.jackslocum.com/yui/feed/');
                //this.changeActiveFeed('jvs');
    
                this.showLayout('default');
            },
    
            showLayout : function(type){
                layout.beginUpdate();
    
                if (this.currentPanel != 'undefined' && this.currentPanel != '' && this.currentPanel != null) {
                    try {
                        layout.getRegion('center').remove(feedPanel);
                    } catch(e) {alert(e);}
                }
    
                switch (type) {
                    case 'wide':
                        feedPanel = widePanel;
                        layout.add('center', feedPanel);
                        this.currentPanel = 'widecontent';
                        break;
                    case 'default':
                    default:
                        feedPanel = defaultPanel;
                        layout.add('center', feedPanel);
                        this.currentPanel = 'defaultcontent';
                        break;
                }
    
                layout.endUpdate(true);
            },
    The relevant divs are below...

    Code:
        <div id="defaultcontent" class="ylayout-inactive-content">
            <div id="feed-grid" class="ylayout-inactive-content ylayout-component-panel ygrid-mso"></div>
            <div id="preview" class="ylayout-inactive-content">
                <div id="preview-tb"></div>
                <div id="preview-body"></div>
            </div>
        </div>
        <div id="widecontent" class="ylayout-inactive-content">
            <div id="feed-grid" class="ylayout-inactive-content ylayout-component-panel ygrid-mso"></div>
            <div id="preview" class="ylayout-inactive-content">
                <div id="preview-tb"></div>
                <div id="preview-body"></div>
            </div>
        </div>
    The first call to showLayout() works fine, but subsequent calls leave me with just a white background in the center region, as if wide and default panels were deleted.

    Any help would be appreciated.

    Thanks

    -Matt

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    Jack?

    I realize you're busy and can't solve everyone's problems, but I'd appreciate at least some response, even if it is that you dont have time to help. I just see all these posts after mine and all of them have responses.

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Sorry for the delayed response but I was hoping to get the beta 2 release out which includes a fix when removing/readding NestedLayouts. In the current version it will cause an error if you remove the last panel in the region.

    Also, you will want to remove the true on this call:

    layout.endUpdate(true);

    becomes:

    layout.endUpdate();

    The true is telling the layout not to perform a layout update.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    No prob, I'll wait for beta 2 then.

    Thanks again!

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    Jack

    I've updated to beta 3 and that has fixed my problem with being able to remove/readd layouts (in fact now I am just using the hide/unhide panel functionality).

    However, I still need help addressing issue 1....the inability to use the same grid (or any same element for that matter) on multiple panels). Referencing my posted code, I create a Grid and a GridPanel and add the GridPanel to the center region of the defaultLayout and the wideLayout. However, when I switch between layouts, the grid only shows in the wideLayout and not the defaultLayout (since it was last added to the wideLayout). I'm also experiencing this problem with the preview ContentPanel.

    For now I've just created multiple grids which use the same datamodel, but that is causing major performance problems. Is there anything that can be done to address this problem?

    Thanks

    Matt

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    bump

    Jack?

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Unfortunately you can't share 1 element in multiple spots in the document. That's just how HTML works.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    Jack

    I understand you cant use the same element in multiple spots. I was hoping that something could be written in BorderLayout to handle moving the elements around. Since my intention is to use the same grid in multiple panels, yet not have more than one panel visible at the same time, I was thinking along the lines of this psuedocode....

    create a grid
    create panel1
    create panel2
    assign grid to panel1
    assign grid to panel2
    render grid into panel1 via copying the grid's dom nodes into panel1 innerhtml
    show panel1
    select panel2
    hide panel1
    copy the grid's dom nodes into panel2 innerhtml
    show panel2

    What do you think about the feasibility of that? I know it sounds like it might be a costly operation, but it might end up being less costly than having more than one grid. Plus it would hopefully bypass all the smaller issues of trying to visually sync multiple grids so that they appear to be the same to the user.

    Thoughts?

    Matt

  9. #9
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Something like this might work:

    1) Create two grid panels, both referencing the same grid, and add them both. The GridPanel will move it into a wrapper element, so it will actually be present in the 2nd Panel initially. If you create the panels backwards then it would be in the first. It's the order in which then are created, not added, that determines on which panel the grid appears initially.

    2) You are going to have to override the sizing code to make sure it is applied when you swap grids (gp is one of the grid panels):

    Code:
    gp.setSize = function(width, height){
        this.storedSize= {'width': width, 'height': height};
        if(this.grid.container.dom.parentNode == this.el.dom){ // if its on this panel
              YAHOO.ext.GridPanel.prototype.setSize.apply(this, arguments);
        }
    };
    Then we add our swap function:

    Code:
    gp.plugGrid= function(grid){
        this.grid.container.appendTo(this.el);
        YAHOO.ext.GridPanel.prototype.setSize.call(this, this.storedSize.width, this.storedSize.height);
    };
    I'm not sure this would actally work but I don't see why it wouldn't.

    You could also add an extendX version to move this logic to a class and take it out of your app code.

    The performance of moving a large grid won't be great.

Similar Threads

  1. set height of panels in NestedLayout
    By wglass in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 16 Mar 2007, 3:40 PM
  2. Hide tabs on BorderLayout with nestedLayout?
    By Choleriker in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 23 Dec 2006, 4:55 AM
  3. RC3: Adding / Removing Panels in Borderlayout
    By Wolfgang in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 20 Dec 2006, 12:52 AM
  4. BorderLayout default panels
    By SteveEisner in forum Community Discussion
    Replies: 0
    Last Post: 12 Nov 2006, 11:58 PM
  5. Replies: 1
    Last Post: 24 Oct 2006, 4:27 PM

Thread Participants: 1

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