PDA

View Full Version : GridPanel - autoHeight + scroll



Zdeno
25 Mar 2010, 4:03 AM
Is there any way how to set up autoHeight of gridPanel what is placed on tabpanel? GridPanel got one column when height isnt defined. Grid layout is set up to 'fit'. I got collapsed grid on the west region and there is everything fine. But if i put same grid to the center region on tabpanel, i see 13px height something and no other data because x-grid3 component got height: 13px and x-grid3-scroller got generated style height: 13px and overflow hidden etc.

Everything is ok when i put gridPanel to the border layout directly

Condor
25 Mar 2010, 4:43 AM
You can't have both autoHeight:true and scrolling (due to css overflow limitations).

You will need to rearrange your layout so you don't need autoHeight:true.

Can you post the code you use for your center region with the grid?

Zdeno
25 Mar 2010, 5:04 AM
Aye my bad didnt think autoHeight but counted height value on tabPanel only. Here is code for center region:



this.centerPanel = new Ext.TabPanel({
region: 'center'
,tabPosition: 'bottom'
,activeTab: 0
,items: [{
id: 'go-chat-main-room'
,title: 'Global'
,closable: false
,items: [
new GO.chat.MessageList()
]
}]
});




GO.chat.MessageList = function(config){

if(!config)
{
config = {};
}

config.id = 'go-chat-messagelist'
config.layout = 'fit';
config.autoScroll = true;
config.store = new GO.data.JsonStore({
url: GO.settings.modules.chat.url+ 'json.php'
,baseParams: {
task: 'message'
,roomid: 0
}
,root: 'results'
,totalProperty:'total'
,idProperty: 'messageid'
,fields: ['messageid','messagetext','messagetime','messagecolor','nick','avatarurl','color']
,remoteSort: true
});
config.hideHeaders = true;
config.animate = true;
config.viewConfig = {
forceFit: true
,forceFill: true
,style: 'height: 100%; background-color: black'
}
config.columns = [
{ id: 'messageid', header: 'messagetext', dataIndex: 'messagetext' /*, renderer: renderMessage */ }
];
config.loadMask=true;
config.sm = new Ext.grid.RowSelectionModel({singleSelect:true})

GO.chat.MessageList.superclass.constructor.call(this, config);
};

Ext.extend(GO.chat.MessageList, GO.grid.GridPanel,{
afterRender : function()
{
this.store.reload();
GO.chat.MessageList.superclass.afterRender.call(this);
}
});

Condor
25 Mar 2010, 5:26 AM
You are overnesting. Why do you need the 'go-chat-main-room' panel? Can't you just use the grid itself?

(if the panel is actually needed then it still needs a layout, e.g. 'fit')

ps. You can't configure a grid with layout:'fit' or autoScroll:true.

Zdeno
25 Mar 2010, 5:36 AM
If i use gridpanel only, everything is fine. But i need to add it to tabpanel because user can read post on this one but can open another one where he has private messages etc.

TabPanel got fine height, gridview too but x-grid3-scroller got wrong values for height. Ofc when i use autoHeight there isnt any scrollbar and overflow value is hidden. I would like to set up overflow to auto and dynamically change value of width/height when browser viewport is resized.

Those border layout is on another tabpanel coz GroupOffice is composed of individual modules on each tab.
I found example on following page http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html - Tabs with nested layout - but when i do same steps the height of gridpanel/view is 13px only and dont know why ...

Zdeno
25 Mar 2010, 5:38 AM
ps. You can't configure a grid with layout:'fit' or autoScroll:true.

As you can see in posted code there is layout: 'fit' only, no autoScroll. And i know what autoScroll do :)

Im apologize for my english maybe it wasnt expressed correctly

Condor
25 Mar 2010, 6:35 AM
I clearly see:

config.layout = 'fit';
config.autoScroll = true;
(remove these lines)

Also, to fix the overnesting you should use:

this.centerPanel = new Ext.TabPanel({
region: 'center',
tabPosition: 'bottom',
activeTab: 0,
items: Ext.apply(new GO.chat.MessageList(), {
title: 'Global',
closable: false
})
});

ps. There is an open bug on hideHeaders:true causing grids on hidden tabs to size incorrectly.

Zdeno
25 Mar 2010, 7:34 AM
Great =) It works perfectly. Can you tell me pleas what does autoScroll do?

michael_w_rickman
23 Jun 2010, 5:52 AM
autoScroll: 'true'

this will automatically put the scroll bars inside the panel when the panel contents (for example: grid contents) are larger than the inside container/box of the panel

dmackerman
9 Sep 2011, 7:05 AM
If you read the documentation on GridPanel:


Although this class inherits many configuration options from base classes, some of them (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will have no effect.