PDA

View Full Version : [DUP] Missing Horizontal Scrollbar when setting autoHeight to true in ExtJs 4.2 grid



er_abhisinha
12 Apr 2013, 3:37 AM
Hi,<br><br>While migrating my app from ExtJs 3.x to ExtJs 4.2 I am encountering issues when setting GridView's autoHeight property to true (autoHeight:true).<br><br>In extJs 3.x extending GridView class and using it as the viewConfig property of gridPanel was getting the things done. Please refer to ExtJs3 code:<br><br><span class="sourceRowText" role="presentation">/ Setting autoHeight to "true" on the grid causes horizontal scrollbars to be disabled.
</span><div id="sb3-L904" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">// This will re-enable it.
</span></div><div id="sb3-L905" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">var AutoHeightGridView = Ext.extend(Ext.grid.GridView, {
</span></div><div id="sb3-L906" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">
</span></div><div id="sb3-L907" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">onLayout: function () {
</span></div><div id="sb3-L908" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">Ext.get(this.innerHd).setStyle("float", "none");
</span></div><div id="sb3-L909" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">this.scroller.setStyle("overflow-x", "scroll");
</span></div><div id="sb3-L910" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">}
</span></div><div id="sb3-L911" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">});
</span></div><div id="sb3-L912" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">
</span></div><div id="sb3-L913" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> //&lt;&lt;==========================================================
</span></div><div id="sb3-L914" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> grid1 = new xg.GridPanel({
</span></div><div id="sb3-L915" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> store: store,
</span></div><div id="sb3-L916" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> cm: cm1,
</span></div><div id="sb3-L917" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> viewConfig: {
</span></div><div id="sb3-L918" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> forceFit: false
</span></div><div id="sb3-L919" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> },
</span></div><div id="sb3-L920" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> //height: 343,
</span></div><div id="sb3-L921" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> autoHeight : true,
</span></div><div id="sb3-L922" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> loadMask: true,
</span></div><div id="sb3-L923" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">
</span></div><div id="sb3-L924" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> //width: 800,
</span></div><div id="sb3-L925" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> width:getAdminGridWidth(),
</span></div><div id="sb3-L926" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> view: new AutoHeightGridView(),
</span></div><div id="sb3-L927" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> renderTo: 'bdy'
</span></div><div id="sb3-L928" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> , viewConfig: {
</span></div><div id="sb3-L929" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> onLoad: Ext.emptyFn,
</span></div><div id="sb3-L930" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> listeners: {
</span></div><div id="sb3-L931" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> beforerefresh: function(v)
</span></div><div id="sb3-L932" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> {
</span></div><div id="sb3-L933" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> v.scrollTop = v.scroller.dom.scrollTop;
</span></div><div id="sb3-L934" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> v.scrollHeight = v.scroller.dom.scrollHeight;
</span></div><div id="sb3-L935" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> v.scrollLeft = v.scroller.dom.scrollLeft;
</span></div><div id="sb3-L936" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> v.scrollWidth = v.scroller.dom.scrollWidth;
</span></div><div id="sb3-L937" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> },
</span></div><div id="sb3-L938" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> refresh: function(v)
</span></div><div id="sb3-L939" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> {
</span></div><div id="sb3-L940" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> v.scroller.dom.scrollTop = v.scrollTop +
</span></div><div id="sb3-L941" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> (v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);
</span></div><div id="sb3-L942" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> v.scroller.dom.scrollLeft = v.scrollLeft +
</span></div><div id="sb3-L943" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> (v.scrollLeft == 0 ? 0 : v.scroller.dom.scrollWidth - v.scrollWidth);
</span></div><div id="sb3-L944" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> }
</span></div><div id="sb3-L945" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> }
</span></div><div id="sb3-L946" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> },
</span></div><div id="sb3-L947" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation">
</span></div><div id="sb3-L948" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> bbar: new Ext.PagingToolbar({ pageSize: 10,
</span></div><div id="sb3-L949" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> store: (store), displayInfo: true, displayMsg: 'Displaying records {0} - {1} of {2}', emptyMsg:"No records to display"})
</span></div><div id="sb3-L950" class="sourceRow" role="presentation"><span class="sourceRowText" role="presentation"> });
<br><br>Now, when I am trying to use similar kind of code I am not geting the desired results rather I get exception "</span>TypeError: config is undefined [Break On This Error] &nbsp;&nbsp; &nbsp;if (config.grid.isTree) {<span class="sourceRowText" role="presentation">"<br><br>My code is ExtJs 4.2. is:<br><br></span>Ext.define('Ext.grid.AutoHeightGridView', {<br>&nbsp;&nbsp;&nbsp; extend: 'Ext.view.Table',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layout: {type: 'hbox', pack:'end'},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onLayout: function () <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ext.get(this.innerHd).setStyle("float", "none");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.scroller.setStyle("overflow-x", "scroll");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>});<br><br>&nbsp; //&lt;&lt;==========================================================<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid1 = new xg.GridPanel({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; store: store,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cm: cm1,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; viewConfig: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; forceFit: false<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //height: 343,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //autoHeight : true,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadMask: true,<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //width: 800,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:getAdminGridWidth(),<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; view: Ext.create('Ext.grid.AutoHeightGridView'),//new Ext.grid.AutoHeightGridView(),<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; renderTo: 'bdy', <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; viewConfig: {<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;onLoad: Ext.emptyFn,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; preserveScrollOnRefresh: true,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scroll: 'horizontal'<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;listeners: {<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;beforerefresh: function(v) <br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; beforerefresh: function(control,eOpts)<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; {<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; v.scrollTop = v.scroller.dom.scrollTop;<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; v.scrollHeight = v.scroller.dom.scrollHeight;<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; v.scrollLeft = v.scroller.dom.scrollLeft;<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; v.scrollWidth = v.scroller.dom.scrollWidth;<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ,<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; refresh: function(v) <br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; {<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; v.scroller.dom.scrollTop = v.scrollTop + <br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; v.scroller.dom.scrollLeft = v.scrollLeft +<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (v.scrollLeft == 0 ? 0 : v.scroller.dom.scrollWidth - v.scrollWidth);<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }<br>//&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bbar: new Ext.PagingToolbar({&nbsp; pageSize: 10,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; store: (store), displayInfo: true, displayMsg: 'Displaying records {0} - {1} of {2}', emptyMsg:"No records to display"})<br>&nbsp;&nbsp;&nbsp; });<br><br>Any help will be highly appreciated<span class="sourceRowText" role="presentation"><br></span><br></div>

slemmon
12 Apr 2013, 8:38 AM
Sorry to do this to you, but is there any way you can reformat/repost?

evant
12 Apr 2013, 5:07 PM
Dupe: http://www.sencha.com/forum/showthread.php?259244

er_abhisinha
14 Apr 2013, 10:25 PM
Thanks for the reply slemmon and evant

I am re-posting the Issue and sorry for the formatting thing.

The issue is:

While I was previously working with ExtJs 3.X version and the grid I was using had autoHeight feature so that gridHeight automatically adjusts itself based upon the number of Rows in the grid. I was using following code to achieve this thing:

// Extending the gridView class and providing the OverFlow-X, this will be used in the View property of GridPanel

var autoheightgridview = Ext.extend
(
Ext.grid.gridview,
{
onlayout: function ()
{
ext.get(this.innerhd).setstyle("float", "none");
this.scroller.setstyle("overflow-x", "scroll");
}
}
);



grid1 = new xg.GridPanel({
store: store,
cm: cm1,
viewConfig: {
forceFit: false
},
autoHeight : true,
loadMask: true,
width:getAdminGridWidth(),
view: new AutoHeightGridView(),
renderTo: 'bdy',
viewConfig: {
onLoad: Ext.emptyFn,
preserveScrollOnRefresh: true,
scroll: 'horizontal'
listeners: {
beforerefresh: function(v)
beforerefresh: function(control,eOpts)
{
v.scrollTop = v.scroller.dom.scrollTop;
v.scrollHeight = v.scroller.dom.scrollHeight;
v.scrollLeft = v.scroller.dom.scrollLeft;
v.scrollWidth = v.scroller.dom.scrollWidth;
}
,
refresh: function(v)
{
v.scroller.dom.scrollTop = v.scrollTop +
(v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);
v.scroller.dom.scrollLeft = v.scrollLeft +
(v.scrollLeft == 0 ? 0 : v.scroller.dom.scrollWidth - v.scrollWidth);
}
}
},

bbar: new Ext.PagingToolbar({ pageSize: 10,
store: (store), displayInfo: true, displayMsg: 'Displaying records {0} - {1} of {2}', emptyMsg:"No records to display"})
});

Now, When I am setting the autoHeight to true in ExtJs 4.2 then I am unable to manage showing the horizontalScrollbar at the bottom of the grid. The code which I have modified while migrating to ExtJs 4.2 is:


Ext.define('Ext.grid.AutoHeightGridView', {
extend: 'Ext.view.Table',
layout: {type: 'hbox', pack:'end'},
onLayout: function ()
{
Ext.get(this.innerHd).setStyle("float", "none");
this.scroller.setStyle("overflow-x", "scroll");
}
});

grid1 = new xg.GridPanel({
store: store,
cm: cm1,
viewConfig: {
forceFit: false
},
autoHeight : true,
loadMask: true,
width:getAdminGridWidth(),
view: Ext.create('Ext.grid.AutoHeightGridView'),//new Ext.grid.AutoHeightGridView(),
renderTo: 'bdy',
viewConfig: {
onLoad: Ext.emptyFn,
preserveScrollOnRefresh: true,
scroll: 'horizontal'
// listeners: {
// beforerefresh: function(v)
// beforerefresh: function(control,eOpts)
// {
// v.scrollTop = v.scroller.dom.scrollTop;
// v.scrollHeight = v.scroller.dom.scrollHeight;
// v.scrollLeft = v.scroller.dom.scrollLeft;
// v.scrollWidth = v.scroller.dom.scrollWidth;
// }
// ,
// refresh: function(v)
// {
// v.scroller.dom.scrollTop = v.scrollTop +
// (v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);
// v.scroller.dom.scrollLeft = v.scrollLeft +
// (v.scrollLeft == 0 ? 0 : v.scroller.dom.scrollWidth - v.scrollWidth);
// }
// }
},

bbar: new Ext.PagingToolbar({ pageSize: 10,
store: (store), displayInfo: true, displayMsg: 'Displaying records {0} - {1} of {2}', emptyMsg:"No records to display"})
});

The code above does not provides me horizotal ScrollBar at the bottom and therefore any columns at the right of the grid gets Truncated.

Also I am getting a error (TypeError: config is undefined [Break On This Error] if (config.grid.isTree) ) while I am using the view: Ext.create('Ext.grid.AutoHeightGridView') and when I remove this code application works fine without any issue except missing horizontalScrollBar.

Please suggets further.

One more thing I would like to ask is:

The current release of 4.2 is the final release or 4.2 is till under the development phase? Can I use 4.1.X which does not contain these kind of issues?