PDA

View Full Version : Toolbar resizing problem



clesquir
16 Feb 2010, 11:29 AM
Ext version tested:


Ext 3.1.1



Adapter used:


ext



css used:


ext-all.css
../shared/examples.css
grid-examples.css





Browser versions tested against:


FF3.5.7 (firebug 1.4.5 installed)



Operating System:


Ubuntu 9.10 x64



Description:


The toolbar of GridPanel or TreePanel is not resized when the grid is being resized by, in this example, a scrollbar appearing. In this example, you can see that the toolbar is not well resized because the right button is not completely showed up when the store is being populated.



Test Case:
Use the example ext-3.1.1\examples\grid\array-grid.html with these modifications:

array-grid.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->

<!-- page specific -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- overrides to base library -->

<!-- page specific -->
<script type="text/javascript" src="array-grid.js"></script>

</head>
<body>
<div>
<div style="margin:0 auto; width:80%;">
<div style="background:#DDE1EE none repeat scroll 0 0;float:left;margin-bottom:10px;margin-top:10px;width:100%;">
<div style="background:#FFFFFF;border:1px solid #B1BAD8;margin:6px;">
<div id="grid-example"></div>
</div>
</div>
</div>
<div>
</body>
</html>
array-grid.js


/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// sample static data for the store
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 'auto',
autoHeight: true,
width: 'auto',
tbar: [
{id: 'lft_btn', text: "Left button"},
'->',
{id: 'rgt_btn', text: "Right button"}
],
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

// render the grid to the specified div in the page
grid.render('grid-example');

// manually load local data
store.loadData.defer(2500, store, [myData]);
});
Screenshot:


attached

Jamie Avins
24 Feb 2010, 4:39 PM
Your configuration is not going to work with toolbars. Without a managing container, you need to specify a height/width for this to work properly.

clesquir
25 Feb 2010, 9:40 AM
Even if I put the grid inside a container, it won't set the right auto-width to the toolbar and the right button will still be off. Any solution?



// create the Grid
var container = new Ext.Container({
autoWidth: true,
autoHeight: true,
items: [
new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 'auto',
autoHeight: true,
width: 'auto',
tbar: [
{id: 'lft_btn', text: "Left button"},
'->',
{id: 'rgt_btn', text: "Right button"}
],
// config options for stateful behavior
stateful: true,
stateId: 'grid'
})
]
});

// render the grid to the specified div in the page
container.render('grid-example');

Jamie Avins
25 Feb 2010, 11:04 AM
Moving this to the help forum where they can go over the layout issues here.

clesquir
26 Feb 2010, 7:40 AM
Someone ever went through this case?

clesquir
3 Mar 2010, 11:29 AM
I still don't have any idea how to output this correctly.

someone could help? :s

mcote
8 Mar 2010, 11:03 AM
Same problem here! Getting a lot of resizing problem related with the scrollbars in Firefox. :">

Sylvain Filteau
8 Mar 2010, 11:04 AM
This problem should be addressed IMO. Does someone in ExtJS team can reproduce the problem ?

Is the resolution of this bug is feasible or ExtJS don't want to play with that kind of setup?

Thanks !

clesquir
16 Mar 2010, 8:40 AM
bump!

Animal
16 Mar 2010, 8:43 AM
Sized to what? You don't give it a width, so how is any possible code supposed to size the grid UPON RENDER?

clesquir
16 Mar 2010, 8:58 AM
I specified the width: 'auto' and autoWidth: true, isn't suppose to set the width of the component according to the parent element then?!
Is there another way to proceed then?

Animal
16 Mar 2010, 8:59 AM
Yes.

Tell it what you want it to do.

What do you want it to do?

clesquir
16 Mar 2010, 9:16 AM
I just want the grid and the toolbar to always resize his width and height from his container.

In the exemple I posted, when the grid store has been loaded, the grid is being extended from his data and a scrollbar is appearing on the browser window. The grid is being resized correctly but the toolbar won't follow the resizing as you can see by the right button being hidden. So the toolbar is not resized according to his container.

clesquir
7 Apr 2010, 6:31 AM
Bump!

Animal
7 Apr 2010, 6:47 AM
Bump what? What is your requirement here?

Sylvain Filteau
7 Apr 2010, 9:47 AM
I just want the grid and the toolbar to always resize his width and height from his container.

This is the requirements.

Animal
7 Apr 2010, 12:41 PM
If it is in a Container with a size managing layout, this all works.

You must ask it to do things. It cannot read your mind.

clesquir
8 Apr 2010, 5:32 AM
From this example http://www.extjs.com/forum/showthread.php?p=441068#post441068, I added the property layout: 'fit' to the container. Here is a screenshot of the result...

Do you have any thoughts about this? Can we still put a component autoHeight and autoWidth inside basic HTML code with Ext 3?

P.S.: This was all working with the first example code before we move from Ext 2 to Ext 3

mankz
7 Sep 2010, 2:44 PM
set monitorResize : true, and layout : 'fit' on your container and it should work.

jlorenzen
19 Oct 2010, 1:30 PM
I'm having the same exact issue. What do you mean by: "and layout: 'fit' on your container'? I set layout on my toolbar and my gridpanel and it didn't solve the issue.

deister
31 Dec 2010, 4:55 AM
I have the same issue here. Toolbar doesn't expand when grid is resized.


set monitorResize : true, and layout : 'fit' on your container and it should work.

I don't understand, grid doesn't have a layout config option, does it?

I'm using Ext 3.3 and have the same problem in all browsers


Toolbar config


....
var toolbar = new Ext.PagingToolbar({
autoWidth : true,
hideBorders : false,
pageSize : PORTAL.CONFIG.TOOL_NROWS ,
store : store
})
....


Grid config:


....
var grid = new Ext.grid.GridPanel({
monitorResize : true,
layout : 'fit',
tbar : toolbar,
id : 'grid_' + base_id,
stripeRows : true,
enableColumnResize : true,
frame : false,
border : true,
collapsible : false,
header : false,
store : store,
colModel: new Ext.grid.ColumnModel({
columns : columns,
defaults : {
sortable: true,
menuDisabled: false
}
}),
viewConfig: {
forceFit : forceFit,
rowOverCls : 'grid_hover_style',
scrollOffset : 0
}
})
....

steffenk
31 Dec 2010, 6:28 AM
you all have the same issue, that's why it fail:
You have to set a width to parent container, which is the GridPanel here. layout property is used for childs inside container.

deister
4 Jan 2011, 7:54 AM
Hi Thanks for response,

I can't set a width to the grid, because I want the grid to resize when its container grows.

I'm using the grid inside a "portlet" largely inspired by the ones used in the portal demo example.

See the attachment

Thanks

Demolisher
24 Jan 2011, 6:10 AM
I think u need to make the bbar dynamic and display it using
renderTo:grid.bbar.id,


bbar=new Ext.MYPagingToolbar({
renderTo:grid.bbar.id,


myname:'job_monitor_id',
totalCount : totalCount,
totalPageCount : totalPageCount,
pageSize: pageSize,
store: grid.store,
displayInfo: true
})



where id is the id u created while creating the bbar in the grid

bbar:{
id:'mypagetoolbarid',
hidden:true
},

with the help of this, issue for resize has been resolved for me. but a new issue has been created.
in my grid i had added a filter and based on that filter my bbar as well as grid will be reloaded again. I am getting the new bbar with fresh data, but along with that the existing bbar is also coming. I am not getting any method to remove the bbar. kindly suggest

cbadz
3 Mar 2011, 10:41 AM
I found that if you have a panel with a tbar/bbar directly in the viewport items array, it will cause issues. Judging by the API and the conversations in this thread, the tbar/bbar are looking to its parent for guidance in what they should be doing, so I think in my example that means they were looking to the viewport, and that is why nothing was happening.

I embedded this panel in an outerpanel with a layout: fit, and then sent the outerpanel to the viewport, and this seems to fix the problem in Firefox. IE will resize as long as the browser window is getting larger, but for some reason it will not resize the toolbars to smaller widths if I shrink the browser window.

where I had problems:


this.mainPanel = new Ext.Panel({
title: 'title',
frame:true,
height:600,
bbar: this.bbar, //coded offscreen
tbar: this.tbar, //coded offscreen
layout: 'fit',
items: [this.innerPanel]
});

this.vp = new Ext.Viewport({items:this.mainPanel});
resizing works in FF:


this.mainPanel = new Ext.Panel({
title: 'title',
frame:true,
height:600,
bbar: this.bbar, //coded offscreen
tbar: this.tbar, //coded offscreen
layout: 'fit',
items: [this.innerPanel]
});

this.outerPanel = new Ext.Panel({
frame: false,
layout: 'fit',
items:[this.mainPanel]
});
this.vp = new Ext.Viewport({items:this.outerPanel});


UPDATE: So I always thought of the viewport as big brother, and I never wanted to touch it. But I found if I simply set its layout then I can get rid of a container while also having the functionality work for both FF and IE now. I hope some of this is helpful for the rest of you. FYI innerPanel has an items array containing a GridPanel.

MY SOLUTION - allows toolbar resizing in FF 3.6.10 and IE7


this.mainPanel = new Ext.Panel({
title: 'title',
frame:true,
height:600,
bbar: this.bbar, //coded offscreen
tbar: this.tbar, //coded offscreen
layout: 'fit',
items: [this.innerPanel] //innerPanel has a grid panel within itself
});

this.vp = new Ext.Viewport({
layout: 'fit',
items: [this.mainPanel]
});

yuanyelss
3 Mar 2011, 10:52 PM
This issue should be resolved IMO. Does anyone in the ExtJS team can reproduce the problem?The resolution of this error is feasible or ExtJS installer did not want to play it?

vanstyn
25 Mar 2011, 5:10 PM
I used this simple hack/workaround to solve the problem in my case:


Ext.ux.Plugin.AutoWidthToolbars = Ext.extend(Ext.util.Observable,{
init: function(cmp) {
if(! cmp.getTopToolbar) { return; }
cmp.on('afterrender',function(c) {
var tbar = c.getTopToolbar();
if(tbar) {
this.setAutoSize(tbar);
}
var bbar = c.getBottomToolbar();
if(bbar) {
this.setAutoSize(bbar);
}
},this);
},
setAutoSize: function(toolbar) {
var El = toolbar.getEl();
El.setSize('auto');
El.parent().setSize('auto');
}
});
Ext.preg('autowidthtoolbars',Ext.ux.Plugin.AutoWidthToolbars);

Then for any panel, grid, etc you want to have autoWidth tbar and bbars set:


plugins: [ 'autowidthtoolbars' ]

ExTriqui
14 Sep 2011, 3:01 AM
This works for me perfectly (extjs 3.4):
* The onWindowResize is only needed to resize the table, it doesn't affect the toolbars at all.


App.grid = new Ext.grid.GridPanel({
renderTo: "myDiv",
tbar: ['->', ...],
autoHeight: true,
...

});
Ext.EventManager.onWindowResize(App.grid.getView().refresh, App.grid.getView());
App.grid.tbar.setWidth("auto");
App.grid.topToolbar.setSize("auto");


This will delete all styling from toolbars, thus letting the browser resize them automatically.
This has to be called after the grid is built, cause the grid will force the toolbars to some weird width, even if you specify autoWidth: true and width: 'auto' in both the grid and the toolbar.