PDA

View Full Version : infinite scrolling not working



bhaskar87
2 Dec 2013, 6:13 AM
Hi,

Infinite scrolling is not working. The grid doesnt show the columns. The json is attached.
The grid code is as follows :


Ext.define('IN.view.override.Driver.Search.DriverResult', {
override: 'IN.view.Driver.Search.DriverResult',

hidden: true,
id: 'driverresult',
title: '',
columnLines: true,
store: 'Driver.Driver',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [

{
xtype: 'actioncolumn',
header: '<b>Detail View</b>',
width: 80,
align: 'center',
locked: true,
items: [
{
handler: function(grid, rowIndex) {
var record= grid.getStore().getAt(rowIndex);
var driverId=record.get('driverId');
var detailview=new IN.controller.Driver();
detailview.DriverDetails(driverId);

},
scope: this,
icon: 'images/quick view.jpg',
tooltip: 'Driver detail'
}
]
},
{
xtype: 'gridcolumn',
//id: 'driverResultFirstName',
width: 75,
dataIndex: 'firstName',
text: '<b>First Name</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
//id: 'driverResultMI',
width: 75,
dataIndex: 'middleName',
text: '<b>MI</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
filter: true,
//id: 'driverresultlastname',
width: 90,
dataIndex: 'lastName',
text: '<b>Last Name</b>',
editor: {
xtype: 'textfield',
margin: 2,
enableKeyEvents: true
}
},
{
xtype: 'gridcolumn',
//id: 'driverResultCity',
width: 85,
dataIndex: 'city',
lockable: false,
text: '<b>City</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
filterable: true,
//id: 'driverResultState',
width: 100,
dataIndex: 'state',
lockable: false,
text: '<b>State</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
//id: 'driverResultZipCode',
dataIndex: 'zipCode',
text: '<b>Zip Code</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
//id: 'driverResultCDL',
width: 100,
dataIndex: 'licenseNumber',
lockable: false,
text: '<b>CDL</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
//id: 'driverResultBirthDate',
width: 95,
dataIndex: 'dateOfBirth',
lockable: false,
text: '<b>Date of Birth</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
renderer : function(value, metaData, record, rowIdx, colIdx, store){
var emailIds = record.get('emailAddress');
metaData.tdAttr = 'data-qtip="' + emailIds + '"';
return emailIds;
},
//id: 'driverResultEmail',
width: 180,
sortable: false,
dataIndex: 'emailAddress',
lockable: false,
text: '<b>Email Address</b>',
editor: {
xtype: 'textfield'
}

},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var mobileNumbers = record.get('mobileNumber');
metaData.tdAttr = 'data-qtip="' + mobileNumbers + '"';
return mobileNumbers;
},
multiSelect: true,
//id: 'driverResultMobileNo',
sortable: false,
dataIndex: 'mobileNumber',
text: '<b>Mobile Number</b>'
},
{
xtype: 'gridcolumn',
//id: 'driverResultTP',
width: 125,
dataIndex: 'terminalPriviledges',
lockable: false,
text: '<b>Terminal Priviledges</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
//id: 'driverResultContactSupervisor',
width: 120,
dataIndex: 'contactSupervisor',
lockable: false,
text: '<b>Contact Supervisor</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
textwrap: '<b>Global Access Code</b>',
//id: 'driverResultCode',
width: 120,
sortable: false,
dataIndex: 'accessCode',
lockable: false,
text: '<b>Global Access Code</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
filterable: true,
//id: 'driverResultSCAC',
width: 105,
sortable: false,
dataIndex: 'SCAC',
lockable: true,
text: '<b>SCAC </b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
//id: 'driverResultExpireDate',
dataIndex: 'expiredDate',
lockable: false,
text: '<b>Expire Date</b>',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
//id: 'driverResultPreferred',
sortable: false,
dataIndex: 'preferredStatus',
text: '<b>Preferred</b>'
}
],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
autoCancel: false,
clicksToMoveEditor: 1
})
]/*,
features: [
{
ftype: 'groupingsummary',
groupHeaderTpl: [
'{lastName}'
]
},{


ftype: 'filters',

filters:[
{
dataIndex: 'firstName'
},
{
dataIndex: 'lastName'
}]

}
]*/
});


me.callParent(arguments);
}

});

The store code is as follows :




Ext.define('IN.store.Driver.Driver', {
extend: 'Ext.data.Store',


requires: [
'IN.model.Driver.Driver'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'IN.model.Driver.Driver',
remoteGroup: true,
storeId: 'Driver',
buffered: true,
pageSize: 100,
leadingBufferZone: 200,
proxy: {
type: 'jsonp',
autoLoad: true,
method: 'GET',
url: '/OPTCS_Services/optcs1/service1/drivers',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
reader: {
//type: 'json',
root: 'result'
}
}
}, cfg)]);
}
});

The model is as follows :




Ext.define('IN.model.Driver.Driver', {
extend: 'Ext.data.Model',


//idProperty: 'lastname',


fields: [
{
name: 'driverId',
type: 'string'
},
{
name: 'lastName',
type: 'string'
},
{
name: 'middleName',
type: 'string'
},
{
name: 'firstName',
type: 'string'
},
{
name: 'dateOfBirth',
type: 'string'
},
{
name: 'city',
type: 'string'
},
{
name: 'state',
type: 'string'
},
{
name: 'licenseNumber',
type: 'string'
},
{
name: 'contactSupervisor',
type: 'string'
},
{
name: 'expiredDate',
type: 'string'
},
{
name: 'accessCode',
type: 'string'
},
{
name: 'emailAddress',
type: 'string'
},
{
name: 'mobileNumber',
type: 'string'
},
{
name: 'terminalPriviledges',
type: 'string'
},
{
name: 'SCAC',
type: 'string'
},
{
name: 'preferredStatus',
type: 'string'
},
{
name: 'zipCode',
type: 'string'
}
]
});

scottmartin
2 Dec 2013, 8:29 AM
Is the store populated with data?

bhaskar87
2 Dec 2013, 8:35 PM
Yes and its json that is attached in the txt file.