PDA

View Full Version : [CLOSED] Toolbar not resizing onWindowResize



jlorenzen
19 Oct 2010, 5:56 AM
I'm having an issue with a grid's top toolbar not resizing properly when I resize my browser. I've modified the simple Grouping example, http://dev.sencha.com/deploy/dev/examples/grid/grouping.html, to reproduce my issue. I've changed the toolbar to be a top toolbar instead of an fbar. This places the Clear Grouping button on the top right. When my browser is maximized and I restore my browser window, the button is not visible. I refresh the page, button is visible, then maximize and the top toolbar continues to not resize. Everything else in the grid resizes properly.

I've added a listener for Ext.EventManager.onWindowResize() that attempts to call the toolbars doLayout() method and grid.view.refresh(true), but the toolbar does not resize.

Here is the code that reproduces my issue:


Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;


// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

var store = new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
});

var grid = new xg.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", sortable: false, dataIndex: 'company'},
{header: "Price", sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Industry", sortable: true, dataIndex: 'industry'},
{header: "Last Updated", sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],

view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
autoWidth: true,
autoHeight: true,
collapsible: true,
animCollapse: false,
title: 'Grouping Example 2',
iconCls: 'icon-grid',
tbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
renderTo: document.body
});

Ext.EventManager.onWindowResize(function() {
grid.getTopToolbar().doLayout(false, true); // not working for some reason
grid.view.refresh(true);
}, this);
});I've attached a screenshot of what the grid and tbar look like. Here the browser window was in a restore state, I refreshed the browser and then maximized it.

I would think the grid.view.refresh would handle it and I would especially think the toolbar.doLayout() would work as well. Is this a bug? Is there a potential workaround?

jsakalos
19 Oct 2010, 8:49 AM
Enclose the grid in Viewport; that monitors browser window resize. Or you can try to set monitorResize:true.

jlorenzen
19 Oct 2010, 1:17 PM
"Enclose the grid in Viewport; that monitors browser window resize"

Detecting when the browser window resizes isn't my issue.

I added the monitorResize: true config option to the toolbar and that didn't solve the issue.


tbar : {
monitorResize: true,
items: ['->',
{
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}
]
},

jlorenzen
19 Oct 2010, 1:40 PM
The similar threads below show this is a common issue:
http://www.sencha.com/forum/showthread.php?92215-Toolbar-resizing-problem
http://www.sencha.com/forum/showthread.php?98914-Ext-Toolbar-Resizing-Issue

You proposed the same resolution of using monitorResize: true and enableOverflow: true, but these updates did not solve my situation. Have I initialized my toolbar correctly? This is with ext 3.2.1 and firefox 3.5.7.


tbar : {
monitorResize: true,
enableOverflow: true,
items: ['->',
{
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}
]
},

jsakalos
19 Oct 2010, 2:57 PM
I think it's a bug, moving this thread to bugs. (It can be duplicate.)

Meanwhile, as a quite dirty workaround run this code after the grid is rendered:



var el = grid.getTopToolbar().getEl();
el.setStyle({width:'auto'});
Ext.fly(el.findParent('div.x-panel-tbar')).setStyle({width:'auto'});

evant
19 Oct 2010, 7:27 PM
I don't see why you think this is a bug. You haven't given the grid any dimensions, which means the toolbar has nothing to size to.

Either
a) Give the grid dimensions, either by explicitly specifying a width/height or putting it in a layout
b) On window resize, give the ~toolbar~ dimensions, if you can't do a.

Condor
19 Oct 2010, 10:39 PM
It looks like you should be using an Ext.Viewport or the FitToParent plugin instead of listening for the window resize yourself.

jsakalos
20 Oct 2010, 1:25 AM
Evan, looks like I didn't sleep enough that I made this conclusion. Of course, this works:


Ext.onReady(function(){

var p = new Ext.Panel({
title:'autoSize Panel'
,autoWidth:true
,height:400
,renderTo:Ext.getBody()
,tbar:['->', {text:'Test'}]
});
Ext.EventManager.onWindowResize(function(w, h) {
p.getTopToolbar().setWidth(w);
});

});

Condor
20 Oct 2010, 2:29 AM
That is exactly the kind of situation where I would recommend using the FitToParent plugin!

jlorenzen
20 Oct 2010, 10:55 AM
Thanks for all the help. Sorry for you guys having to spoon feed your users. I understand the Viewport and the FitToParent plugin now. I'd prefer using a Viewport. I've switched my example over to use a Viewport and the toolbar continues to not resize nor does it have scrollbars. I think I've set everything correctly, so not sure what I am missing.

Here is my latest code with a Viewport. Two questions: Why doesn't the toolbar resize now that I am using a Viewport, and why no scrollbars even though I've set autoScroll: true on the GridPanel?


var grid = new xg.GridPanel({
store: store,
layout: 'fit',
columns: [
{id:'company',header: "Company", sortable: false, dataIndex: 'company'},
{header: "Price", sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Industry", sortable: true, dataIndex: 'industry'},
{header: "Last Updated", sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],

view: new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
autoWidth: true,
autoScroll: true,
autoHeight: true,
collapsible: true,
animCollapse: false,
title: 'Grouping Example 2',
iconCls: 'icon-grid',
tbar : {
//monitorResize: true,
//enableOverflow:false,
items: ['->',
{
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}
]
}/*,
renderTo: document.body*/
});

new Ext.Viewport({
layout: 'fit',
items: [
{
region: 'center',
items: [grid]
}
]
});

Condor
20 Oct 2010, 11:32 AM
Overnested. It should be:

new Ext.Viewport({
layout: 'fit',
items: [grid]
});

jlorenzen
20 Oct 2010, 12:00 PM
Thanks Condor.

Now my toolbar resizes properly, but no scrollbars. I've set autoScroll: true on the GridPanel. Anything else I am missing?

Well scratch that. I figured it out by setting autoScroll: true on the ViewPort.

Everything now works. Thanks again guys.

BTW, I'd have to say the most confusing part about sencha is layout management and it's the most important to understand. Not sure why it's so hard; just wanted to let you know.

jlorenzen
20 Oct 2010, 12:18 PM
Well I thought I was done. My scrollbars were all jacked up because my GroupingView had forceFit: false.

To finally get what I wanted exactly, I set my GridPanel autoWidth and autoHeight to false. Set autoScroll to false on the Viewport and set autoScroll to true on my GridPanel.

Just wanted to share for others if they run into these issues.

Condor
20 Oct 2010, 5:21 PM
Actually, the only thing needed was autoHeight:false in the grid config.