In this one I am going to add one more important and most used functionality i.e. paging in sencha touch List. This thing you will need when we have lots more data in our table and we want to load the data at demand otherwise if you load all your data at a time, the application can be hang or unwanted result(s) can come. So let’s move to implement one of the interesting functionality.
First let’s do modification in ASP.Net MVC Web API.
Add a Helper class :
public static class Helper
{
public static int pageSize = 10;
public static IEnumerable<T> GetPageByList<T>(this IEnumerable<T> data, int pageno)
{
return data.Skip(pageno * pageSize)
.Take(pageSize);
}
}
This helper class is created for getting generic list by page no.
Modify controller Get action in MVC Web API
public IEnumerable<Student> Get(string value = "", int page = 1)
{
IEnumerable<Student> students = Helper.GetPageByList<Student>(dbStudent.Students.Where(m => string.IsNullOrEmpty(value) ||
(m.Name.Contains(value) || m.Country.Contains(value) || m.Address.Contains(value) || m.Email.Contains(value))),
page - 1);
return students.ToList();
}
This Get method takes search value and page no as a parameter and returns the list of students by using Helper class.
Next do modification in Sencha Touch (Sencha Architect) app:
Modify List View:
Ext.define('MyApp.view.List', {
extend: 'Ext.dataview.List',
alias: 'widget.studentlist',
config: {
store: 'Student',
itemTpl: [
'<div>Name: {Name}</div>',
'<div>Email: {Email}</div>'
],
items: [
{
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'textfield',
itemId: 'txtSearchText'
},
{
xtype: 'button',
action: 'search-student',
itemId: 'btnSearch',
iconCls: 'search'
},
{
xtype: 'button',
action: 'student-add',
align: 'right',
itemId: 'btnAdd',
iconCls: 'add'
}
]
}
],
plugins: [
{
autoPaging: true,
type: 'listpaging'
}
]
},
isListEnd: function (store, records, isSuccessful) {
var me = this,
pageSize = store.getPageSize(),
pageIndex = store.currentPage - 1;
if (isSuccessful && records.length < pageSize) {
var totRecords = pageIndex * pageSize + records.length;
store.setTotalCount(totRecords);
}
else {
store.setTotalCount(null);
}
},
initialize: function () {
this.callParent();
var store = Ext.getStore('Student');
if (store) {
store.addBeforeListener('load', this.isListEnd, this);
}
}
});
Here I add a paging plugin in List and set its autopaging property to true. I also added a custom method isListEnd in order to check whether more student records exists or not in the store.
Then add an initialize method of view which binds the isListEnd method to the store load event. isListEnd method calls every time when ever the data is from the server in the store.
Modify store (Student)
Ext.define('MyApp.store.Student', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Student'
],
config: {
model: 'MyApp.model.Student',
pageSize: 10,
storeId: 'Student',
proxy: {
type: 'rest',
url: '/api/Student'
}
}
});
Here I set the pageSize property of Store to 10. You can change or set it according to your need.
Now run an application and hit the search button it will only load ten records first time and when you scroll the list, it will fetch more data from the server:
You can also search the record of the student by typing your search text:
Thanks for reading this article. I think this will helps you a lot.
1 comment:
Hey buddy!! What amazing and useful information you are sharing here, thanks for sharing. I would love to share this information on mine post also so that the visitors of my blog also get a chance to become familiar with this information.
Sencha Touch Development Company
Hire Sencha Touch Developer
Post a Comment