PDA

View Full Version : Grid not showing Scroll bar when added to Accordion



mjchaudhari
8 Feb 2012, 3:15 AM
I am creating two grids using a common method, I am then adding the grid to panel and adding that panel as item in accordion. (I had to add it in panel and then to accordion otherwise second grid will not show header and footer.). Now the grid is not showing the vertical scroll bar. I have tried many layout settings.
Has any body faced similar problem? Can you please share some pointers to me?



function BuildValueSelector(fieldName, objectSpace, selectedValuesJson, callbackData) {
Ext.tip.QuickTipManager.init();
_alreadySelected = jQuery.parseJSON(selectedValuesJson);
_callbackData = callbackData;
var allValues = getAllValues(fieldName, objectSpace);
var accordianItems = new Array(); // {"Name":"name","Item":"controlToAdd",}


//Get tagFilters
var tagfilterGrid = null;
var tagFilters = getValuesByType( allValues, 'TagFilter');
if(tagFilters.length > 0) {
var tagFiltercontrolName = fieldName + '_CustomFilter';
var tagFilterDataUrl = url + '?Filter=TagFilter&FieldName=' + fieldName + '&ObjectSpace=' + objectSpace;
var tagFilterColumns = getGridColumns(controlName, tagFilters);
var tagFilterFields = getGridFields(tagFilters);
var tagMultiselect = IsMultipleSelectionAllowed(tagFilters);
tagfilterGrid = getGrid(tagFiltercontrolName, fieldName + ' Custom Filters', tagFilterDataUrl, tagFilterColumns, tagFilterFields, tagMultiselect); //getGrid(gridName, title, dataUrl, columns, fields, allowMultiSelect
tagfilterGrid.getStore().loadPage(1);
var tagFilterPanel = getGridPanel(tagfilterGrid);
tagFilterPanel.title = fieldName + ' Custom Filters';
accordianItems.push(tagFilterPanel);
}


//GEt entityValues
var entityValues = getValuesByType(allValues, 'VPMEntityData');
if (tagFilters.length > 0) {
var controlName = fieldName + '_Values';
var dataUrl = url + '?Filter=EntityValues&FieldName=' + fieldName + '&ObjectSpace=' + objectSpace;
var entityColumns = getGridColumns(controlName, entityValues);
var entityFields = getGridFields(entityValues);
var entitiesMultiselect = IsMultipleSelectionAllowed(entityValues);
var entityValuesGrid = getGrid(controlName, fieldName + 's', dataUrl, entityColumns, entityFields, entitiesMultiselect); //getGrid(gridName, title, dataUrl, columns, fields, allowMultiSelect
entityValuesGrid.store.loadPage(1);
var valPanel = getGridPanel(entityValuesGrid);
valPanel.title = fieldName + 's';
accordianItems.push(valPanel);
}
var accWin = getAccordionLayout(accordianItems);
return accWin;
}




function getAccordionLayout(items) {
var win = new Ext.Window({
width: 530
, height: 400
, plain: true
, layout: 'accordion'
, border: true
, closable: true
, buttonAlign: 'center'
, items: items,
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
animate: true,
activeOnTop: true
}
});


return win;
}


function getGridPanel(grid) {
var panel = new Ext.Panel({
width: 530,
height: 350,
items: grid,
layout:'fit'
});
return panel;
}


function getGrid(gridName, title, dataUrl, columns, fields, allowMultiSelect)
{
//Variables read from gridConfig object
var controlName = gridName;
var idColumn = 'Id';
//var title = title;


var pageSize = _pageSize;

Ext.define('entity_' + controlName,
{
extend: 'Ext.data.Model',
fields: fields,
idProperty: idColumn
}
);


var dataStore = Ext.create('Ext.data.Store', {
//pageSize: _pageSize,
model: 'entity_' + controlName,
remoteSort: false,
proxy: {
type: 'jsonp',
url: dataUrl,
reader: {
type:'json',
root: 'items',
totalProperty: 'totalCount'
},
simpleSortMode: false
}
});

var sm = new Ext.selection.CheckboxModel();
if(!allowMultiSelect)
{
sm = new Ext.selection.RowModel();
sm.mode = 'SINGLE';


}
var selectorGrid = Ext.create('Ext.grid.Panel', {
width: 525,
//height: 350,
bodyBorder:true,
autoScroll:true,
layout: 'table',
//title: title,
store: dataStore,
padding:'1px',
loadMask: true,
columns: columns,
columnLines: true,
bodyStyle: {
background: '#ffc',
padding: '1px'
},
selModel: sm,
fbar: [{
text: 'Ok',
xtype: 'button',
handler: function () {
var selected = selectorGrid.getSelectionModel().getSelection()
var selectedItemsData = new Array();
for (var i = 0; i < selected.length; i++) {
selectedItemsData.push(selected[i].data);
}
selectionComplete('OK', selectedItemsData);
}
},
{
xtype: 'button',
text: 'Cancel',
handler: function () {
var selected = selectorGrid.getSelectionModel().getSelection()
selectionComplete('CANCEL', selected);
}
},
]


});
return selectorGrid;
}

mitchellsimoens
8 Feb 2012, 8:14 AM
What version and browser you see this on? In 4.0.7 and before it used virtual scrolling which I saw no difference if the grid was in or out of an accordion layout. In 4.1.0 I still saw the browser's native scrollbars.

sskow200
8 Feb 2012, 1:02 PM
I have run into similar issues and fixed them by not nesting Ext.grid.Panel inside Ext.panel.Panel in layouts. There is no need to nest a grid inside a panel as the grid is a panel itself. This usually resolves sizing issues on it's own.

Wrong:



Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
items: [{
xtype: 'gridpanel',
autoScroll: true
//more gridpanel configs...
}]
});


Right:



Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
autoScroll: true
//more grid configs....
});


The grid panel has trouble identifying the size it needs to be when nested in such a way. Removing the nest should give you the proper dimensions and the scrollbars appearing when necessary.