ExtJs基本控件之表格

最新推荐文章于 2019-11-25 10:18:29 发布

Heroin_s

最新推荐文章于 2019-11-25 10:18:29 发布

阅读量548

点赞数

分类专栏： ExtJs 文章标签：前端 extjs ext 控件 extjs控件

本文链接：https://blog.csdn.net/weixin_34024244/article/details/78376650

版权

ExtJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ExtJs中比较常见的控件就是表格了，创建表格，首先我们要创建的就是表格列，我们创建三列表格，id,name,descn创建列的代码如下

首先我们创建的是列的标题

var columns = [
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ];

列中的column是一个数组，header用来显示文本，dataindex是记录集字段，还有其他属性例如width,sortable,renderer等属性。

有了标题下一步就该创建数据了，数据对应于创建的列的标题

var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

有了数据和标题之后，我们要把数据转换成ext可以使用的格式，就要用到数据存储对象store了，语法如下

var store = new Ext.data.ArrayStore({
       data: data,
       fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
       ]
    });

data对应的是我们创建的数据源，而fields将列名与数据进行绑定，对应于不同的数据dataindex，如果想要对它进行排序，可以添加一个mapping列进行处理，代码如下

var store = new Ext.data.ArrayStore({
       data: data,
       fields: [
            {name: 'id',mapping:2},
            {name: 'name',mapping:1},
            {name: 'descn',mapping:0}
       ]
    });

不要忘了在代码下面加载store 也就是store.load();
有了数据源，列名，下一步就是创建一个表格语法如下

var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns
    });

renderTo对应一个html标签，所以在html中应该有一个<div id='grid'></div>，这样我们就创建好了一个最基本的ext表格了

全部代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="resource/ext-4.2.1.883/resources/css/ext-all.css" rel="stylesheet" />
    <script src="resource/ext-4.2.1.883/ext-all.js"></script>
    <script src="resource/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
    <link href="resource/ext-4.2.1.883/resources/ext-theme-neptune/ext-theme-neptune-all-debug.css" rel="stylesheet" />
    <script type="text/javascript">
        Ext.onReady(function () {

            var columns = [
                { header: '编号', dataIndex: 'id' },
                { header: '名称', dataIndex: 'name' },
                { header: '描述', dataIndex: 'descn' }
            ];

            var data = [
                ['1', 'name1', 'descn1'],
                ['2', 'name2', 'descn2'],
                ['3', 'name3', 'descn3'],
                ['4', 'name4', 'descn4'],
                ['5', 'name5', 'descn5']
            ];

            var store = new Ext.data.ArrayStore({
                data: data,
                fields: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'descn' }
                ]
            });
            store.load();

            var grid = new Ext.grid.GridPanel({
                autoHeight: true,
                renderTo: 'grid',
                store: store,
                columns: columns
            });

        });
    </script>
</head>
<body>
    <div id='grid'></div>
</body>
</html>

显示页面如下

Heroin_s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs基本控件之表格

ExtJs中比较常见的控件就是表格了，创建表格，首先我们要创建的就是表格列，我们创建三列表格，id,name,descn创建列的代码如下首先我们创建的是列的标题var columns = [ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'
复制链接

扫一扫