Extjs学习——简单的Grid使用

Grid.js文件

Ext.onReady(function(){

    var sm = new Ext.grid.CheckboxSelectionModel();

    //这是ColumnModel的默认实现，在Grid中使用。 该类与一个列配置对象数组一起被初始化。 
    //dataIndex: grid中 Ext.data.Store 的Ext.data.Record 定义字段名称...
    //renderer(可选) 一个用来根据单元格数值，为单元格产生HTML标签的函数。 参见setRenderer. 如果不指定...

    var cm=new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(), //自动显示行号
        sm,
        {header:'编号',dataIndex:'id',width:50,sortable:true},      
        {header:'名称',dataIndex:'name'},
        {header:'颜色',dataIndex:'color'},
        {header:'性别',dataIndex:'sex',renderer:renderSex}, //设置文字颜色和图片
        {header:'描述',dataIndex:'descn',renderer:renderDesc} //添加按钮
    ]);


    //数据
    var data=[
        ['1','name1','#FBF8BF','男','descn1'],
        ['2','name2','#99CC99','男','descn2'],
        ['3','name3','#F5C0C0','女','descn3'],
        ['4','name4','#FFFFFF','男','descn4'],
        ['5','name5','#99CC99','女','descn5']
    ];
    //Store类封装了Record 对象的客户端缓存，它负责向GridPanel 、ComboBox 或者DataView 这类组件提供数据输入。 

    //Store对象将使用配置 的DataProxy的实现类来加载数据，除非你直接调用loadData 方法并传入你的数据。 

    //Store对象不知道Proxy返回的数据的格式是什么。

    //Store对象使用它配置的 DataReader 的实现类从数据对象创建Record 实例。这些Record将被缓存，可以通过访问函数访问。 

    var store=new Ext.data.Store({
        //proxy:new Ext.data.MemoryProxy(data),
        proxy:new Ext.data.PagingMemoryProxy(data),//配置了分页工具条时必须改成这句
        reader:new Ext.data.ArrayReader({},[
            {name:'id'},
            {name:'name'},
            {name:'color'},
            {name:'sex'},
            {name:'descn'}
        ])
    });



    var grid=new Ext.grid.GridPanel({
        enableColumnMove:true,      //True表示启动对Column顺序的拖拽,反之禁用 
        enableColumnResize:true,      //设置为false可以禁止这个表格的列改变宽度 (默认值为 true). 
        stripeRows : true, //True表示使用不同颜色间隔行，默认为false. 
        autoHeight: true,
        loadMask:true,      //读取数据时的遮罩和提示功能，默认为false
        renderTo:'grid',   //该值可以是一个节点的id、一个DOM节点或者一个已存在的元素， 组件将会被渲染到其中
        store:store,      //Grid使用Ext.data.Store 作为自己的数据源(必需). 
        cm:cm,        //由于展现grid的Ext.grid.ColumnModel对象，列定义的model (必需). 
        //sm:sm,          //任何AbstractSelectionModel的子类都可以作为grid的选择模型(selection model)
        sm:new Ext.grid.RowSelectionModel({singleSelect:true}), //只能选中其中一行 
        //bbar : Object/Array panel底部的工具栏。 可以是 Ext.Toolbar 对象
        bbar:new Ext.PagingToolbar({    //创建分页工具条
            pageSize:3,  //每页显示几条数据
            store:store,
            displayInfo:true,   //是否显示数据信息
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录" //没有数据时显示的信息
        }),

        viewConfig:{    //一个用于gird ui 视图的配置对象.Ext.grid.GridView中所有的配置项都可以设置...

            forceFit:true, //Ture表示自动扩展或缩小列的宽度以适应grid的宽度,从而避免出现水平滚动条.

            enableRowBody:true, //True表示在每一行的下面增加第二个TR元素,第二个TR元素用于在行数据的下面提供一个行主体
            getRowClass: GetRowClass   //重写这个函数可以在展现的时候应用自定义的CSS类.
        }

    });



    //getSelectionModel() : SelectionModel 返回grid的SelectionModel。
    //getSelections() : Array 返回所有选中的记录 
     grid.on('click', function() {
        var selections = grid.getSelectionModel().getSelections();
        for (var i = 0; i < selections.length; i++) {
            var record = selections[i];
            Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
        }
    });

    //使用配置的Reader从Proxy中加载Record缓存。 
    //如果配置了分页工具条，那么store.load就必须在Grid以后执行
    store.load({params:{start:0,limit:3}});



});

function renderSex(value){
    if(value=='男'){
        return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";
    }else{
         return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
    }
}


function renderDesc(value,cellmeta,record,rowIndex,columnIndex,store){
    var str="<input type='button' value='查看详细信息' onclick='alert(\""+
            "这个单元格的值是："+value+"\\n"+"这个单元格的配置是：{cellId:"+
            cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}\\n"+
            "这个单元格对应行的record是："+record+",一行的数据都在里边\\n"+
            "这是第"+rowIndex+"行\\n"+
            "这是第"+columnIndex+"列\\n"+
            "这个表格对应的ext.data.Store在这里："+store+",随便用吧！"+
            "\")'>";
    return str;
}

//改变每行的背景颜色
function GetRowClass(record,rowIndex,p,ds){
    var cls = 'white-row';
    switch (record.data.color) {
        case '#FBF8BF' :
            cls = 'yellow-row'
            break;
        case '#99CC99' :
            cls = 'green-row'
            break;
        case '#F5C0C0' :
            cls = 'red-row'
            break;
    }     
    return cls;
}

html文件

<!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>

    <title>简单的Grid使用</title>
    <link href="../extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <link href="Grid.css" rel="stylesheet" type="text/css" />
    <script src="../extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="../extjs/ext-all.js" type="text/javascript"></script>
    <script src="PagingMemoryProxy.js" type="text/javascript"></script>
    <script src="Grid.js" type="text/javascript"></script>
</head>
<body>

    <script src="../ext-3.0.0/examples/shared/examples.js" type="text/javascript"></script>
<div id="grid">

</div>
</body>
</html>

Grid.css文件

.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }