PDA

View Full Version : gridpanel height prevents use of horizontal scrollbar



michael melsen
8 Feb 2010, 2:23 AM
Hi all,

I have the following situation: one panel called groupmaintenance that will hold two gridpanels. It allows records to be moved between the two grids just like in the example grid_dnd_to_grid.

The problem I'm facing with my setup is the fact that I want to give a height attribute to my gridpanels in order to set the initial height, but adding it will result in the scrollbar not being displayed anymore. As the right grid will initially not hold any data, the grid will show a difference in height compared to the grid that does have some records if the height attriute is not set. If I do set the height of the grid, the horizontal scrollbar will not show up.

My goal is to have the grids have the same height and to let the grids resize in width depending on the width of the parent, the panel in this case. Also the scrollbar should be shown.

the attached image shows what happens when the height is not set. When I do set the height as seen in the code below, the scrollbar dissapears but the grids do have the same height. Perhaps you guys have an idea how to solve it or is it a bug?


groupmaintenance panel:

Ext.ns('StudentGroup');

StudentGroup.Maintenance = Ext.extend(Ext.Panel, {

initComponent:function() {

firstGrid = new StudentGroup.SelectableGrid({
stripeRows: true
});

secondGrid = new StudentGroup.SelectedGrid({
stripeRows: true
});

var config = {
id: 'studentgroupmaintenance'
,bodyStyle: {"background-color" : '#DFE8F6',
"font-family" : "tahoma,arial,verdana,sans-serif"
}
,title: 'Onderhouden groepen'
,layout: 'column'
,items: [{
columnWidth:.5
,items: firstGrid
}, {
columnWidth:.5
,items: secondGrid
}] // eo items
}; // eo config object

Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
StudentGroup.Maintenance.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {

// call parent
StudentGroup.Maintenance.superclass.onRender.apply(this, arguments);
} // eo onRender
,store:function(baseParamName, baseParamValue) {
firstGrid.store.setBaseParam(baseParamName, baseParamValue);
firstGrid.store.load();
}
}); // eo extend

// register component
Ext.reg('StudentGroupMaintenance', StudentGroup.Maintenance);

left grid:

Ext.ns('StudentGroup');

// create pre-configured grid class
StudentGroup.SelectableGrid = Ext.extend(Ext.grid.GridPanel, {

PAGESIZE: 10,
ddGroup: 'secondGridDDGroup',
initComponent:function() {

this.personColumnModel = new Ext.grid.ColumnModel({
// This is a utility class that can be passed into a
// Ext.grid.ColumnModel
// as a column config that provides an automatic row numbering
//column.
columns : [
{
id : 'id',
header : "Identify",
dataIndex : 'id',
hidden : true

}, {
header : "Achternaam",
sortable : true,
dataIndex : 'achterNaam'
}, {
header : "Initialen",
sortable : true,
dataIndex : 'voorLetters'
}, {
header : "Voorvoegsels",
sortable : true,
dataIndex : 'voorVoegsels'
}, {
header : "Voornamen",
sortable : true,
dataIndex : 'voorNamen',
hidden : true
}, {
header : "Roepnaam",
sortable : true,
dataIndex : 'roepNaam',
hidden : true
}, {
header : "m/v",
sortable : true,
dataIndex : 'geslacht'
}, {
header : "Geboren op",
sortable : true,
// Format to display.
renderer : Ext.util.Format.dateRenderer('Y-m-d'),
dataIndex : 'geboorteDatum'
}, {
header : "Geboorteplaats",
sortable : true,
dataIndex : 'geboortePlaats',
hidden : true
}, {
header : "1st nat.",
sortable : true,
renderer: this.flag,
dataIndex : 'nationaliteit',
hidden : true
}
],
listeners: {
'render': function(grid){
grid.on('configchange',
function(columnModel) {
alert('sortinfo: ' + columnModel);

},
this
)
}
}
}); // eo personColumnModel

this.store = new Ext.data.JsonStore({
url : 'ActionHandlerServlet?action=studentData',
root:'students.data',
remoteSort : true,
fields: [
{name: 'id', mapping : 'id'},
{name: 'achterNaam', mapping : 'achterNaam'},
{name: 'voorLetters', mapping : 'voorLetters'},
{name: 'voorVoegsels', mapping : 'voorVoegsels'},
{name: 'voorNamen', mapping : 'voorNamen'},
{name: 'roepNaam', mapping : 'roepNaam'},
{name: 'geslacht', mapping : 'geslacht'},
{name: 'geboorteDatum', mapping : 'geboorteDatum'},
{name: 'geboortePlaats', mapping : 'geboortePlaats'},
{name: 'nationaliteit', mapping : 'nationaliteit'}

],

reader:new Ext.data.JsonReader({
id:'id'
,totalProperty:'students.totalRows'
,root:'students.data'
}, [ {
name : 'id',
mapping : 'id'
}, {
name : 'achterNaam',
mapping : 'achterNaam'
}, {
name : 'voorLetters',
mapping : 'voorLetters'
}, {
name : 'voorVoegsels',
mapping : 'voorVoegsels'
}, {
name : 'voorNamen',
mapping : 'voorNamen'
}, {
name : 'roepNaam',
mapping : 'roepNaam'
}, {
name : 'geslacht',
mapping : 'geslacht'
}, {
name : 'geboorteDatum',
type : 'date',
dateFormat : 'Y-m-d',
mapping : 'geboorteDatum'
}, {
name : 'geboortePlaats',
mapping : 'geboortePlaats'
}, {
name : 'nationaliteit',
mapping : 'nationaliteit'
}]) // eo jsonreader
}); // eo store

// configure the grid
Ext.apply(this, {
loadMask: true
,height : 300
,enableColumnMove : true
,autoScroll: true
,enableDragDrop : true
,store: this.store
,cm: this.personColumnModel
,plugins:[new Ext.ux.grid.Search({
checkIndexes:['achterNaam']
,minChars:2
,autoFocus:true
})]
//,viewConfig:{sortAscText: 'Sorteer oplopend', sortDescText: 'Sorteer aflopend'}
,items: [{title: 'Niet ingedeelde studenten'}]
}); // eo apply

// add paging toolbar
this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:this.PAGESIZE
}); // eo pagingtoolbar

// call parent
StudentGroup.SelectableGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {

// call parent
StudentGroup.SelectableGrid.superclass.onRender.apply(this, arguments);
this.store.load({params:{start:1, limit:this.PAGESIZE}});

}

,onLayout:function() {
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
firstGrid.store.add(records);
firstGrid.store.sort('achterNaam', 'ASC');
return true
}
});
}

}); // eo extend

// register component
Ext.reg('StudentGroupSelectable', StudentGroup.SelectableGrid);

right grid:

Ext.ns('StudentGroup');

// create pre-configured grid class
StudentGroup.SelectedGrid = Ext.extend(Ext.grid.GridPanel, {
ddGroup: 'firstGridDDGroup',
PAGESIZE: 10,
initComponent:function() {

this.personColumnModel = new Ext.grid.ColumnModel({
// This is a utility class that can be passed into a
// Ext.grid.ColumnModel
// as a column config that provides an automatic row numbering
//column.
columns : [
{
id : 'id',
header : "Identify",
dataIndex : 'id',
hidden : true

}, {
header : "Achternaam",
sortable : true,
dataIndex : 'achterNaam'
}, {
header : "Initialen",
sortable : true,
dataIndex : 'voorLetters'
}, {
header : "Voorvoegsels",
sortable : true,
dataIndex : 'voorVoegsels'
}, {
header : "Voornamen",
sortable : true,
dataIndex : 'voorNamen',
hidden : true
}, {
header : "Roepnaam",
sortable : true,
dataIndex : 'roepNaam',
hidden : true
}, {
header : "m/v",
sortable : true,
dataIndex : 'geslacht'
}, {
header : "Geboren op",
sortable : true,
// Format to display.
renderer : Ext.util.Format.dateRenderer('Y-m-d'),
dataIndex : 'geboorteDatum'
}, {
header : "Geboorteplaats",
sortable : true,
dataIndex : 'geboortePlaats',
hidden : true
}, {
header : "1st nat.",
sortable : true,
renderer: this.flag,
dataIndex : 'nationaliteit',
hidden : true
}
],
listeners: {
'render': function(grid){
grid.on('configchange',
function(columnModel) {
alert('sortinfo: ' + columnModel);

},
this
)
}
}
}); // eo personColumnModel


this.store = new Ext.data.JsonStore({
remoteSort : true,
url : 'ActionHandlerServlet?action=studentData',
root:'students.data',
fields: [
{name: 'id', mapping : 'id'},
{name: 'achterNaam', mapping : 'achterNaam'},
{name: 'voorLetters', mapping : 'voorLetters'},
{name: 'voorVoegsels', mapping : 'voorVoegsels'},
{name: 'voorNamen', mapping : 'voorNamen'},
{name: 'roepNaam', mapping : 'roepNaam'},
{name: 'geslacht', mapping : 'geslacht'},
{name: 'geboorteDatum', mapping : 'geboorteDatum'},
{name: 'geboortePlaats', mapping : 'geboortePlaats'},
{name: 'nationaliteit', mapping : 'nationaliteit'}

],

reader:new Ext.data.JsonReader({
id:'id'
,totalProperty:'students.totalRows'
,root:'students.data'
}, [ {
name : 'id',
mapping : 'id'
}, {
name : 'achterNaam',
mapping : 'achterNaam'
}, {
name : 'voorLetters',
mapping : 'voorLetters'
}, {
name : 'voorVoegsels',
mapping : 'voorVoegsels'
}, {
name : 'voorNamen',
mapping : 'voorNamen'
}, {
name : 'roepNaam',
mapping : 'roepNaam'
}, {
name : 'geslacht',
mapping : 'geslacht'
}, {
name : 'geboorteDatum',
type : 'date',
dateFormat : 'Y-m-d',
mapping : 'geboorteDatum'
}, {
name : 'geboortePlaats',
mapping : 'geboortePlaats'
}, {
name : 'nationaliteit',
mapping : 'nationaliteit'
}]) // eo jsonreader
/*,proxy: new Ext.data.HttpProxy( {url : 'ActionHandlerServlet?action=studentData'})*/
}); // eo store


// configure the grid
Ext.apply(this, {
loadMask: true
,enableColumnMove : true
,height: 300
,autoScroll: true
,enableDragDrop: true
,store:this.store
,cm: this.personColumnModel
/* ,viewConfig:{sortAscText: 'Sorteer oplopend', sortDescText: 'Sorteer aflopend'}
,view: new Ext.ux.grid.BufferView({
// render rows as they come into viewable area.
scrollDelay: false
})*/
,items: [{title: 'Ingedeelde studenten'}]
}); // eo apply

// add paging toolbar
this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:this.PAGESIZE
}); // eo pagingtoolbar

// call parent
StudentGroup.SelectedGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {

// call parent
StudentGroup.SelectedGrid.superclass.onRender.apply(this, arguments);

}
,onLayout:function() {
// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
secondGrid.store.add(records);
secondGrid.store.sort('achterNaam', 'ASC');
return true
}
});
}
}); // eo extend

// register component
Ext.reg('StudentGroupSelected', StudentGroup.SelectedGrid);

Animal
8 Feb 2010, 5:22 AM
,items: [{
columnWidth:.5
,items: firstGrid
}, {
columnWidth:.5
,items: secondGrid
}] // eo items
}; // eo config object




overnest.

WHY put each of your GridPanels INSIDE A PANEL WHICH HAS NO LAYOUT?

michael melsen
9 Feb 2010, 2:25 AM
Hi Animal,

thanks for the eye-opener! I've changed the code in the following and by adding the layout and rearranging the panels I saw the correct result:


var config = {
id: 'studentgroupmaintenance'
,bodyStyle: {"background-color" : '#DFE8F6',
"font-family" : "tahoma,arial,verdana,sans-serif"
}
,title: 'Onderhouden groepen'
,items: [formPanel,{
layout: 'column'
,items: [{
layout: 'fit'
,columnWidth:.5
,title: 'Niet ingedeelde studenten'
,items: firstGrid
}, {
layout: 'fit'
,columnWidth:.5
,title: 'Niet ingedeelde studenten'
,items: secondGrid
}]
}] // eo items
}; // eo config object


thanks a lot!