PDA

View Full Version : Problem when loading List Refresh plugin



pkvenu
24 Jan 2012, 9:25 AM
Hi I am trying to use the pull refresh plugin in an mvc architecture and having some issues.

Date.js


var pfLazyLoading = new Ext.data.Store({
model: 'Facility',
remoteFilter: true,
clearOnPageLoad: false,
pageSize: 10,
proxy: {
type: 'scripttag',
url: 'http://stg-parking.511.org/index/M_GetInitialDataByCityLazyLoading?city=San Francisco',
startParam: 'start',
limitParam: 'count',
reader: {
type: 'json',
root: 'Facilities'
}

}
});

In my View(TimeLine.JS)


var timelineList = new Ext.List({
itemTpl: new Ext.XTemplate('<div class="contact"><strong>Space Availability: {SpaceAvailability}</strong><br /> <strong>{ParkingType}<strong></div>'),
cls: 'timeline',
emptyText: '<p class="no-searches">No Tweets found matching that Search</p>',
disableSelection: true,
store: pfLazyLoading,
plugins: [{
ptype: 'listpaging',
autoPaging: false
}, {
ptype: 'pullrefresh'
}],
itemCls: 'tweet'
});

Attach List to a TimeLine Panel:

App.View.TimeLine = Ext.extend(Ext.Panel, {
initComponent: function () {
var config = {
title: 'Result',
id: 'Timeline',
scroll: 'vertical',
fullscreen: true,
items: [filter, timelineList]
};
Ext.apply(this, config);
App.View.TimeLine.superclass.initComponent.call(this);
},
onLoad: function (data) {

console.log('OnLoad TimeLine Called .....');
}
});

Ext.reg('App.View.TimeLine', App.View.TimeLine);


My controller calls this function


var getParkingFacilityByCity = function (cityName) {
mask.show();
pfLazyLoading.load(); // Here i am loading the list
mask.hide();
}

When i send in the request i don't see the Start param and end param values. Can you tell me what i am doing wrong here.

Here is the request which goes out:
http://stg-parking.511.org/index/M_GetInitialDataByCityLazyLoading?city=San Francisco&_dc=1327425640317&count=10&callback=stcCallback1001 (http://stg-parking.511.org/index/M_GetInitialDataByCityLazyLoading?city=San%20Francisco&_dc=1327425640317&count=10&callback=stcCallback1001)

mitchellsimoens
24 Jan 2012, 10:17 AM
If none is sent, it should be assumed as first page. Do you see the params after you take action on the plugin?

pkvenu
24 Jan 2012, 10:37 AM
With out the start param my service breaks. because it is used on the server side to filter the data. If i use it with out the mvc architecture it seems to work fine as shown below.


Ext.ns('App.View');
Ext.setup({
glossOnIcon: false,
onReady: function () {
Ext.regModel('Facility', {
fields:
[
{ name: 'FacilityID', type: 'auto' },
{ name: 'Latitude', type: 'auto' },
{ name: 'Longitude', type: 'auto' },
{ name: 'OwnershipAgencyType', type: 'auto' },
{ name: 'ParkingType', type: 'auto' },
{ name: 'Rendering', type: 'auto' },
{ name: 'LotName', type: 'auto' },
{ name: 'City', type: 'auto' },
{ name: 'SpaceAvailability', type: 'auto' },
{ name: 'Street', type: 'auto' },
{ name: 'ZoneID', type: 'auto' }
]

});

var store = new Ext.data.Store({
model: 'Facility',
remoteFilter: true,
clearOnPageLoad: false,
pageSize: 10,
proxy: {
type: 'scripttag',
url: 'http://stg-parking.511.org/index/M_GetInitialDataByCityLazyLoading?city=San Francisco',
startParam: 'start',
limitParam: 'count',
reader: {
type: 'json',
root: 'Facilities'
}

}
});

var timelineList = {
cls: 'timeline',
emptyText: '<p class="no-searches">No Tweets found matching that Search</p>',
disableSelection: true,
store: store,
plugins: [{
ptype: 'listpaging',
autoPaging: false
}, {
ptype: 'pullrefresh'
}],
itemCls: 'tweet',
itemTpl: new Ext.XTemplate('<div class="contact"><strong>Space Availability: {SpaceAvailability}</strong><br /> <strong>{ParkingType}<strong></div>')
};

if (!Ext.is.Phone) {
new Ext.List(Ext.apply(timelineList, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false

})).show();

}
else {
new Ext.List(Ext.apply(timelineList, {
fullscreen: true
}));
}
}

});