PDA

View Full Version : Dataview with pagination on sessionstorage



bacha
3 Jul 2014, 6:55 AM
Hi,


I am trying to implement pagination on a dataview tagged to a local sessionstorage but after reading lot of examples and coding it in different ways, I am still not able to achieve pagination.

I am clueless on how I can achieve pagination on a session store. I would like get a basic understanding on how this can be achieved.

I am adding the items into the sessionsotrage from the controller. Any help, direction or examples would really help.

Here is my sample code.

Store - StudentSearchStore.js


Ext.define('StudentSearchStore', {
extend : 'Ext.data.Store',
storeId : 'studentsearchstore',
model : 'Student',
proxy : {
type : 'sessionstorage',
id : 'studentsearchstorage'
},
pageSize : 2,
});



Model - Student.js


Ext.define('Student', {
extend : 'Ext.data.Model',
fields : [{
name : 'identity',
type : 'Integer'
},{
name : 'name',
type : 'String'
}]
});





View - StudentSearch.js


Ext.define('StudentSearch', {
extend : 'Ext.window.Window',
alias : 'widget.student',
itemId : 'studentsearchwindow',
title : 'Search for a Student',
modal : true,
draggable : false,
autoShow : true,
resizable : false,
closable : true,
width : 600,
constrain : true,
items : [{
xtype : 'form',
itemId : 'studentsearch-form',
hidden: true,
items : [{
xtype : 'panel',
itemId : 'searchresultspanel',
autoScroll: true,
height: 300,
items: {
xtype: 'dataview',
store: 'StudentSearchStore',
pageSize : 2,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px; border: solid; border-width: 1px;" >',
'<b> <br/><span>{name}</span><b>' ,
'</div>',
'</tpl>'
),
itemSelector: 'div.thumb-wrap',
emptyText: 'No Search Results'
},
dockedItems: [{
xtype: 'pagingtoolbar',
itemId : 'searchpagingtoolbar',
store: 'StudentSearchStore',
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
}],
buttons: [{
text: 'Open Student Details',
handler: function() {

}
}]


}],
});



Controller - Method to add items to the session store


renderSearchResults : function(selector) {
var resultStore = this.getStore('StudentSearchStore');
resultStore.load();
var selected = selector.value;

var index = resultStore.findExact('name', selected);
var rec = resultStore.getAt(index);
if (!rec) {
resultStore.add({
name : selected
});
}
resultStore.sync();
}

bacha
7 Jul 2014, 6:11 AM
any help :(