Scrolling Doesn't Show All Rows

Questions related to our Sencha Touch based grid component
User avatar
DustinDomerese
Posts: 7
Joined: Thu Aug 29, 2013 1:31 am

Scrolling Doesn't Show All Rows

Post by DustinDomerese »

We have created a mobile application that shows a grid of about 85 rows. When scrolling on the UberGrid the body of the grid will not allow us to scroll to the bottom of the list of data. If we tap and pull we can see all of the data in the grid but upon releasing the cursor the scrolling snaps back above and does not allow us to see the bottom rows in the results. Any ideas of what we can do to keep this from happening? Thanks.

Dustin Domerese
dustin@dynamicconsultantsgroup.com

User avatar
nickolay
Core Developer
Core Developer
Posts: 3489
Joined: Mon May 16, 2011 10:48 am

Re: Scrolling Doesn't Show All Rows

Post by nickolay »

Are you on the latest version of UberGrid? Can you create a test case demonstrating the problem? Hard to say anything otherwise.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
DustinDomerese
Posts: 7
Joined: Thu Aug 29, 2013 1:31 am

Re: Scrolling Doesn't Show All Rows

Post by DustinDomerese »

Below is listed the code we are using to build the app. I have also listed a link to the site that we are developing. We are in a bit of a time crunch and need to get this rolled out ASAP. This is the last bug we have found that i am trying to correct. Any help you can provide is greatly appreciated. Thanks so much.

https://mlcrmstage.machinerylink.com/Ya ... index.html

Ext.define('Combine', {
extend: 'Ext.data.Model',
config: {
fields: [
'CurrentLocation',
'EquipmentId',
'UnitId',
'NextUse',
'CityState',
'NxtDspStatus',
'InboundTime',
'NextCUE',
'ReqShip',
'ERTS_Short',
'ERTS_Long',
'CertStatus',
'NxtConfigStatus',
'CustomerRoading',
'Make',
'FleetStatus',
'InTransitFlag',
'PrimaryConcave',
'SecondaryConcave',
'ThirdConcave',
'Grates',
'SecondaryGrates',
'FeederhouseFaceplateStyle'
]
}
});

var store = Ext.create('Ext.data.Store', {
model: 'Combine'
});

Ext.define('Location', {
extend: 'Ext.data.Model',
config: {
fields: [ 'text', 'value' ]
}
});

var locStore = Ext.create('Ext.data.Store', {
model: 'Location'
});

var curLocation = null;
var make = null;
var fleet = null;

var grid = null;
var buttons = null;

Ext.setup({
onReady: function () {
//Let's load the data first before we initate the loading of the web objects.
loadData();
loadCurrentLocation();

//The location picker, we dynmaically load it's data
curLocation = Ext.create('Ext.Picker', {
doneButton: 'Filter By Current Location',
cancelButton: false,
useTitles: true,
slots:
[
{
name: 'current_location',
id: 'current_locationPicker',
title: 'Current Location',
tpl: new Ext.Template('{value}'),
store: locStore
}
],
listeners: {
change: function (picker, item, slot) {
curLocation.setValue({ current_location: item.current_location });
updateFilterStatus(false);
}
}
});

//The Make picker, hard code the choices
make = Ext.create('Ext.Picker', {
doneButton: 'Filter By Makes',
cancelButton: false,
useTitles: true,
slots:
[
{
name: 'make',
id: 'makePicker',
title: 'Make',
data: [
{ text: 'All', value: 'All' },
{ text: 'John Deere', value: '1' },
{ text: 'Case', value: '2' }
]
}
],
listeners: {
change: function (picker, item, slot) {
make.setValue({ make: item.make });
updateFilterStatus(false);
}
}
});

//The Fleet Status picker, hard code the choices
fleet = Ext.create('Ext.Picker', {
doneButton: 'Filter By Fleet Status',
cancelButton: false,
useTitles: true,
slots:
[
{
name: 'fleetStatus',
id: 'fleetPicker',
title: 'Fleet Status',
data: [
{ text: 'All', value: 'All' },
{ text: 'Active', value: 'Active' },
{ text: 'Planned Disposal', value: 'Planned Disposal' }
]
}
],
listeners: {
change: function (picker, item, slot) {
fleet.setValue({ fleetStatus: item.fleetStatus })
updateFilterStatus(false);
}
}
});

loadTheGrid(false); //false - leave them at the default size, good for desktops

buttons = Ext.create('Ext.Container', {
fullscreen: false,
layout: {
type: 'hbox',
align: 'top'
},
height: '10px',
items:
[
{
docked: 'top',
xtype: 'titlebar',
title: 'Yard Manager',
items: [
{
xtype: 'button',
ui: 'decline',
text: 'Make Smaller',
handler: function () {
this.setUi(this.getUi() == 'confirm' ? 'decline' : 'confirm'); //Toggle the button state
this.setText(this.getUi() == 'confirm' ? 'Make Bigger' : 'Make Smaller'); //Toggle the text
Ext.Viewport.remove(grid, true);
loadTheGrid(this.getUi() == 'confirm');
}
},
{
xtype: 'button',
text: 'Current Location',
handler: function () {
curLocation.show(); //Show the picker for the location
}
},
{
xtype: 'button',
ui: 'normal',
id: 'transit',
text: 'Show In Transit?',
handler: function () {
this.setUi(this.getUi() == 'confirm' ? 'decline' : 'confirm'); //Toggle the button state
updateFilterStatus(false);
}
},
{
xtype: 'button',
text: 'Make',
handler: function () {
make.show(); //Show the picker for the makes
}
},
{
xtype: 'button',
text: 'Fleet Status',
handler: function () {
fleet.show(); //Show the picker for the fleet
}
},
{
xtype: 'button',
ui: 'action',
text: 'Clear Filters',
handler: function () {
buttons.items.getAt('0').getAt('0').getAt('2').setUi('normal'); //Reset the show in transit? button to show nothing
updateFilterStatus(true); //Clear all the filters
}
}
]
}
]
});

Ext.Viewport.add(grid);
Ext.Viewport.add(buttons);
Ext.Viewport.setScrollable(false);
fleet.setValue({ fleetStatus: 'Active' });
buttons.setHidden(false);
updateFilterStatus(false);
}
});

function loadData() {
$.ajax({
type: 'POST',
url: 'https://mlcrmstage.machinerylink.com/ML ... anagerData',
data: '',
dataType: "xml",
success: function (xml) {
$(xml).find('MLC_YARD_MANAGER').each(function () {
var equipmentid = $(this).attr('equipmentid');
var combineId = $(this).attr('Name');
var curLocation = $(this).attr('CurLoc');
var nextUse = $(this).attr('NextUse');
var city = $(this).attr('City');
var state = $(this).attr('St');
var nextDispStatus = $(this).attr('NxtDStat');
var inBoundTime = $(this).attr('InBoundTme');
var nextCUE = $(this).attr('NextCUE');
var contractDate = $(this).attr('ContractDate');
var reqShip = $(this).attr('ReqShip');
var erts = $(this).attr('geo_ertsdatetime'); //RTS
var certStatus = $(this).attr('CertStat');
var nextConfigStat = $(this).attr('NextConfigStat');
var contractModel = $(this).attr('ContractModel');
var customerRoading = $(this).attr('Roading');
var make = $(this).attr('JDorCase');
var fleetstatus = $(this).attr('FleetStat');
var intransitflag = $(this).attr('InTransitFlag');
var primaryConcave = $(this).attr('PrimaryConcave');
var secondaryConcave = $(this).attr('SecondaryConcave');
var thirdConcave = $(this).attr('ThirdConcave');
var grates = $(this).attr('Grates');
var secondaryGrates = $(this).attr('SecondaryGrates');
var feederhouse = $(this).attr('FeederhouseFaceplateStyle');
//alert(combineId + curLocation + nextUse);
var formattedCityState = "";

if (city != null && state != null) {
formattedCityState = formatString(city) + ", " + formatString(state);
}

store.add({
CurrentLocation: curLocation,
EquipmentId: formatString(equipmentid),
UnitId: formatString(combineId),
NextUse: formatString(nextUse),
CityState: formattedCityState,
NxtDspStatus: formatString(nextDispStatus),
InboundTime: formatDate(inBoundTime),
NextCUE: formatDate(nextCUE),
ReqShip: formatDate(reqShip),
ERTS_Short: formatDate(erts),
ERTS_Long: erts,
CertStatus: formatString(certStatus),
NxtConfigStatus: formatString(nextConfigStat),
CustomerRoading: formatString(customerRoading),
Make: formatString(make),
FleetStatus: formatString(fleetstatus),
InTransitFlag: formatString(intransitflag),
PrimaryConcave: formatString(primaryConcave),
SecondaryConcave: formatString(secondaryConcave),
ThirdConcave: formatString(thirdConcave),
Grates: formatString(grates),
SecondaryGrates: formatString(secondaryGrates),
FeederhouseFaceplateStyle: formatString(feederhouse)
});
});

Ext.fly('appLoadingIndicator').destroy();
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error while getting the data.');
}
});
}

function formatDate(dt) {
var str;
if (dt != null) {
var result = dt.toString().substring(0, 10);
str = result.substring(5, 7) + "-" + result.substring(8, 10);
} else {
str = "";
}
return str;
}

function formatString(str) {
if (str == null || str == undefined) {
str = "";
}
return str;
}

var result;

function loadCurrentLocation() {
$.ajax({
type: 'POST',
url: 'https://mlcrmstage.machinerylink.com/ML ... eLocations',
data: '',
dataType: "xml",
success: function (xml) {
locStore.add({ text: "All", value: "All" });//Add an option to select all of them, clearing the filtering

$(xml).find('MLC_YARD_MANAGER').each(function () {
var currentLocation = $(this).attr('CurLoc');
locStore.add({ text: currentLocation, value: currentLocation });
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error while loading all the current locations.');
}
});
}

var popoverpanel = null;

function loadTheGrid(smaller) {
if (smaller) {//true - load the grid again, except make it smaller widths
Ext.Viewport.addCls('smallerPage')
grid = new UberGrid.Panel({
headerHeight: 25,
rowHeight: 10,
buffered: false,
store: store,
columns: [
{
header: 'Current Location',
dataIndex: 'CurrentLocation',
sortable: true,
width: 100
},
{
header: 'Unit #',
dataIndex: 'UnitId',
sortable: true,
width: 35
},
{
header: 'Next Use',
dataIndex: 'NextUse',
sortable: true,
width: 75
},
{
header: 'City/State',
dataIndex: 'CityState',
sortable: true,
width: 50
},
{
header: 'Nxt Dis Status',
dataIndex: 'NxtDspStatus',
sortable: true,
width: 45
},
{
header: 'Inbound Time',
dataIndex: 'InboundTime',
sortable: true,
width: 30
},
{
header: 'Next CUE',
dataIndex: 'NextCUE',
sortable: true,
width: 40
},
{
header: 'Req Ship',
dataIndex: 'ReqShip',
sortable: true,
width: 28
},
{
header: 'ERTS',
dataIndex: 'ERTS_Short',
sortable: true,
width: 30
},
{
header: 'Cert Status',
dataIndex: 'CertStatus',
sortable: true,
width: 40
},
{
header: 'Nxt Cnfg Status',
dataIndex: 'NxtConfigStatus',
sortable: true,
width: 50
},
{
header: 'Customer Roading',
dataIndex: 'CustomerRoading',
sortable: true,
width: 40
}
],
listeners: {
rowtap: function (panel, record, rowIndex, simpleGrid, event) {
var erts = record.get('ERTS_Long') == undefined || record.get('ERTS_Long') == null ? new Date() : new Date(record.get('ERTS_Long').substring(0, 19).replace('T', ' ').replace(/-/g, "/"));

popoverpanel = new Ext.form.Panel({
modal: true,
left: '10%',
top: '10%',
width: '80%',
height: '80%',
hideOnMaskTap: true,
items: [
{
xtype: 'fieldset',
title: record.get('UnitId'),
items: [
{
xtype: 'hiddenfield',
name: 'id',
value: record.getId()
},
{
xtype: 'datetimepickerfield',
label: 'ERTS Date',
name: 'erts_date',
value: erts,
picker: {
yearFrom: erts.getFullYear() - 10,
yearTo: erts.getFullYear() + 10,
minuteInterval: 5,
ampm: true
}
},
{
xtype: 'selectfield',
name: 'certified',
label: 'Certified',
value: record.get('CertStatus'),
options: [
{ text: 'Certified', value: 'Certified' },
{ text: 'No', value: 'No' },
{ text: 'Delinked', value: 'Delinked' }
]
}
]
},
{
xtype: 'fieldset',
title: record.get('UnitId') + ' Configuration Order',
items: [
{
xtype: 'textfield',
name: 'primary-concave',
label: 'Primary Concave',
value: record.get('PrimaryConcave'),
readOnly: true
},
{
xtype: 'textfield',
name: 'secondary-concave',
label: 'Secondary Concave',
value: record.get('SecondaryConcave'),
readOnly: true
},
{
xtype: 'textfield',
name: 'third-concave',
label: 'Third Concave',
value: record.get('ThirdConcave'),
readOnly: true
},
{
xtype: 'textfield',
name: 'grates',
label: 'Grates',
value: record.get('Grates'),
readOnly: true
},
{
xtype: 'textfield',
name: 'secondary-grates',
label: 'Secondary Grates',
value: record.get('SecondaryGrates'),
readOnly: true
},
{
xtype: 'textfield',
name: 'feederhouse-faceplate',
label: 'Feederhouse Faceplate Style',
value: record.get('FeederhouseFaceplateStyle'),
readOnly: true
},
{
xtype: 'selectfield',
name: 'fulfilled',
label: 'Fulfilled',
value: record.get('NxtConfigStatus'),
options: [
{ text: 'Fulfilled', value: 'Fulfilled' },
{ text: 'Unfulfilled', value: 'Unfulfilled' },
]
}
]
},
{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
margin: '0 0 25 0',
handler: function () {
popoverpanel.items.items[2].setDisabled(true); //Disable so we don't get double submission

var data = "equipmentid=" + record.get('EquipmentId')
+ "&erts=" + popoverpanel.items.items[0].items.items[1].getValue().toISOString()
+ "&certified=" + popoverpanel.items.items[0].items.items[2].getValue()
+ "&fulfilled=" + popoverpanel.items.items[1].items.items[6].getValue();
console.log("Submitting: " + data);

$.ajax({
type: "POST",
url: "https://mlcrmstage.machinerylink.com/ML ... anagerData",
data: data,
success: function (msg) {
console.log($(msg).find('string').text());
var text = $(msg).find('string').text();

if (text.indexOf('Update failed.') != -1) {
alert($(msg).find('string').text());
} else if (text != "Success") {
alert($(msg).find('string').text());
var record = grid.store.getById(popoverpanel.items.items[0].items.items[0].getValue());
record.set('ERTS_Short', formatDate(popoverpanel.items.items[0].items.items[1].getValue().toISOString())); //short date format
record.set('ERTS_Long', popoverpanel.items.items[0].items.items[1].getValue().toISOString()); //long date format
record.set('CertStatus', popoverpanel.items.items[0].items.items[2].getValue());
record.set('NxtConfigStatus', popoverpanel.items.items[1].items.items[6].getValue());
} else {
var record = grid.store.getById(popoverpanel.items.items[0].items.items[0].getValue());
record.set('ERTS_Short', formatDate(popoverpanel.items.items[0].items.items[1].getValue().toISOString())); //short date format
record.set('ERTS_Long', popoverpanel.items.items[0].items.items[1].getValue().toISOString()); //long date format
record.set('CertStatus', popoverpanel.items.items[0].items.items[2].getValue());
record.set('NxtConfigStatus', popoverpanel.items.items[1].items.items[6].getValue());
}

Ext.Viewport.remove(popoverpanel);
}
});
}
}
]
});

Ext.Viewport.add(popoverpanel);
popoverpanel.show('pop');
}
}
});
} else {
//regular size
Ext.Viewport.removeCls('smallerPage')
grid = new UberGrid.Panel({
headerHeight: 50,
rowHeight: 20,
buffered: false,
store: store,
columns: [
{
header: 'Current Location',
dataIndex: 'CurrentLocation',
sortable: true,
width: 250
},
{
header: 'Unit #',
dataIndex: 'UnitId',
sortable: true,
width: 80
},
{
header: 'Next Use',
dataIndex: 'NextUse',
sortable: true,
width: 175
},
{
header: 'City/State',
dataIndex: 'CityState',
sortable: true,
width: 100
},
{
header: 'Nxt Dis Status',
dataIndex: 'NxtDspStatus',
sortable: true,
width: 125
},
{
header: 'Inbound Time',
dataIndex: 'InboundTime',
sortable: true,
width: 80
},
{
header: 'Next CUE',
dataIndex: 'NextCUE',
sortable: true,
width: 100
},
{
header: 'Req Ship',
dataIndex: 'ReqShip',
sortable: true,
width: 65
},
{
header: 'ERTS',
dataIndex: 'ERTS_Short',
sortable: true,
width: 65
},
{
header: 'Cert Status',
dataIndex: 'CertStatus',
sortable: true,
width: 90
},
{
header: 'Nxt Cnfg Status',
dataIndex: 'NxtConfigStatus',
sortable: true,
width: 100
},
{
header: 'Customer Roading',
dataIndex: 'CustomerRoading',
sortable: true,
width: 95
}
],
listeners: {
rowtap: function (panel, record, rowIndex, simpleGrid, event) {
var erts = record.get('ERTS_Long') == undefined || record.get('ERTS_Long') == null ? new Date() : new Date(record.get('ERTS_Long').substring(0, 19).replace('T', ' ').replace(/-/g, "/"));

popoverpanel = new Ext.form.Panel({
modal: true,
left: '10%',
top: '10%',
width: '80%',
height: '80%',
hideOnMaskTap: true,
items: [
{
xtype: 'fieldset',
title: record.get('UnitId'),
items: [
{
xtype: 'hiddenfield',
name: 'id',
value: record.getId()
},
{
xtype: 'datetimepickerfield',
label: 'ERTS Date',
name: 'erts_date',
value: erts,
picker: {
yearFrom: erts.getFullYear() - 10,
yearTo: erts.getFullYear() + 10,
minuteInterval: 5,
ampm: true
}
},
{
xtype: 'selectfield',
name: 'certified',
label: 'Certified',
value: record.get('CertStatus'),
options: [
{ text: 'Certified', value: 'Certified' },
{ text: 'No', value: 'No' },
{ text: 'Delinked', value: 'Delinked' }
]
}
]
},
{
xtype: 'fieldset',
title: record.get('UnitId') + ' Configuration Order',
items: [
{
xtype: 'textfield',
name: 'primary-concave',
label: 'Primary Concave',
value: record.get('PrimaryConcave'),
readOnly: true
},
{
xtype: 'textfield',
name: 'secondary-concave',
label: 'Secondary Concave',
value: record.get('SecondaryConcave'),
readOnly: true
},
{
xtype: 'textfield',
name: 'third-concave',
label: 'Third Concave',
value: record.get('ThirdConcave'),
readOnly: true
},
{
xtype: 'textfield',
name: 'grates',
label: 'Grates',
value: record.get('Grates'),
readOnly: true
},
{
xtype: 'textfield',
name: 'secondary-grates',
label: 'Secondary Grates',
value: record.get('SecondaryGrates'),
readOnly: true
},
{
xtype: 'textfield',
name: 'feederhouse-faceplate',
label: 'Feederhouse Faceplate Style',
value: record.get('FeederhouseFaceplateStyle'),
readOnly: true
},
{
xtype: 'selectfield',
name: 'fulfilled',
label: 'Fulfilled',
value: record.get('NxtConfigStatus'),
options: [
{ text: 'Fulfilled', value: 'Fulfilled' },
{ text: 'Unfulfilled', value: 'Unfulfilled' },
]
}
]
},
{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
margin: '0 0 25 0',
handler: function () {
popoverpanel.items.items[2].setDisabled(true); //Disable so we don't get double submission
var data = "equipmentid=" + record.get('EquipmentId')
+ "&erts=" + popoverpanel.items.items[0].items.items[1].getValue().toISOString()
+ "&certified=" + popoverpanel.items.items[0].items.items[2].getValue()
+ "&fulfilled=" + popoverpanel.items.items[1].items.items[6].getValue();
console.log("Submitting: " + data);

$.ajax({
type: "POST",
url: "https://mlcrmstage.machinerylink.com/ML ... anagerData",
data: data,
success: function (msg) {
console.log($(msg).find('string').text());
var text = $(msg).find('string').text();

if (text.indexOf('Update failed.') != -1) {
alert($(msg).find('string').text());
} else if (text != "Success") {
alert($(msg).find('string').text());
var record = grid.store.getById(popoverpanel.items.items[0].items.items[0].getValue());
record.set('ERTS_Short', formatDate(popoverpanel.items.items[0].items.items[1].getValue().toISOString())); //short date format
record.set('ERTS_Long', popoverpanel.items.items[0].items.items[1].getValue().toISOString()); //long date format
record.set('CertStatus', popoverpanel.items.items[0].items.items[2].getValue());
record.set('NxtConfigStatus', popoverpanel.items.items[1].items.items[6].getValue());
} else {
var record = grid.store.getById(popoverpanel.items.items[0].items.items[0].getValue());
record.set('ERTS_Short', formatDate(popoverpanel.items.items[0].items.items[1].getValue().toISOString())); //short date format
record.set('ERTS_Long', popoverpanel.items.items[0].items.items[1].getValue().toISOString()); //long date format
record.set('CertStatus', popoverpanel.items.items[0].items.items[2].getValue());
record.set('NxtConfigStatus', popoverpanel.items.items[1].items.items[6].getValue());
}

Ext.Viewport.remove(popoverpanel);
}
});
}
}
]
});

Ext.Viewport.add(popoverpanel);
popoverpanel.show('pop');
}
}
});
}

Ext.Viewport.add(grid);
grid.setHidden(false);
}

function updateFilterStatus(clear) {
if (clear) {
curLocation.setValue({ current_location: 'All' });
make.setValue({ make: 'All' });
fleet.setValue({ fleetStatus: 'All' });
}

grid.store.clearFilter();

var filters = "";
var toApply = [];

if (curLocation.getValue() != undefined && curLocation.getValue().current_location != null) {
filters = curLocation.getValue().current_location;
toApply.push(curLocation.getValue().current_location == 'All' ? null : curLocation.getValue().current_location);
} else {
filters = "All";
toApply.push(null);
}

//
switch (buttons.items.getAt('0').getAt('0').getAt('2').getUi()) {
case 'normal':
filters = filters + " > All";
toApply.push(null);
break;
case 'confirm': //Show ones that are in transit
filters = filters + " > In Transit";
toApply.push(1);
break;
case 'decline': //Show ones that are not in transit
filters = filters + " > Not In Transit";
toApply.push(0);
break;
default:
filters = filters + " > All";
toApply.push(null);
break;
}

if (make.getValue() != undefined && make.getValue().make != null) {// The makes
toApply.push(make.getValue().make == 'All' ? null : make.getValue().make);//check if it is all or not, if so set null so we don't filter on it
switch (make.getValue().make) {
case '1':
filters = filters + " > John Deere";
break;
case '2':
filters = filters + " > Case";
break;
default:
filters = filters + " > " + make.getValue().make;
break;
}
} else {
filters = filters + " > All";
toApply.push(null);
}

if (fleet.getValue() != undefined && fleet.getValue().fleetStatus != null) {
filters = filters + " > " + fleet.getValue().fleetStatus;
toApply.push(fleet.getValue().fleetStatus == 'All' ? null : fleet.getValue().fleetStatus); //check if it is all or not, if so set null so we don't filter on it
} else {
toApply.push(null);
filters = filters + " > All";
}

var apply = [];
var count = 0;
toApply.forEach(function (item) {
if (item != null) {
switch (count) {
case 0:
apply.push({ property: "CurrentLocation", value: item });
break;
case 1:
apply.push({ property: "InTransitFlag", value: item });
break;
case 2:
apply.push({ property: "Make", value: item });
break;
case 3:
apply.push({ property: "FleetStatus", value: item });
break;
default:
break;
}
}

count++;
});

if(count != 0) grid.store.filter(apply);

buttons.items.getAt('0').setTitle(filters);
return filters;
}

User avatar
nickolay
Core Developer
Core Developer
Posts: 3489
Joined: Mon May 16, 2011 10:48 am

Re: Scrolling Doesn't Show All Rows

Post by nickolay »

The link you posted opens empty grid?
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
nickolay
Core Developer
Core Developer
Posts: 3489
Joined: Mon May 16, 2011 10:48 am

Re: Scrolling Doesn't Show All Rows

Post by nickolay »

Ah, I'm opening it Chrome and 2.2.1 has a small issue with ST2.2.1 that's why I guess.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
DustinDomerese
Posts: 7
Joined: Thu Aug 29, 2013 1:31 am

Re: Scrolling Doesn't Show All Rows

Post by DustinDomerese »

Yea if you open it on a mobile client it works, just not in a desktop browser for some reason.

User avatar
nickolay
Core Developer
Core Developer
Posts: 3489
Joined: Mon May 16, 2011 10:48 am

Re: Scrolling Doesn't Show All Rows

Post by nickolay »

Can you zip the file with the sources and attach it here? Also please include the response from your server as a static file, so I could load the same data.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
DustinDomerese
Posts: 7
Joined: Thu Aug 29, 2013 1:31 am

Re: Scrolling Doesn't Show All Rows

Post by DustinDomerese »

Here is the source code. We are always returning the same response to the page every time it is called. Below is a URL that you can hit in any browser to see the XML response that is returned from the POST to the server. Thanks.

https://mlcrmstage.machinerylink.com/ML ... anagerData

Dustin Domerese

User avatar
nickolay
Core Developer
Core Developer
Posts: 3489
Joined: Mon May 16, 2011 10:48 am

Re: Scrolling Doesn't Show All Rows

Post by nickolay »

Have an idea - try setting the "rowHeight" config to 23 - this is the actual height of your rows in the DOM. Seems UG just multiplies the number of rows on the "rowHeight" and because of 3px difference the amount of scrollable area is calculated incorrectly.

Please let me know if this helps.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
DustinDomerese
Posts: 7
Joined: Thu Aug 29, 2013 1:31 am

Re: Scrolling Doesn't Show All Rows

Post by DustinDomerese »

You rock! That fixed the issue. Is there a way to change the "Scrollable Area" in code so I could do the calculation for UG? Not a big deal. I was able to tweak the heights on both the small and large versions of the app and get it to display correctly. Thanks so much for your help.

Dustin Domerese

Post Reply