1. #1
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    31
    Vote Rating
    0
    MMirabito is on a distinguished road

      0  

    Default Grid Panel scroll bars are not visible and column labels in menu are not aligned

    Grid Panel scroll bars are not visible and column labels in menu are not aligned


    I am having several strange behavior and I am hoping that someone can point me in the right direction. I have searched the forum but I was not successful in identifying a solution.

    1) I have a series of primary tab panels and nested tab panels

    2) In one of the tab panels I have divided a region into an accordion on the WEST and another tab panel in the CENTER (with 3 additional tab pages nested inside the CENTER region)

    3) My grid panel which is contained inside a tab page is initially invisible using the x-hide-display on the div tag

    When the data is loaded I click on the tab page that has my grid, the data displayes but the scroll bars are not there

    I think it has to do with the components not being able to size themselves properly because they are initially invisible (just a guess). In contrast if I first click on the tab panel that has the grid and then load the data the scroll bar appears. Does anyone know how to fix this?

    My second question is regarding the strange alignment of the Colum labels on the menu that gives you the ability to hide or show columns, see image attached. Anyone knows how to fix this?

    Thanks in advance for any help


    Max
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It will be an overnest.

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    31
    Vote Rating
    0
    MMirabito is on a distinguished road

      0  

    Default


    Animal,

    thanks for the response, but I am not sure I follow you when you say overnest and in this case what should I do? I am confused and its probably based on a lack of fundamental understating about the layouts thus makig the the desgin even more complicated.

    This is wah t I have

    Code:
    Tab panel
        tab
           accordion  WEST
           tab panel  CENTER
              tab
              tab
                  gridpanel
              tab
         tab
    Thanks again
    Max

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So I assume you've put your Panel IN something, and put that SOMETHING into the TabPanel.

    Code:
    Tab panel
        tab
           accordion  WEST
           tab panel  CENTER
              tab
              gridpanel
              tab
         tab

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No scrollbars is usually caused by an incorrect layout.

    Your strange column menu is probably caused by your own css styling.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    layout: 'auto', as in "a grid inside a tab" is an incorrect layout.

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    31
    Vote Rating
    0
    MMirabito is on a distinguished road

      0  

    Default


    Animal thanks again,

    this is what I have, and i am not sure when and where i need to apply the layout whatever I try i am not getting anywere. So it's safe to assume that "i do not know how"

    Here is what I have.

    Code:
    		var tabs = new Ext.TabPanel({
    			renderTo: 'extContainer',
    			activeTab: 0,
    			margins: '5 0 5 5',
    			height: 627,
    			plain: true,
    			items:[{
    				autoWidth: true,
    				monitorResize: true,
    				title: 'Query',
    				items:[queryPanel],				
    				tabTip   : 'Explore ways of accessing and visualizing the data'
    			},{
    				autoWidth: true,		
    				title: 'Atlas',
    				tabTip   : 'Explore the data'
    
    			}]
    		});
    
    
    
    		// ****************************
    		// Cobined Query Panel
    		// ****************************	
    		var queryPanel = new Ext.Panel({ 
    			layout:'border', 
    			height:600, 
    			items:[queryAccordion, queryCenterPanel] 
    		}); 
    
    
    		var queryCenterPanel = {
    			region: 'center',
    			xtype: 'tabpanel',
    			tabPosition: 'bottom',
    			activeTab: 0, 
    			items: [{
    				title: 'Query Designer',
    				contentEl: 'queryView',
    				tabTip: 'Select query constraints'
    			},{ 
    				title: 'Data',
    				contentEl: 'resultContainier',
    				tabTip: 'View Data results'
    			}]
    		};
    
    
    
    		var grid = new Ext.grid.GridPanel({
    			renderTo: 'resultContainier',
    			frame:true,
    			title: 'Movie Database',
    			autoWidth:true,
    			height:535,
    		        stripeRows: true,
    			store: remoteQueryStore,
    			columns: [
    				{ header : 'C1', dataIndex : 'C1' },
    				{ header : 'C2', dataIndex : 'C2' },
    				{ header : 'C3', dataIndex : 'C3' },
    				{ header : 'C4', dataIndex : 'C4' },
    				{ header : 'C5', dataIndex : 'C5' },
    				{ header : 'C6', dataIndex : 'C6' },
    				{ header : 'C7', dataIndex : 'C7' },
    				{ header : 'C8', dataIndex : 'C8' },
    				{ header : 'C9', dataIndex : 'C9' }	
    	
    			]
    		});
    
    
    
    	        var queryAccordion = new Ext.Panel({
    			title: 'Query Builder', 
    		        region:'west',
    			split: true,
    			collapsible: true,
    			collapseMode: 'mini',
    			width: 128,
    			minWidth: 128,
    			height: 250,
    			layout: {type: 'accordion', animate: true},
    			items: [{
    				id: 'filters',
    				title: 'Filters',
    				autoScroll: true,
    				items: [queryBuilderForm],			
    				cls:'empty'
    			},{
    				title: 'Saved Queries',
    				autoScroll: true,
    				contentEl: 'savedQueries',
    				cls:'empty'
    			}]
    		});
    Last edited by MMirabito; 4 Aug 2010 at 6:03 AM. Reason: typo

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    This is so completely wrong that I don't even know where to start...

    1. Do NOT render components inside a layout! Instead, add() them to the layout (or include them in the items).
    2. Your layout is completely overnested. Forms and grids can be included directly into a tabpanel or an accordion layout. No need to use an extra panel (for which you also forgot to specify a layout).
    3. You obviously have no idea what autoWidth:true and monitorResize:true do, otherwise you wouldn't be using them.

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    31
    Vote Rating
    0
    MMirabito is on a distinguished road

      0  

    Default


    Condor

    thanks for your reply, yes you are right I am clueles , so now i will go back and see how to simplify per your suggestion, not sure how yet.

    thanks again

    Max

Similar Threads

  1. Grid Panel to fit in Parent witdh scroll bars
    By karel-jan in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 15 Apr 2008, 6:10 AM
  2. Grid Editor on last column gets horizontal scroll bars
    By froamer in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 17 Sep 2007, 10:24 PM
  3. Using a Grid Panel, PagingToolbar/Scroll bars do not render
    By slidenv in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 31 Aug 2007, 8:57 AM

Thread Participants: 2