2011年11月10日

ExtJs Grid分页时序号自增的实现,以及查询以后的序号的处理

ExtJs Grid分页时，默认情况下每页的序号都是从1起始的，这往往不符合我们的习惯。这里实现了序号的自动增加。

如：每页20条第一页从1开始，第二页从21条开始。

 先定义一个全局变量如record_start = 0,这里记得赋初始值主要是考虑第一次加载。

在Ext.grid.ColumnModel内创建一个序号列rownumber 

 

new Ext.grid.RowNumberer({

 

    header: '序号',
    width: 40,
    renderer: function(value, metadata, record, rowIndex){
        return record_start + 1 + rowIndex;
    }
})

 然后在gridpanel内的PagingToolbar内添加doLoad事件

 

bbar: new Ext.PagingToolbar({

 

        pageSize: 21,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录",
        doLoad: function(start){
            record_start = start;
            var o = {}, pn = this.paramNames;
            o[pn.start] = start;
            o[pn.limit] = this.pageSize;
            o[pn.departName] = departName;
            o[pn.industry] = industry;
            o[pn.pointDepart] = pointDepart;
            this.store.load({
                params: o
            })
        }
    })

这样就可以实现效果了。

如果如果需要查询重新加载数据的时候需要将

record_start = 0,否则查询结果中第一次加载的是查询前最后一次加载的序号。

posted @ 2011-11-10 16:24 毛毛亟亟 阅读(66) 评论(0) 编辑

extjs2.x gridpanel的数据重新加载后分页事件的一点问题

var departName, industry, pointDepart;//用于列表的全局变量

var company_food_grid = new Ext.grid.GridPanel({
    ds: ds,
    cm: cm,
    width: 805,
    height: 573,
    frame: true,
    title: '企业信息',
    bbar: new Ext.PagingToolbar({
        pageSize: 20,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    }),
    tbar: ['单位名称:', {
        xtype: 'textfield',
        width: 120,
        id: 'departName'
    }, '-', '行业:', {
        xtype: 'textfield',
        width: 120,
        id: 'industry'
    }, '-', '监测单位:', {
        xtype: 'textfield',
        id: 'pointDepart'
    }, '-', '->', '-', {
        xtype: 'button',
        text: '查询',
        handler: function(){
            company_food_grid.getStore().removeAll();
            departName = Ext.getCmp("departName").getValue();
            industry = Ext.getCmp("industry").getValue();
            pointDepart = Ext.getCmp("pointDepart").getValue();
            
            ds.load({
                params: {
                    start: 0,
                    limit: 20,
                    departName: departName,
                    industry: industry,
                    pointDepart: pointDepart
                }
            });
        }
    }, '-']
});

 

代码如上：点击查询按钮的时候数据重新加载了，但是分页上显示的数据也显示了，但是当我点击下一页的箭头的时候，发现数据又回到了初始的状态而不是查询后的结果数据，在网上找了一下在store重新加载的时候添加一个beforeload监听事件

ds.on("beforeload", function(){
    Ext.apply(this.baseParams, {
        departName: departName,
        industry: industry,
        pointDepart: pointDepart
    });

})
 

posted @ 2011-11-10 15:18 毛毛亟亟 阅读(41) 评论(0) 编辑