PDA

View Full Version : Grid with Paging ExtJS MVC and Asp.Net



dhiraj17
11 Apr 2012, 11:58 PM
I have done paging in ExtJs Grid without MVC. This is rhe code without MVC


<script type="text/javascript">
Ext.Loader.setConfig({ enabled: true });
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.tip.QuickTipManager'
]);


Ext.onReady(function () {
var model = Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: ['EmpID', 'FirstName', 'LastName', 'Email'],
idProperty: 'EmpID'
});
var store = Ext.create('Ext.data.Store', {
storeId: 'empStore',
model: 'Employee',
// autoLoad: true,
pageSize: 5,
proxy: {
type: 'ajax',
url: 'AddOffice.aspx/GetEmployees',
headers: {
'Content-Type': 'application/json'
},
reader: {
type: 'json',
root: 'd.Records',
totalProperty: 'd.TotalRecords',
successProperty: 'success'
}
}
});
store.load({ params: {
start: 0,
limit: 5
}
});
var editor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});
editor.on({
scope: this,
afteredit: function (roweditor, changes, record, rowIndex) {
//your save logic here - might look something like this:
alert(record);
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: store,
id: 'EList',
height: 200,
width: 500,
loadMask: true,
plugins: [editor],
renderTo: Ext.getBody(),
selType: 'rowmodel',
columns: [
{ header: 'Employee ID', dataIndex: 'EmpID', flex: 1, hidden: true },
{ header: 'First Name', dataIndex: 'FirstName', flex: 1, editor: { allowblank: false} },
{ header: 'Last Name', dataIndex: 'LastName', flex: 1, editor: { allowblank: false} },
{ header: 'Email', dataIndex: 'Email', flex: 1, editor: { allowblank: false, vtype: 'email'} }
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
pageSize: 5,
displayInfo: true
})
});
});
</script>


But I am not able to pass the params that i have passed in store.load() when i use the MVC. Here is my Store code:


Ext.define('Employee.store.Employees', { extend: 'Ext.data.Store',
model: 'Employee.model.Employee',
autoLoad: true,
pageSize: 5,
proxy: {
type: 'ajax',
url: '../AddOffice.aspx/GetEmployees',
headers: {
'Content-Type': 'application/json'
},
reader: {
type: 'json',
root: 'd.Records',
totalProperty: 'd.TotalRecords',
successProperty: 'success'
}
}
});

Here is my View code:


var editor = Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1,
listeners: {
afteredit: function (roweditor, changes, record, rowIndex) {
alert(record);
}
}
});


Ext.define('Employee.view.EmpList', {
extend: 'Ext.grid.Panel',
alias: 'widget.EmpList',
store: 'Employees',
title: 'Employees',
id: 'EList',
height: 200,
width: 500,
plugins: [editor],
selType: 'rowmodel',


bbar: Ext.create('Ext.PagingToolbar', {
store: this.store,
pageSize: 5,
displayInfo: true
}),
initComponent: function () {
this.columns = [
{ header: 'Employee ID', dataIndex: 'EmpID', flex: 1, hidden: true },
{ header: 'First Name', dataIndex: 'FirstName', flex: 1, editor: { allowblank: false} },
{ header: 'Last Name', dataIndex: 'LastName', flex: 1, editor: { allowblank: false} },
{ header: 'Email', dataIndex: 'Email', flex: 1, editor: { allowblank: false, vtype: 'email'} }
];
this.callParent(arguments);
},
loadMask: true
});


With MVC, i am getting only the first page i.e only first five records. Paging bar only shows one page.

dhiraj17
12 Apr 2012, 2:45 AM
Changed the view code to :


var editor = Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1,
listeners: {
afteredit: function (roweditor, changes, record, rowIndex) {
alert(record);
}
}
});
Ext.define('Employee.view.EmpList', {
extend: 'Ext.grid.Panel',
alias: 'widget.EmpList',
store: 'Employees',
title: 'Employees',
id: 'EList',
height: 200,
width: 500,
plugins: [editor],
selType: 'rowmodel',
initComponent: function () {
this.columns = [
{ header: 'Employee ID', dataIndex: 'EmpID', flex: 1, hidden: true },
{ header: 'First Name', dataIndex: 'FirstName', flex: 1, editor: { allowblank: false} },
{ header: 'Last Name', dataIndex: 'LastName', flex: 1, editor: { allowblank: false} },
{ header: 'Email', dataIndex: 'Email', flex: 1, editor: { allowblank: false, vtype: 'email'} }
];


this.bbar = Ext.create('Ext.PagingToolbar', {
store: this.store,
pageSize: 5,
displayInfo: true
})
this.callParent(arguments);
},
loadMask: true
});