Ext GridPanel基本表格

最新推荐文章于 2019-07-02 20:51:52 发布

weoln

最新推荐文章于 2019-07-02 20:51:52 发布

阅读量1k

点赞数

分类专栏： Ext 文章标签： ext stylesheet header function html div

本文链接：https://blog.csdn.net/weoln/article/details/2652207

版权

Ext 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </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>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"></head>

<body>
    <script>
      Ext.onReady(function(){
        //定义数据二维数组
        var data=[
                    ['列1内容1', '列2内容1','列3内容1'],
                    ['列1内容2', '列2内容2','列3内容2'],
                    ['列1内容3', '列2内容3','列3内容3'],
                    ['列1内容4', '列2内容4','列3内容4']
                 ];

        //自定义列
        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:['con1','con2','con3']
                      });

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

        //定义列
        var colM=new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义
            sm,//勾选框，不需要可不必定义
            {header:'列1',dataIndex:'con1',width:170,sortable:true,renderer:check},// 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数
            {header:'列2',dataIndex:'con2',width:170,sortable:true},
            {header:'列3',dataIndex:'con3',width:170}
        ]);

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

    });
    </script>
    <div id="show"></div>
</body>
</html>

weoln

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ext GridPanel基本表格

New Document Ext.onReady(function(){ //定义数据二维数组 var data=[ [列1内容1, 列2内容1,列3内容1], [列1内容2, 列2内容2,列3内容2]
复制链接

扫一扫