Ext Grid 独孤九剑-第六式-CSDN博客

本文介绍如何使用ExtJS创建一个网格面板，展示包含不同字段的数据，并实现性别字段的特殊样式渲染及日期格式化。

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

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</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.js"></script>
        <script>
        function a()
        {
            function renderSex(value) {
                if (value == 'boy') {
                    return "<span style='color:red;font-weight:bold;'>男</span>";
                } else {
                    return "<span style='color:green;font-weight:bold;'>女</span>";
                }
            }
            var sm = new Ext.grid.CheckboxSelectionModel();
            var cm = new Ext.grid.ColumnModel(
                [
                    new Ext.grid.RowNumberer(),
                    sm,
                    {header:'编号',dataIndex:'id',width:80,sortable:true},
                    {header:'名称',dataIndex:'name',width:80},
                    {header:'性别',dataIndex:'sex',renderer:renderSex},
                    {header:'日期',dataIndex:'date',width:100,renderer: Ext.util.Format.dateRenderer('Y年m月d日')},
                    {header:'描述',dataIndex:'descn',width:200}
                ]);
            alert(cm);
            var data = [
                ['1','name1','girl','1970-01-15T02:58:04','descn1'],
                ['2','name2','boy','1970-01-15T02:58:04','descn2'],
                ['3','name3','girl','1970-01-15T02:58:04','descn3'],
                ['4','name4','girl','1970-01-15T02:58:04','descn4'],
                ['5','name5','boy','1970-01-15T02:58:04','descn5']
            ];
            alert(data);
            var ds = new Ext.data.Store({
                proxy: new Ext.data.MemoryProxy(data),
                reader: new Ext.data.ArrayReader({}, [
                    {name: 'id'},
                    {name: 'name'},
                    {name: 'sex'},
                    {name: 'date', type:'date',dateFormat:'Y-m-dTH:i:s'},
                    {name: 'descn'}
                ])
            });
            ds.load();

            var grid = new Ext.grid.GridPanel({
                el: 'grid',
                ds: ds,
                cm: cm,
                sm: sm,
                autoExpandColumn: 6,
                bbar: new Ext.PagingToolbar({
                    pageSize: 10,
                    store: ds,
                    displayInfo: true,
                    displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                    emptyMsg: "没有记录"
                })
            });
            grid.render();
        }
        Ext.onReady(a);
        </script>
    </head>
    <body>
        <div id="grid"></div>
    </body>
</html>