EXTJS4自学手册——页面控件（表格）

来源：互联网发布：下载贵金属分析软件编辑：程序博客网时间：2024/06/06 05:20

grid控件是EXTJS中非常常用的组件，用于生成表格

一、最简单的表格：

例子：

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        Ext.create('Ext.grid.Panel',{
            renderTo:'myGrid',
            title:'简单的表格',
            //要展示的数据
            store:Ext.create('Ext.data.ArrayStore',{
                //数据结构
                fields:['id','name','age'],
                //数据内容
                data:[[1,'aaa',23],[2,'bbb',47]]
            }),
            columns:[{
                //列标题名称
                text:'id',
                //绑定数据容器的字段
                dataIndex:'id'
            },{
                //列标题名称
                text:'名称',
                //绑定数据容器的字段
                dataIndex:'name'
            },{
                //列标题名称
                text:'年龄',
                //绑定数据容器的字段
                dataIndex:'age'
            }]
        })
    });
</script>
</head>
<body>
    <div id = 'myGrid'>
    </div>

</body>

执行结果：

二、通过selType属性设置表格的数据选择方式是行选择（默认）还是元素选择

rowmodel:行选择

例子：

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        Ext.create('Ext.grid.Panel',{
            renderTo:'myGrid',
            title:'简单的表格',
            //行选择模式
            selType: 'rowmodel',
            //要展示的数据
            store:Ext.create('Ext.data.ArrayStore',{
                //数据结构
                fields:['id','name','age'],
                //数据内容
                data:[[1,'aaa',23],[2,'bbb',47]]
            }),
            columns:[{
                //列标题名称
                text:'id',
                //绑定数据容器的字段
                dataIndex:'id'
            },{
                //列标题名称
                text:'名称',
                //绑定数据容器的字段
                dataIndex:'name'
            },{
                //列标题名称
                text:'年龄',
                //绑定数据容器的字段
                dataIndex:'age'
            }]
        })
    });
</script>

执行结果：

cellmodel：元素选择模式

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        Ext.create('Ext.grid.Panel',{
            renderTo:'myGrid',
            title:'简单的表格',
            //元素选择模式
            selType: 'cellmodel',
            //要展示的数据
            store:Ext.create('Ext.data.ArrayStore',{
                //数据结构
                fields:['id','name','age'],
                //数据内容
                data:[[1,'aaa',23],[2,'bbb',47]]
            }),
            columns:[{
                //列标题名称
                text:'id',
                //绑定数据容器的字段
                dataIndex:'id'
            },{
                //列标题名称
                text:'名称',
                //绑定数据容器的字段
                dataIndex:'name'
            },{
                //列标题名称
                text:'年龄',
                //绑定数据容器的字段
                dataIndex:'age'
            }]
        })
    });
</script>

执行结果：

三、表格的列类型：

说明：列类型包括：

序号、默认（正常显示）、模板列、逻辑判断列、日期列、数值列、行为列

例子：

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        Ext.create('Ext.grid.Panel',{
            renderTo:'myGrid',
            title:'表格列类型展示',                    
            //要展示的数据
            store:Ext.create('Ext.data.ArrayStore',{
                //数据结构
                fields:[{
                    name:'name',type:'string'
                },{
                    name:'address',type:'string'
                },{
                    name:'isStudent',type:'boolean'
                },{
                    name:'birthday',type:'date'
                },{
                    name:'money',type:'int'
                }],
                //数据内容
                data:[['张三','重庆','true','2012-8-2',2223],['李四','北京','false','1541-9-6',4311]]
            }),
            //在每一列的前面加一个单选框
            selModel:Ext.create('Ext.selection.CheckboxModel'),                
            columns:[
            Ext.create('Ext.grid.RowNumberer'),//索引列
            {    //默认列类型        
                text:'名称',
                dataIndex:'name'
            },{
                //模板列
                xtype:'templatecolumn',
                text:'籍贯',
                //模板
                tpl:'{name}是{address}人'
            },{
                //逻辑判断列
                xtype:'booleancolumn',
                text:'是否学生',
                dataIndex:'isStudent',
                //当数据为真的时候，显示的内容
                trueText:'是',
                //当数据为假的时候，显示的内容
                falseText:'否'
            },{
                //日期列
                xtype:'datecolumn',
                text:'出生日期',
                dataIndex:'birthday',
                format:'Y/m/d'
            },{
                //数值列
                xtype:'numbercolumn',
                text:'收入',
                dataIndex:'money',
                //渲染内容
                renderer: Ext.util.Format.usMoney                
            },{
                xtype:'actioncolumn',header:'行为列',items:[{
                    icon:'ext-4.0.7-gpl/ext-4.0.7-gpl/resources/themes/images/access/dd/drop-add.gif',
                    tooltip:'行为',
                    handler:function(){}//自定义的行为
                }]
            }]
        })
    });
</script>

执行结果：