Page 1 of 3 123 LastLast
Results 1 to 10 of 29

Thread: EditorGrid Horizontal scroll bar

  1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    0
      0  

    Default EditorGrid Horizontal scroll bar

    When my grid loads, the horizontal scroll bar appears due to the number of columns unable to fit in the displayable width of the grid. This is the desired behavior. The (1st) problem is when I add a new record by calling the store.insert() of the xmlstore configured with the grid, I lose the horizontal scroll bar. I navigate to the cells of the other columns by tabbing, however the headers for these columns that aren't initially visible do not get (2nd problem) displayed. What could I be doing wrong or omitting? Has anyone else experienced this before? I am using ExtJS 3.2.1 and IE8 set to IE8 Compat View mode. Thanks in advance.

    I also notice the following element hierarchy

    Code:
    <div class="x-grid3-viewport"
         <div class="x-grid3-header"
         <div class="x-grid3-scroller"
              <div class="x-grid3-body"
    where new rows are added as elements under the div element with x-grid3-body class. I can see that when new rows are added, the scroll bar is still there but is behind the body class element.

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      0  

    Default

    how are you configuring your grid? is it a child of another container?

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    0
      0  

    Default

    Thank you for your reply, and yes as a child of another container. I have changed my configuration since, because before I use an explicit width, whereas I just want the grid's width to adjust to the containers' on initial display and whenever the browser is resized.
    Below (note: the column layout instead of anchor; I think anchor is ideal?) almost works, except when I add a new record to the store, and then the grid (and it's horizontal scrollbar) doesn't resize properly anymore.

    Code:
    var myEditorGrid = {
            id : 'My Editor Grid',
            xtype : 'editorgrid',
            height : 500,
            columns : colModel,
            store : gridStore,
            loadMask : {msg:"Loading..."},
            stripeRows : true,
            listeners : {
                'cellContextMenu' : onCtxMenu
            }
        }
        
        var panel = new Ext.Panel({
            id : 'My Panel',
            title : 'My Panel',
            renderTo : 'myPanelDiv',
            border : true,
            bbar : pToolbar,
            tbar: [
                {
                    iconCls: 'icon1',
                    text: 'Do Something',
                    handler : onDoSomething
                }
            ],    
            layout : 'column',
            items : myEditorGrid
        });

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    133
      0  

    Default

    1. Why use layout:'column' when you only have one item? layout:'fit' would be more appropriate.
    2. You want to panel to resize when myPanelDiv changes size? In that case you should use the FitToParent plugin (see User extensions section).

  5. #5
    Ext User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    0
      0  

    Default

    I get problems with layout:'fit' as it doesn't resize the panel when the browser is resized. Also if I remember correctly, it tries to display all columns of the grid. What's desired is initially, only columns that would initially fit in the area would display with a horizontal scroll bar.

    PS. I tried your FitToParent plugin and whereas it is an excellent plugin, it resizes all content proportionally (i.e. header fonts also resize) to the browser's, which is not desired. The only thing that we want to adjust proportionally is the width of the grid so that a horizontal scroll bar appears as necessary.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    90
      0  

    Default

    Are you using a Viewport as the outermost Container?

    That's the first thing to ascertain.

    If not, if you are rendering isolated widgets into DIVs then FitToParent is correct. It does not change font size, you are imagining that.

    If you are using a Viewport, then you have omitted a layout somewhere.

  7. #7
    Ext User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    0
      0  

    Default

    You are right I do not use a viewport, the parent Panel of the editorgrid xtype rendersTo a div. The reason for this is that the editorgrid widget I am writing will reside in an ascx control of an asp.net page.

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    133
      0  

    Default

    Quote Originally Posted by j11extjs View Post
    it resizes all content proportionally (i.e. header fonts also resize) to the browser's, which is not desired. The only thing that we want to adjust proportionally is the width of the grid so that a horizontal scroll bar appears as necessary.
    No, that is definately not true. It only adjusts height and/or width, it does nothing with fonts.

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    90
      0  

    Default

    Does the editorgrid NEED a parent Panel? Are there more Components than just the editorgrid to arrange and size?

  10. #10
    Ext User
    Join Date
    Sep 2010
    Posts
    56
    Vote Rating
    0
      0  

    Default

    Animal (err I don't know if that's what you like to be called), yes I do need a panel, if you check the code, that's where I add the toolbar and bbar, the reason being is if I create an instance of Ext.grid.EditorGridPanel (instead of editorgrid xtype inside an Ext.Panel) is that I am having issues rendering the toolbar and bbar in certain layouts. Other than that, there are no other components inside the Panel.

Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 6
    Last Post: 26 Feb 2010, 3:57 PM
  2. Vertical scroll bar brings horizontal scroll bar
    By smiletolead in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 26 Nov 2009, 1:14 AM
  3. No horizontal scroll bar
    By lobo-tuerto in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 10 Jul 2008, 8:29 AM
  4. horizontal Scroll bar of Grid
    By feiji1983 in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 16 Apr 2007, 3:43 AM

Posting Permissions

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