PDA

View Full Version : EditorGrid Horizontal scroll bar



j11extjs
18 Oct 2010, 11:07 PM
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


<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.

jay@moduscreate.com
21 Oct 2010, 4:48 AM
how are you configuring your grid? is it a child of another container?

j11extjs
25 Oct 2010, 12:29 AM
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.


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
});

Condor
25 Oct 2010, 12:39 AM
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).

j11extjs
25 Oct 2010, 12:47 AM
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.

Animal
25 Oct 2010, 12:50 AM
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.

j11extjs
25 Oct 2010, 12:55 AM
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.

Condor
25 Oct 2010, 1:00 AM
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.

Animal
25 Oct 2010, 1:09 AM
Does the editorgrid NEED a parent Panel? Are there more Components than just the editorgrid to arrange and size?

j11extjs
25 Oct 2010, 1:14 AM
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.

Condor
25 Oct 2010, 1:19 AM
You only have issues, because your EditorGridPanel is still not sized properly. If you fix that first, you won't need the panel.

Animal
25 Oct 2010, 1:59 AM
FitToParent does not render anything.

It merely monitors the browser resize event, and then measures the size of the parent DIV that you rendered into, and sizes the widget to fit exactly within that DIV.

Condor
25 Oct 2010, 2:02 AM
1. Is the container div overflow:hidden? How did you style the div and configure FitToParent?

2. You could set bufferResize to false, but that can have other side-effect, so I suggest you keep it this way.

3. Known bug. Search the Bugs section for a patch.

j11extjs
25 Oct 2010, 2:08 AM
Ok thanks, I will experiment some more. I just tried the FitToParent plugin, what could I be doing wrong as (1) the panel using the FitToParent renders outside the containing html div. And (2) When I resize the browser, there is a bit of delay when the gridpanel adjusts. (3) There is still that issue of the rightmost column that is partially displayed where the editor for that column is only editable in the area that was initially displayed.
The following is the code I used:

UserControl.ascx
...

<div id="ParentDiv">
<div id="GridPanelDiv" style="padding-top:8px; overflow:hidden; position:absolute; width:98%; height:300px;"></div>
<label id="LabelDiv"/></label>
</div>
...

Grid.js
...

var panel = new Ext.grid.EditorGridPanel({
id : 'MyEditorGrid',
title : 'My Editor Grid',
renderTo : 'GridPanelDiv',
height : 280,
columns : columnModel,
store: xmlStore,
loadMask: {msg:"Loading..."},
stripeRows: true,
listeners : {
'cellContextMenu' : onCtxMenu
},
border : true,
bbar : pageToolbar,
tbar: [
{
iconCls: 'icon1',
text: 'Do Something',
handler : onDoSomething
}
],
plugins: [new Ext.ux.FitToParent("GridPanelDiv")],
layout : 'anchor'
});
...

Many thanks in advance, I feel I am so close to presenting this.

Animal
25 Oct 2010, 2:10 AM
position:absolute??????

Condor
25 Oct 2010, 2:11 AM
Are you sure the width:98%; actually works on absolutely positioned divs?

Animal
25 Oct 2010, 2:12 AM
And 98% the width of what?

How is its parent div, "ParentDiv" sized?

And why is there a ParentDiv and a GridPanelDiv?

j11extjs
25 Oct 2010, 2:13 AM
(2) When I resize the browser, there is a bit of delay when the gridpanel adjusts.

The delay is when adjusting to increase the width, it's pretty much instantaneous the other direction.

Animal
25 Oct 2010, 2:14 AM
Well, it's not DOING anything in the other direction.

j11extjs
25 Oct 2010, 2:17 AM
I pretty much followed the instructions from this link:
http://loianegroner.com/2010/08/how-to-resize-an-extjs-panel-grid-component-on-window-resize-without-using-ext-viewport/

There is a ParentDiv because above GridPanelDiv is another div for another ExtJS panel component.

Condor
25 Oct 2010, 2:19 AM
I assume you are trying to insert this grid in an existing page? Otherwise you should be using an Ext.Viewport!

Animals question "98% the width of what" is very relevant. Various browsers have very different ways to determine relative widths.

Animal
25 Oct 2010, 2:20 AM
another?

What?

You render the grid into GridPanelDiv, so that's it. It contains that grid and only that grid.

j11extjs
25 Oct 2010, 2:30 AM
Condor: You are also right, I am inserting this grid inside an existing (aspx) page that has a lot of other asp.net controls.

Animal: Yes you are right, the other div on top of GridPanelDiv is rendered another ExtJS panel from another .js file.

Condor
25 Oct 2010, 2:35 AM
FitToParent doesn't work if you render multiple components to the same div. Are you doing that?

j11extjs
25 Oct 2010, 2:50 AM
No, I have 2 divs and 2 components. 1 component to each div.

Condor
25 Oct 2010, 3:10 AM
And without rendering anything, do the divs have the correct size?

j11extjs
25 Oct 2010, 3:28 AM
Yes, they do render correctly when not containing anything. Even if I put just renderTo just an Ext.Panel it works and resizes properly, it's only when I have the EditorGridPanel (with too many columns) as a child item that resizing (and horizontal scroll bar) becomes a problem.

However, the code (in post #14) with your FitToParent plugin is almost working as expected except for 2 things:

(1) EditorGridPanel renders on top of ParentDiv and ParentDiv doesn't resize to contain this panel. EditorGridPanel should be inside ParentDiv.
(2) The boundary column (with the editor area issue) which you mentioned is a known bug (and not a FitToParent issue).
(3) oh and the minor issue of the delay when browser width size is increasing.

Condor
25 Oct 2010, 4:04 AM
1. Did you remove the position:absolute like Animal and I suggested?

2. See the Bugs section (you need some css rule to make the grid body float:left).

3. Nothing you can do about that.

j11extjs
25 Oct 2010, 4:34 AM
I am very grateful for your help Condor and Animal.

I removed the absolute positioning and it is working. The delay is a bit icky though as the panel instantaneously resizes with the browser but the contained grid has a noticeable delay. Other than that IE7 and IE8 compatibility mode work well. IE8 still has a resizing/scroll bar issue.

Just doing a few more clean up but other than the above few issues, the grid is working fine.

Thank you again.