1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    15
    Answers
    2
    Vote Rating
    0
    dhiraj17 is on a distinguished road

      0  

    Default Answered: Grid with Paging ExtJS MVC and Asp.Net

    Answered: Grid with Paging ExtJS MVC and Asp.Net


    I have done paging in ExtJs Grid without MVC. This is rhe code without MVC
    Code:
    <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:
    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:
    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.

  2. Changed the view code to :
    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',
        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
    });

  3. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    15
    Answers
    2
    Vote Rating
    0
    dhiraj17 is on a distinguished road

      0  

    Default Got the solution

    Got the solution


    Changed the view code to :
    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',
        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
    });