ext desktop grid分页控件

/*
 * Example windows
 */

MyDesktop.GridWindow1 = Ext.extend(Ext.app.Module, {
    id: 'grid-win-money',
    init: function() {
        this.launcher = {
            text: '历界展会状况',
            iconCls: 'icon-grid',
            handler: this.createWindow,
            scope: this
        }
    },
    createWindow: function() {
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('grid-win-money');
        if (!win) {
            win = desktop.createWindow({
                id: 'grid-win-money',
                title: '历界展会状况',
                width: 740,
                height: 480,
                iconCls: 'icon-grid',
                shim: false,
                animCollapse: false,
                constrainHeader: true,
                layout: 'fit',
                items:
                    new Ext.grid.GridPanel({
                        id: 'grid-win-money-panel',
                        border: false,
                        pageindex: 1,
                        counts: 100,
                        pagecounts: 10,
                        store: new Ext.data.Store({
                            data: jsondata.getdata(1),
                            reader: new Ext.data.JsonReader({ root: "Detail" }, [
                               { name: 'Company' },
                               { name: 'Price', type: 'float' },
                               { name: 'Change', type: 'float' },
                               { name: 'FChange', type: 'float' }
                            ])
                        }),
                        cm: new Ext.grid.ColumnModel([
                            new Ext.grid.RowNumberer(),
                            new Ext.grid.CheckboxSelectionModel(),
                            { header: "公司", width: 120, sortable: true, dataIndex: 'Company' },
                            { header: "价格", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'Price' },
                            { header: "变动", width: 70, sortable: true, dataIndex: 'Change' },
                            { header: "再变动", width: 70, sortable: true, dataIndex: 'FChange' }
                        ]),

                        viewConfig: {
                            forceFit: true
                        },
                        //autoExpandColumn:'company',
                        tbar: [{
                            text: '添加',
                            iconCls: 'add',
                            handler: function() { jsondata.add('grid-win-money-panel'); }
}],
                            bbar: [{ text: '首页', iconCls: 'x-tbar-page-first',
                                handler: function() { page.firstpage('grid-win-money-panel'); }
                            }, '-',
                                { text: '上一页', iconCls: 'x-tbar-page-prev',
                                    handler: function() { page.prevpage('grid-win-money-panel'); }
                                }, '-',
                                { text: '下一页', iconCls: 'x-tbar-page-next',
                                    handler: function() { page.nextpage('grid-win-money-panel'); }
                                }, '-',
                                { text: '末页', iconCls: 'x-tbar-page-last',
                                    handler: function() { page.lastpage('grid-win-money-panel'); }
                                }, '-',
                                { text: '刷新', iconCls: 'x-tbar-page-refresh',
                                    handler: function() { page.refreshpage('grid-win-money-panel'); } }]
                        }
                    )
            });
        }
        win.show();

        //给grid控件加选择中操作
        var moneygridpanel = Ext.getCmp("grid-win-money-panel");
        var rightClick = new Ext.menu.Menu({ id: 'rightClickCont', items: [{ id: 'rMenu1', handler: function() { jsondata.view('grid-win-money-panel') },
            text: '查看'
        }, { id: 'rMenu2', handler: function() { jsondata.update('grid-win-money-panel'); },
            text: '修改', iconCls: 'option'
        }, { id: 'rMenu3', handler: function() { jsondata.del('grid-win-money-panel'); },
            text: '删除', iconCls: 'remove'}]
        });
        moneygridpanel.addListener('cellclick', cellclick);
        function cellclick(moneygridpanel, rowIndex, columnIndex, e) {
            var record = moneygridpanel.getStore().getAt(rowIndex);
            var fieldName = moneygridpanel.getColumnModel().getDataIndex(columnIndex);
            var data = record.get(fieldName);
            rightClick.showAt(e.getXY())
        }
        //
    }

});

//分页的共用方法
var page = {
    nextpage: function(gid) {
        var extpage = Ext.getCmp(gid);
        if (extpage.pageindex < extpage.pagecounts)
            extpage.pageindex++;
        extpage.getStore().loadData(jsondata.getdata(gid, extpage.pageindex, ''));
    },
    prevpage: function(gid) {
        var extpage = Ext.getCmp(gid);
        if (extpage.pageindex > 1)
            extpage.pageindex--;
        extpage.getStore().loadData(jsondata.getdata(gid, extpage.pageindex, ''));
    },
    firstpage: function(gid) {
        var extpage = Ext.getCmp(gid);
        extpage.getStore().loadData(jsondata.getdata(gid, 1, ''));
    },
    lastpage: function(gid) {
        var extpage = Ext.getCmp(gid);
        extpage.getStore().loadData(jsondata.getdata(gid, extpage.pagecounts, ''));
    },
    refreshpage: function(gid) {
        var extpage = Ext.getCmp(gid);
        extpage.getStore().loadData(jsondata.getdata(gid, extpage.pageindex, ''));  
    }
}
//不同的数据操作的共用方法
var jsondata = {
    getdata: function(gid, pageindex, keys) {
        if (pageindex == 1)
            return Ext.grid.jsonData;
        else
            return Ext.grid.jsonData2;
    },
    add: function(gid) { alert('add'); },
    view: function(gid) { alert('view'); },
    update: function(gid) { alert('update'); },
    del: function(gid) { alert('del'); }
}