PDA

View Full Version : Grid not showing all rows(Scroll is not happening properly)



ypandey
26 Apr 2012, 10:40 PM
I have created a component(attached image) which has grids on left side and right side. There are Add and Remove buttons between left side grid and right side grid.
When user clicks on Add or Remove button or dblclick row in grid, it will move row to another grid. Add/Remove is happening properly.


Now double click all rows one by one in left grid. It will move all rows to right grid.
Now double click all rows one by one in right grid. It will move all rows to left grid.


Perform above actions 3 or 4 times. After sometimes we will not able to see some rows in the left or right grid.
There are total 13 rows in grid but we will able to see only 9 rows. Also we are not able to move scroll further in grid.


Please go through attache image.


Why we are not able to scrolldown in grid? We are using ExtJs 4.0.7.


Ext.onReady(function() {
Ext.QuickTips.init();

Ext.create('Ext.data.Store', {
storeId:'namelist1',
fields:['name', 'index'],
data:[
{"name":"Cbc", "index":1},
{"name":"Mbc", "index":13},
{"name":"Dbc", "index":12},
{"name":"Hbc", "index":10},
{"name":"Ebc", "index":8},
{"name":"Fbc", "index":9},
{"name":"Kbc", "index":7},
{"name":"Gbc", "index":6},
{"name":"Bbc", "index":11},
{"name":"Ibc", "index":5},
{"name":"Jbc", "index":4},
{"name":"Abc", "index":2},
{"name":"Lbc", "index":3}


],
sorters: [
{
property : 'index',
direction: 'ASC'
}
]
});


Ext.create('Ext.data.Store', {
storeId:'namelist2',
fields:['name', 'phone'],
data:[

],
sorters: [
{
property : 'index',
direction: 'ASC'
}
]
});


var addToRightGrid = function() {

var leftStore = grid1.store;
var rightStore = grid2.store;


if (grid1.getSelectionModel().hasSelection()) {
var models = grid1.getSelectionModel().getSelection();
leftStore.remove(models);
rightStore.add(models);
}
rightStore.sort(rightStore.sorters.items[0].property,rightStore.sorters.items[0].direction);
grid1.getSelectionModel().deselectAll();
grid2.getSelectionModel().deselectAll();
};


var removeFromRightGrid = function() {
var leftStore = grid1.store;
var rightStore = grid2.store;
if (grid2.getSelectionModel().hasSelection()) {
var models = grid2.getSelectionModel().getSelection();
leftStore.add(models);
rightStore.remove(models);
}
leftStore.sort(leftStore.sorters.items[0].property,leftStore.sorters.items[0].direction);
grid1.getSelectionModel().deselectAll();
grid2.getSelectionModel().deselectAll();

};


var grid1 = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('namelist1'),
forceFit:true,
autoScroll: true,
columns: [
{text: 'Index', dataIndex:'index'},
{text: 'Name', dataIndex:'name'}
],
viewConfig: {

},
listeners: {
itemdblclick: addToRightGrid
}
});

var grid2 = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('namelist2'),
forceFit:true,
autoScroll: true,
columns: [
{text: 'Index', dataIndex:'index'},
{text: 'Name', dataIndex:'name'}
],
viewConfig: {


},
listeners: {
itemdblclick: removeFromRightGrid
}
});

Ext.create('Ext.window.Window', {
title: 'Panel',
margin:0,
constrainHeader:true,
bodyPadding: 0,
layout:'fit',
width:700,
height:250,
items:[
{
xtype:'panel',
bodyStyle: {
border: '0'
},
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
layout:'fit',
items:[grid1],
flex: 1
},
{
xtype: 'container',
width:80,
border:0,
margin:'0 4',
layout: {
type: 'hbox',
align: 'middle'
},
items:[
{
xtype:'container',
items:[
{
xtype:'button',
text: 'add',
handler: addToRightGrid
},
{
margin:10,
border:0
},
{
xtype:'button',
text: 'remove',
handler: removeFromRightGrid
}
]
}
]
},
{
xtype: 'panel',
ui:'nsminnerpanel',
layout:'fit',
items:[grid2],
flex: 1
}
]
}
]
}).show();
});



Thanks,
Rabi

vietits
27 Apr 2012, 12:30 AM
There are some problems with scrollbar in Ext 4.0. Try to update your code to Ext 4.1.