Extjs2.0之GridPanel基本表格

最新推荐文章于 2019-01-08 04:47:48 发布

原创最新推荐文章于 2019-01-08 04:47:48 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #XHTML #HTML #ViewUI

Extjs学习笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用ExtJS 2.0创建的基本表格示例，展示了如何定义表格的数据源、列模型及自定义列显示效果等关键配置。

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

<!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=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>

</head>

<body>
    <script>
    Ext.onReady(function(){
        //定义数据二维数组
        var data=[
                    ['EasyJWeb', 'EasyJF','www.easyjf.com'],
                    ['jfox', 'huihoo','www.huihoo.org'],
                    ['jdon', 'jdon','www.jdon.com'],
                    ['springside', 'springside','www.springside.org.cn']
                 ];

        //自定义列
        function check(value)
        {
           if (value=='列1内容2')
           {
               return '<span style="color:red;font-weight:bold;">自定义列</span>';
           }
           else
           {
               return value;
           }
        }

        //整理数据定义3列的索引为con1,con2,con3
        var store=new Ext.data.SimpleStore({
                         data:data,fields:['name','organization','homepage']
                      });

        //定义勾选框，不需要可不必定义
        var sm = new Ext.grid.CheckboxSelectionModel();

        //定义列
        var colM=new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义
            sm,//勾选框，不需要可不必定义
            {header:'项目名称',dataIndex:'name',width:170,sortable:true,renderer:check},// 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数
            {header:'开发团队',dataIndex:'organization',width:170,sortable:true},
            {header:'网址',dataIndex:'homepage',width:170}
        ]);

        //生成表格
        var grid = new Ext.grid.GridPanel({
            renderTo:'show',
            title:"我的表格",
            height:200,
            width:600,
            cm:colM,
            sm:sm,
            store:store
        });