PDA

View Full Version : List paging from json



slmd
8 Nov 2011, 10:25 AM
Hi!

I have found some code that is supposed to help me build a paging system using a list that works. The thing is, this code is using datas that are not dynamic and i failed trying to modify it in order to load datas from a Json file.
Can someone help me get this work from a json file?

Thank you in advance

//Json exemple


{
"profile": [{
"firstname": "firstname1",
"lastname": "lastname1",
"age": "1"
},{
"firstname": "firstname2",
"lastname": "lastname2",
"age": "2"
},{
"firstname": "firstname3",
"lastname": "lastname3",
"age": "3"
}]
}


//Paging script


Ext.setup({

tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady : function() {

var dataLink;
if (Ext.is.Desktop) {
dataLink = "http://127.0.0.1/path/";
}


var loadedTotal = 0;
var AppProxy = Ext.extend(Ext.data.Proxy, {
read: function(operation, callback, scope) {
var thisProxy = this;
//console.log(thisProxy);


var task = new Ext.util.DelayedTask(function(){
loadedTotal += operation.limit;

var contacts = [];
for (var i = 0; i < loadedTotal; i++){
var contact = new thisProxy.model({
firstname: 'Peter',
lastname: 'Gibbons'
});
contacts.push(contact);
}


operation.resultSet = new Ext.data.ResultSet({
records: contacts,
total : contacts.length,
loaded : true
});


operation.setSuccessful();
operation.setCompleted();


if (typeof callback == "function") {
callback.call(scope || thisProxy, operation);
}
});
task.delay(500);
}
});
Ext.data.ProxyMgr.registerType('contactstorage', AppProxy);

Ext.regModel('Contact', {
fields: ['firstname', 'lastname'],
proxy: {
type: 'contactstorage'
}
});

var store = new Ext.data.Store({
model: 'Contact',
autoLoad: true,
pageSize: 2
});

var groupingBase = {
itemTpl: '<div class="contact2"><strong>{firstname}</strong> {lastname}</div>',
indexBar: false,
store: store
};


var dockedItems = [{
xtype: 'toolbar',
title: 'paging example',
ui: 'dark',
dock: 'top'
}];

new Ext.Panel({
layout: 'card',
fullscreen: true,
dockedItems: dockedItems,
items: [new Ext.List(Ext.apply(groupingBase, {
fullscreen: true,
plugins:[{
ptype: 'listpaging'
}]
}))]
}).show();
}
});

TDeBailleul
8 Nov 2011, 10:44 AM
Hi

This is what I'm working on :

Here is my List :



this.actuGrid = new Ext.List({
store: app.stores.actualites,
});


And here is my model and my store :



app.models.Actualites = Ext.regModel("app.models.Actualites", {
fields: [
'blogEntryInfosId',
'content',
'date',
'author',
'title',
'grpName'
]
});


app.stores.actualites = new Ext.data.Store({
model: 'app.models.Actualites',
proxy: {
type: 'ajax',
url: 'YOUR_JSON_FILE',
reader: {
type: 'json',
root: 'actualite'
}
}
});


Hope this helps

slmd
8 Nov 2011, 11:26 AM
Thank you for your reply but what i need my program to do is, to load a certain number of items from my json everytime i will push the "load more..." button and append it to the current list.

TDeBailleul
8 Nov 2011, 3:32 PM
Well with the example I showed you earlier, you just need to load your store like this :

At first :



app.stores.actualites.load(
new Ext.data.Operation({
start:0,
limit:2
})
);


And then when your click the load more button :



this.loadMoreBtn = new Ext.Button({
text:'load',
handler:function(){
i++;
app.stores.actualites.load(
new Ext.data.Operation({
start:0,
limit:i
})
);
}
});


This will load one more item very time you click the button.

I hope I got it right this time :)

slmd
9 Nov 2011, 1:38 AM
Hello,

I played a little bit with the piece of code you gave me and came out with the following. I don't know if i am doing it right but i can't get it to work. Can you please tell what i am doing wrong?



Ext.setup({
onReady: function(){
var mylocalhost = 'http://127.0.0.1/Appsfan-v2';
//var mylocalhost = 'http://127.0.0.1/your-path';//Replace my localhost by yours

Ext.regModel('demoApp', {
fields: [
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'},
{name: 'age', type: 'number'}
]
})

var PagingStore = new Ext.data.Store({
model: 'demoApp',
sorters: 'lastname',
proxy: {
type: 'ajax',
url: mylocalhost+'/data.json',
reader: {
type: 'tree',
root: 'profile'
}
}
});

PagingStore.load(
new Ext.data.Operation({
start:0,
limit:2
}
))

var list = new Ext.List({
itemTpl: '{firstname} {lastname} -> Age : {age}',
store: PagingStore
})

var i = 1;

var loadMore = new Ext.Button({
text:'load',
handler:function(){
PagingStore.load(
new Ext.data.Operation({
start:0,
limit: i
})
);
}
});

var topBar = new Ext.Toolbar({
title: 'Paging',
items: loadMore,
dock: 'top'
})

new Ext.Panel({
fullscreen: true,
scroll: 'verticall',
layout: 'card',
items:
[list],
dockedItems: [topBar]
})
}
});

TDeBailleul
9 Nov 2011, 1:59 AM
Can you at least get the whole JSON data, or this doesn't work either ?
Try to change you're reader type to 'json'. I think 'tree' type is more appropriated for TreeStore and NestedList.

slmd
9 Nov 2011, 2:09 AM
Yeah i can show the datas from the json. But the paging system doesn't work.

TDeBailleul
9 Nov 2011, 2:21 AM
You never increase i.



PagingStore.load(
new Ext.data.Operation({
start:0,
limit:2
}
));


var i = 2;


var loadMore = new Ext.Button({
text:'load',
handler:function(){
alert(i);
i++;
PagingStore.load(
new Ext.data.Operation({
start:0,
limit: i
})
);
}
});

slmd
9 Nov 2011, 2:35 AM
i can see that "i" is incrementing but the paging still doesn't work sorry!

TDeBailleul
9 Nov 2011, 3:05 AM
Try to alert(i) when you click the load button and give the result.

slmd
9 Nov 2011, 6:44 AM
I have built my program another way and i am finaly able to retrieve my datas from the json file BUT the paging system still sucks. The pageSize property seems not to respond therefore when i press on the load more plugin text that appears at the bottom of my list, it appends all my json elements to my list everytime. I am confident about the fact that i am almost there but i can't see how to make it happen.

Here the code



Ext.setup({

tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady : function() {

var dataLink;
if (Ext.is.Desktop) {
dataLink = "http://127.0.0.1/Appsfan-v2";
} else {
dataLink = "http://appsfan.kreactive.eu";
}

Ext.regModel('Profile', {
fields: [
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'},
{name: 'age', type: 'number'}
]
});

var store = new Ext.data.JsonStore({
model: 'Profile',
autoLoad: false,
remoteFilter: true,
sortOnFilter: true,
//sorters: [{property : 'lastname', direction: 'ASC'}],
pageSize: 1,
clearOnPageLoad: false,
proxy: {
type: 'ajax',
url: dataLink+'/data.json',
reader: {
root: 'profile',
type: 'tree'
}
}
})


//console.log(store.loadPage(0))

var groupingBase = new Ext.List({
fullscreen: true,
itemTpl: '<div class="contact2"><strong>{firstname}</strong> {lastname} -> {age}</div>',
indexBar: false,
store: store,
plugins: [{
ptype: 'listpaging',
autoPaging: false
}]
});



var panel = new Ext.Panel({
layout: 'card',
fullscreen: true,
items: [groupingBase],
dockedItems: [{
xtype: 'toolbar',
title: 'paging example',
}]
})
//console.log(datas)
}
});


The json


{
"profile": [{
"firstname": "firstname1",
"lastname": "lastname1",
"age": "1"
},{
"firstname": "firstname2",
"lastname": "lastname2",
"age": "2"
},{
"firstname": "firstname3",
"lastname": "lastname3",
"age": "3"
}]
}


Thank you