PDA

View Full Version : Auto-resizing gridpanel



jakeext
24 Aug 2009, 9:32 AM
Hello,

I apologize if this question has been answered before (I did some searches in the forums and found similar questions), but I'm having trouble getting the GridPanel to resize. Specifically, I want to have a horizontal scrollbar appear when there are more columns available than there are to display, and when I resize the browser window, I want the scrollbar to shrink or grow accordingly. I've modified the Paging Grid example slightly to add a few columns and increase the size of other columns, comment out the 'forceFit' config parameter, and changed the 'width' config parameter on the GridPanel to be '100%'. Here is the updated code:



/*!
* Ext JS Library 3.0+
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){

// create the Data Store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,

fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort('lastpost', 'desc');


// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

var grid = new Ext.grid.GridPanel({
width:'100%',
height:500,
title:'ExtJS.com - Browse Forums',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,

// grid columns
columns:[{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
},{
header: "Author",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
},{
header: "Replies",
dataIndex: 'replycount',
width: 500,
align: 'right',
sortable: true
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastpost',
width: 500,
sortable: true
},{
id: 'last',
header: "Column",
dataIndex: 'lastpost',
width: 500,
sortable: true
},{
id: 'last',
header: "Column",
dataIndex: 'lastpost',
width: 500,
renderer: renderLast,
sortable: true
}],

// customize view config
viewConfig: {
//forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});

// render it
grid.render('topic-grid');

// trigger the data store load
store.load({params:{start:0, limit:25}});

});
In Firefox 3.5.2, I get the horizontal scrollbars, but the horizontal scrollbar doesn't resize when the browser window resizes. In IE (I'm using IE6), I don't get any scrollbars at all.

If anyone has any suggestions on what I could do to resolve this problem, I'd greatly appreciate it!

Animal
24 Aug 2009, 9:34 AM
Put it into a layout: 'fit' Viewport.

jakeext
24 Aug 2009, 9:50 AM
Thanks Animal - that worked great!

jakeext
24 Aug 2009, 11:58 AM
I've got another similar question, so I'll ask it as part of this thread. What if I were to add this grid (and potentially other grids) to a Panel that had an accordion layout? I tried this and I get the GridPanels not resizing again. Here's my updated code from before, but this time with 2 copies of the sample grid in a Panel with an accordion layout, and each panel gets loaded when it's opened. I've tried many different things and can't seem to get these grids to resize when they are in an accordion. I've hightlighted the part that I'm talking about below. Again, any thoughts would be appreciated!



/*!
* Ext JS Library 3.0+
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){

// create the Data Store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,

fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],

// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort('lastpost', 'desc');


// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

var grid = new Ext.grid.GridPanel({
width:'100%',
height:500,
title:'ExtJS.com - Browse Forums',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,

// grid columns
columns:[{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
},{
header: "Author",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
},{
header: "Replies",
dataIndex: 'replycount',
width: 500,
align: 'right',
sortable: true
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastpost',
width: 500,
sortable: true
},{
id: 'last',
header: "Column",
dataIndex: 'lastpost',
width: 500,
sortable: true
},{
id: 'last',
header: "Column",
dataIndex: 'lastpost',
width: 500,
renderer: renderLast,
sortable: true
}],

// customize view config
viewConfig: {
//forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});

var grid2 = new Ext.grid.GridPanel({
width:'100%',
height:500,
title:'ExtJS.com - Browse Forums 2',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,

// grid columns
columns:[{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
},{
header: "Author",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
},{
header: "Replies",
dataIndex: 'replycount',
width: 500,
align: 'right',
sortable: true
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastpost',
width: 500,
sortable: true
},{
id: 'last',
header: "Column",
dataIndex: 'lastpost',
width: 500,
sortable: true
},{
id: 'last',
header: "Column",
dataIndex: 'lastpost',
width: 500,
renderer: renderLast,
sortable: true
}],

// customize view config
viewConfig: {
//forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});

var accordion = new Ext.Panel({
title: 'Accordion',
defaults : { collapsed : true },
layout:'accordion',
layoutConfig: {
fill: false,
activeOnTop: false
},
items: [grid, grid2]
});

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

grid.on('expand', function(panel) {
// trigger the data store load
store.load({params:{start:0, limit:25}});
});

grid2.on('expand', function(panel) {
// trigger the data store load
store.load({params:{start:0, limit:25}});
});
});

Animal
24 Aug 2009, 1:21 PM
That looks good, and should work.

What is the problem you are seeing? Can you describe or post a screenshot?

jakeext
25 Aug 2009, 7:07 AM
Thanks again for the reply. I've attached two screenshots of what I'm seeing. In Firefox 3.5.2, I see the scrollbar, but it doesn't grow or shrink when I resize the browser window. In IE6, I see a scrollbar always that takes up most of the horizontal space and also doesn't grow or shrink when I resize the browser window.

Animal
25 Aug 2009, 7:40 AM
Right, I see.

It's not setting the width of its child items.

Try configuring your container's layout like this:



layout: {
type: 'accordion',
autoWidth: false
}


IMNSHO, autoWidth should be false by default. Accordion should set the width of its child items by default, and you should have to change a default to make it autoWidth its child items.

jakeext
25 Aug 2009, 9:56 AM
That worked! I had to remove the 'fill:false' from the accordion Panel's layoutConfig, but after doing that and adding 'autoWidth: false' into the same layoutConfig, it all started working great. Thanks again Animal!