PDA

View Full Version : Problem with scrolling up and down records inside a grid



saga56
19 Oct 2011, 9:12 AM
This is strange, only grids have this problem, form panel works fine! the lateral bar for scroll the items dont scrooll! :/.


When pressed the button gets hilight, but it doesn't work!

Is there a bug?


var gridPropsDoDocType = Ext.create('Ext.grid.Panel', {
store: storePropDocTypesDoStep,
height: 365,
autoScroll: true,
hidden: false,
padding:'5px 0px 5px 0px',
viewConfig: {
loadingText: 'A carregar dados.'



28750

saga56
21 Oct 2011, 12:22 AM
With google chrome it doesn't happen, but on IE9 it does. But i need it to work on IE9. Does anyone know a solution.

netemp
21 Oct 2011, 12:59 AM
The issue related to scrollbar is mainly caused when there is wrong layout used at the parent.

Could you please share the code that how are you creating this window and its children, and what layouts have been used by you?

saga56
21 Oct 2011, 1:09 AM
Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.grid.Panel',
'Ext.panel.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);






The Grid


var gridPropParaDocTypesSteps = Ext.create('Ext.grid.Panel', {
store: storePropriedades,
id: 'gridPropParaDocTypesSteps',
height: 200,
autoScroll: true,
hidden: false,
padding:'5px 0px 5px 0px',
viewConfig: {
loadingText: 'A carregar dados.'
},
dockedItems: [{
id: 'botoesDoStepProp',
height: 35,
xtype: 'toolbar',
dock: 'top',
items:[{
text: 'Adicionar propriedade',
iconCls: 'add',
tooltip: 'Adicionar',
handler : function(){
éDocTypeDoStep=true;
addPropAoDoc();

}
},{
text: 'Cancelar',
iconCls: 'cancel',
tooltip: 'cancelar',
handler : function(){
addPropsAoDocTypesDoSteps.close();
}
}]
}],
columns: [
{text: "Id", width: 40, dataIndex: 'iD_Prop', sortable: true},
{text: "Nome Prop", width: 150, dataIndex: 'propName', sortable: true},
{text: "Nome Filenet", width: 150, dataIndex: 'propNameFilenet', sortable: true},
{text: "Id data type", width: 100, dataIndex: 'iD_DataType', sortable: true},
{text: "Tamanho", width: 100, dataIndex: 'length', sortable: true},
{text: "Choice List", width: 100, dataIndex: 'choiceList', sortable: true},
{text: "DBLookUp", width: 100, dataIndex: 'pDBLookupObj', sortable: true}
],
autoRender:true





The Window


var addPropsAoDocTypesDoSteps = Ext.create('Ext.window.Window',{
title: 'Propriedades para Steps ULTIMO',
id:'popAddPropsParaOsSteps',
modal: true,
height: 425,
width: 1170,
autoScroll: true,
items: [PropSteps,gridPropParaDocTypesSteps],
listeners: {
beforeclose : function(addPropsAoDocTypesDoSteps,obj){


// alert('aqui');

}
}





Chrome works fine, IE9 don't :/, its strange.

netemp
21 Oct 2011, 1:14 AM
There is no layout specified by you in window. You should specify a layout, say 'border' in window and then provide proper regions to your child components.

http://docs.sencha.com/ext-js/4-0/#!/example/layout/border.html

A (http://localhost/pnc/ext-4.0.2a/examples/layout/border.html)lso, the height of your window is 425, and that of grid is 200, so what height has been assigned to the form at the top by you?

Proper using of layout and giving heights properly to children should resolve this issue.

saga56
21 Oct 2011, 1:22 AM
This is a popUp, so i dont need a border, in the page that is behind this window i have a border with north and center regions. The windows have 425 width because there are more items on it, grid is one of then. I make reference that for google chrome there aren't any problem, i think this must be other reason.

Edit:
The Problem is the scroll from the grid that doesn't work, just from the grid, all grids!

netemp
21 Oct 2011, 1:27 AM
This is a popUp, so i dont need a border, in the page that is behind this window i have a border with north and center regions. The windows have 425 width because there are more items on it, grid is one of then. I make reference that for google chrome there aren't any problem, i think this must be other reason.

Your this pop-up window has two components - form at the top and grid at the bottom. And thus, its advisable to use a layout - preferably border. The code shared by you doesn't have layout used and that makes it prone to having an issue related to scrollbars which you are actually facing too. Try making this change related to layout and heights and that should resolve it.

saga56
21 Oct 2011, 1:39 AM
I've tryed this now, and it doesn't work :( . put on 'north' and another 'center'. This must be a problem with grids, because i have some windows with only one item, a grid, and it has the same problem.

netemp
21 Oct 2011, 1:48 AM
Looking at the grid code shared by you, I can see that there is no extended component used by you for the grid, and hence such an issue is a bit weird. Have you tried using grid code of an example provided - http://docs.sencha.com/ext-js/4-0/#!/example/grid/array-grid.html - is there no scroll appearing for such too in IE at your end?

saga56
21 Oct 2011, 2:22 AM
IE9
http://alojaimagens.com/images/0hbendiaognkwt6fbp0p.gif


g (http://alojaimagens.com/images/0hbendiaognkwt6fbp0p.gif)oogle Chrome
http://alojaimagens.com/images/io5j9i1czjif3vk2oigj.gif


The scroll down and up from the mouse roll up and down works fine in both browsers (http://alojaimagens.com/images/io5j9i1czjif3vk2oigj.gif)

saga56
24 Oct 2011, 2:10 AM
Do anyone have this problem, or how to solve it?

saga56
26 Oct 2011, 6:38 AM
o/

saga56
28 Oct 2011, 3:02 AM
:(, anyone? is this a bug from IE9 ?