Results 1 to 5 of 5

Thread: [Solved] TabPanel panels overlap initially.

  1. #1
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382

    Default [Solved] TabPanel panels overlap initially.

    See thread: http://www.sencha.com/forum/showthre...o-you-write-it

    Latest version of ExtJS.


    I have 3 gridPanel.
    Each gridPanel uses its own datastore.

    I have a tabPanel that houses the 3 gridPanels.
    Each gridPanel was added to the tabPanel via tabPanel.add(gridPanel1) etc.
    After each add I then tell the dataStore that is associated to that gridPanel to load.

    Problem is that on the initial rendering of the tab panel the content from the various tabs are overlapping in the display so you can see content from tab 1 and tab2 at the same time or tab 1 and tab 3 depending on what is loads first from the call.

    Why is this occuring?

    Also, the tabPanel is constructed in a function and is returned to a parental page that adds it to the new Window.
    after all the code from the new window is complete it calls win.show().

    So, would this cause the issue?
    Last edited by Elijah; 12 Jul 2010 at 8:17 PM. Reason: found the problem

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Need to see code.

  3. #3
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382

    Default

    I was afraid someone might ask for that. Due to my very non ideal work situation, my system that has the code is not allowed on the internet while at work. I know its a WTF brain stumper. I will post code tonight after work.

  4. #4
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382

    Default

    Okay now I can post some code as I am working in a different location.
    Its not all the code only because nobody wants to read over 300 lines of it.
    Basically from another function where panels are populated with grid panels that get put into a tab panel the grids are created in function below with a handler.

    not all the time but more than i care the panels tend to render and you view them in a stacked like format.
    So, i would like to prevent it from doing that.


    Code:
    self.createGP = function(argCnfg){
        fireBugLog(self.modName + ': createGP('+argCnfg.id+')');
        // Create a new grid pane for displaying information
        var tempGridPanel = new Ext.grid.GridPanel({
            id:'tp' + argCnfg.id,
            draggable: false,
            // associate a datastore to this grid panel
            ds: argCnfg.dataStore,
            sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
            border:false,
            // TODO Column Model needs to be constructed outside of this method
            cm: new Ext.grid.ColumnModel([
                new Ext.grid.RowNumberer(),
                // Specify the dataIndex which maps to a field specified in the Ext.Data.Reader
                {header: "ID", width: 45, sortable: true, dataIndex: 'id'},
                {header: "Title", width: 275, sortable: true, dataIndex: 'title'},
                {header: "Link", width: 90, sortable: true, dataIndex: 'itemURL'}
            ]),
    
            viewConfig: {
                forceFit:true
            }
        });
    
        // Create a handler that will populate the display area with grid row selected information
        createGPHandler(tempGridPanel);
    
        return tempGridPanel;
    }; // createGP
    
    /**
     *
     */
    function createGPHandler(argGridPanel){
        if(argGridPanel){
            argGridPanel.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
                fireBugLog(self.modName + ': ' + r.data);
                fireBugLog(r.data);
                // open a new window
                GLOBAL_EXTJS.popupUrl({url:r.data.itemURL, winName:'umERGrid', options:''});
            });
        } // if
    } // createGPHandler

  5. #5
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382

    Default

    I discovered a side effect from the above code with the bbar: Status Bar. I am sure its just me misusing the code, but
    Code:
    bbar: new Ext.ux.StatusBar({
        id: xConfig.statusBarID,
        useDefaults: true,
        defaultText: 'Ready',
        items:[
            pBar,
            {xtype:'tbseparator'},
            {
                xtype: 'button',
                id: xConfig.btnID,
                text: 'Reload',
                width: 75,
                handler: gridLoader.createDelegate(
                    this,
                    [xConfig]
                )
            }
        ]
    })
    What happens is this.
    If I click on the reload button in the bbar it works just fine.
    If I select a row it opens a window just fine.
    If I click on the reload button again it acts funny such that the datastore reloads but then it reopens the window again for the row selected.

    How do i correct this?

Similar Threads

  1. Replies: 5
    Last Post: 19 Jan 2010, 9:50 AM
  2. Replies: 10
    Last Post: 9 Apr 2009, 10:17 AM
  3. tabpanel with panels in pages
    By dinosauro in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 6 Jan 2009, 6:00 PM
  4. Multiple panels in TabPanel
    By cooldeep in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Feb 2008, 11:37 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •