ExtJS 分页的时候动态更新序号

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS 分页的时候动态更新序号</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="ext/src/locale/ext-lang-zh_CN.js"></script>
<!--<script type="text/javascript" src="CategoryGrid.js"></script>-->
</head>
<body>
</body>
<script type="text/javascript">
    Ext.QuickTips.init();//添加错误提示
    Ext.form.Field.prototype.msgTarget = "side";//输入框后面加上感叹号
    Ext.onReady(function(){
        var store = new Ext.data.JsonStore({
            pageSize:20, 
            url:'getPageData.php' ,
            fields:['company', 'price', 'chairman'],
            root:'items',
            totalProperty:'totalCount'
        });
        //ExtJS 4
        // Ext.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
        //     width : 40,  
        //     renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
        //         var t = Ext.getCmp('t');
        //         //console.log(rowIndex);
        //         //console.log(Math.ceil((t.cursor + t.pageSize) / t.pageSize));
        //         //return record.store.lastOptions.params.start + rowIndex + 1;  
        //         return Math.ceil((t.cursor + t.pageSize) / t.pageSize - 1) * t.pageSize + rowIndex + 1;
        //     }  
        // });
        var record_start = 0;
        new Ext.grid.GridPanel({
            renderTo:Ext.getBody(),
            store: store,
            columns: [
                new Ext.grid.RowNumberer({
                    header : "序号",
                    width : 40,
                    renderer:function(value,metadata,record,rowIndex){
                        return record_start + 1 + rowIndex;
                    }
                }),
                new Ext.grid.CheckboxSelectionModel ({singleSelect : false}),
                {header: "公司", width: 150, sortable: true, dataIndex: 'company'},
                {header: "市值", width: 'auto', sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "董事长", width: 120, sortable: true, dataIndex: 'chairman'}
            ],
            viewConfig: {
                forceFit: true,
            },
            sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
            width:600,
            columnLines :true,
            height:300,
            frame:true,
            //sm: new Ext.grid.CheckboxSelectionModel({singleSelect:true, header:"选择" }),
            title:'Framed with Checkbox Selection and Horizontal Scrolling',
            iconCls:'icon-grid',
            bbar : new Ext.PagingToolbar({
                id:'t',
                store : store,
                displayInfo : true,
                beforePageText:"第",
                afterPageText:"/ {0}页",
                firstText:"首页",
                prevText:"上一页",
                nextText:"下一页",
                lastText:"尾页",
                refreshText:"刷新",
                displayMsg : "当前显示记录从 {0} - {1} 总 {2} 条记录",
                emptyMsg : "没有相关记录!",
                doRefresh : function() {
                    this.doLoad(this.cursor);
                },
                doLoad : function(start){
                    record_start = start;
                    //ExtJS 3
                    var o = {}, pn = this.getParams();
                    o[pn.start] = start;
                    o[pn.limit] = this.pageSize;
                    this.store.load({params:o});      
                    //ExtJS 2
                    // var o = {}, pn = this.paramNames;
                    // o[pn.start] = start;
                    // o[pn.limit] = this.pageSize;
                    // this.store.load({params:o});        
                }
            })
        });
        store.load();
    });
</script>
</html>


知识共享许可协议
《ExtJS 分页的时候动态更新序号》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

1 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     168.69ms