ExtJS——GridePanel添加复选框列和分页功能

最新推荐文章于 2022-03-28 12:57:53 发布

原创最新推荐文章于 2022-03-28 12:57:53 发布 · 792 阅读

0 ·

CC 4.0 BY-SA版权

ExtJS4 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在ExtJS的GridPanel中添加复选框列，并实现分页功能。通过配置store，连接到处理分页的PHP后端pagestore.php，初始化加载第一页数据store.loadPage(1)。同时，在数据源store对应的组件上应用dockedItems属性以展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GridPanel用于数据显示，即我们平时说的列表页,加复选框列，分页功能.分页操作，需要配置store，对应处理的php:pagingstore.php，以及初始加载的页码：store.loadPage(1);，同时在要显示数据源store的对应组件上加dockedItems属性

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
    //数据源
    var itemsPerPage = 2;   // 设置您希望看到的每页的条目数量
    var store = new Ext.data.Store({
        id:'simpsonsStore',
        autoLoad: false,//分页重要属性
        pageSize: itemsPerPage, // 每页的条目数量
        proxy: {
            type: 'ajax',
            url: 'php/pagingstore.php',  // 一个url，将加载start和limit参数并返回期望的数据
            reader: {
                type: 'json',
                root: 'item',//数据对应的键名
                totalProperty: 'total'//总共的数据条数对应的键名
            }
        },
        fields:['id','name','sex',{name:'birthday',type:'date',dateformat:'Y/m/d'}]
        //键名为birthday，类型为日期，日期格式为Y/m/d
    });

// 指定要加载的页
store.loadPage(1);
    //渲染性别
    var sexrender = function(value,metaData,record,rowIndex,cloIndex,store){
        if(value=='0'){
            metaData.style='color:red;';
            return '男';
        }else {
            metaData.style='color:blue;';
            return '女';
        }
    };
    //定义列
    var column = Ext.grid.Column([
                {header:'编号',dataIndex:'id',sortable:true},
                {header:'姓名',dataIndex:'name'},
                {header:'性别',dataIndex:'sex',renderer:sexrender},
                //renderer函数是一个拦截者模式，用于改变渲染到单元格的值和样式。
                {header:'出生日期',dataIndex:'birthday',renderer:Ext.util.Format.dateRenderer('Y-m-d')}
        ]);
    //添加按钮
    var tbtn = new Ext.Button({
        text:'查看选中项',
        listeners:{
            'click':function(){
                var row = grid.getSelectionModel().getSelection();
                var seclect='您选择了：'
                for(var i=0;i<row.length;i++){
                    seclect+="编号为"+row[i].get('id')+"的行，";
                }
                Ext.MessageBox.alert('提示',seclect);
            }
        }
    });
    //列表 
    var grid = new Ext.grid.Panel({
        //生成复选框列,这个构造方法找了好久，原来的Ext.grid.CheckboxSelectionModel没有了
        selModel:new Ext.selection.CheckboxModel(),
        title:'GridPanel',
        height:200,
        store:store,
        tbar:[tbtn],//'Top Bar'的缩略形式。查看选择项的功能
        columns:column,//数据每行样式
        dockedItems: [{  //一个或者一系列组件作为dockedItems被添加到Panel中。配置分页
        xtype: 'pagingtoolbar',
        store: store,   // GridPanel使用相同的数据源
        dock: 'bottom',//新增组件显示的位置
        displayInfo: true//显示消息
       }],
    });
    //表单
    var form = new Ext.form.FormPanel({
        frame:true,//True 为 Panel 填充画面,默认为false.
        fileUpload:true,
        title:'表单标题',
        style:'margin:10px;',
        items:[grid]
    });
    //窗体
    var win = new Ext.Window({
        title:'窗口',
        width:476,
        height:374,
        resizable:true,
        modal:true,
        closable:true,
        maximizable:true,
        minimizable:true,
        buttonAlign:'center',
        items:form
    });
    win.show();
    
});
</script>
</body>
</html>

pagestore.php

<?php 
$start=$_REQUEST["start"]; 
$limit=$_REQUEST["limit"]; 
$res[0]=array('id'=>1,'name'=>'张三','sex'=>'0','birthday'=>'2001/01/01');
$res[1]=array('id'=>2,'name'=>'李四','sex'=>'1','birthday'=>'2002/01/01');
$res[2]=array('id'=>3,'name'=>'王五','sex'=>'0','birthday'=>'2003/01/01');
$res[3]=array('id'=>4,'name'=>'赵倩','sex'=>'1','birthday'=>'2004/01/01');
$res[4]=array('id'=>5,'name'=>'孙俪','sex'=>'1','birthday'=>'2005/01/01');
for ($x=$start,$i=0; $x<$start+$limit&&$x<5; $x++,$i++) {
    $items[$i]=$res[$x];
} 
$r =array('item'=>$items,'total'=>5);
echo json_encode($r);  
?>