ExtJs 备忘录（5）—— GirdPanl表格（一） [ 基本用法 ]

一、效果图

二、涉及到相关组件部分中文说明

　　　　2.1　　Ext.grid.GridPanel

　　　　　　stripeRows: true,　　//隔行换色

　　　　　　viewConfig: {   forceFit: true  },　　//自动均分列宽

　　　　　　selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),　　//设置选中模式

　　　　　　loadMask: { msg: '正在加载数据，请稍侯……' },　　//加载完成前显示信息，设置为true则显示Loading

　　　　　　autoDestroy //Boolean 销毁store当组件的store已经被绑定并销毁 (?? 没有测试出来，后续文章继续测)

　　　　　　columnLines: true,　　//显示列线条　　　

　　　　2.2　　Ext.grid.ColumnModel

　　　　　　header　　　　　  //表格列头名称

　　　　　　dataIndex　　　　//字段名称

　　　　　　sortable　　　　　//是否允许按列排序，默认为false

　　　　　　resizable:false　　//是否可改变列宽，默认为true

　　　　　　menuDisabled: true　　//是否禁用(不显示)列头菜单项，默认false

　　　　　　hidden:false　　　//是否隐藏本列

　　　　　　renderer:　　　　//渲染，自定义格式输出

　　　　　　　　Ext.util.Format.dateRenderer('Y-m-d')　　//'Y年m月d日'输出日期格式

　　　　　　　　Ext.util.Format.usMoney　　　　　　　　　//以货币格式显示数字，如$10.00

　　　　　　　　function(value,metadata,record,rowIndex, colIndex, store)　//自定义函数输出

　　　　　　　　//列提示

　　　　　　　　renderer: function (v,p) {
//v : value , p : cell
p.attr = 'ext:qtitle="' + "标题" + v + '"';
p.attr += ' ext:qtip=" 说明... ' + v + '"';
　　return v;
}

　　　　2.3　　Ext.data.JsonReader

　　　　　　//样例JSON数据：{count:10,result:[{"Id":0,"Email":"test163.com","Name":"test0","Gender":1}]}

　　　　　　totalProperty: 'count',　　//数据总行数key

　　　　　　root: 'result'　　　　　　  //数据

　　　　　　fields: []　　　　　　　　  //字段，可以省略fields:，直接写[]，下面代码中可看得到

　　　　　　　　name 　　　　　　　　//字段名称

　　　　　　　　mapping　　　　　　  //将json对象中指定属性值映射到此字段，如果name与json中指定属性名一样这里不需指定 

　　　　　　　　type　　　　　　　　　//字段类型，可选值：string、int、float、boolean、date，不指定无变化

　　　　　　　　dateFormat　　　　　 //格式化日期字符串

　　　　　　　　defaultValue　　　　　//当字段值在原数据中不存在时所取的默认值，默认为空字符串。

　　　　　　　　convert:function(v){  return "("+v+")";}　　//输出前手工处理数据

　　　　2.4　　Ext.data.Store

　　　　　　proxy　　　　 //从某个途径读取原始数据

　　　　　　reader　　　　//将原始数据转换成Record实例

　　　　　　sortInfo: {field: 'Id', direction: 'DESC'}　　//字段排序

　　　　　　remoteSort:true　//会导致每次执行sort()时都要去后台重新加载数据，而不能只对本地数据进行排序。默认为false，本地排序。

三、 实现功能

　　　　从aspx后台获取JSON格式数据以表格形式显示。

　　　　前端代码：

     < script type = " text/javascript " >
        Ext.onReady( function () {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget  =   ' side ' ;

             var  dataReader  =   new  Ext.data.JsonReader({
                totalProperty:  ' count ' ,
                root:  ' result '
            },[
                    { name:  ' Name '  },
                    { name:  ' Id ' ,sortDir: ' ASC '  }, // ASC DESC
                    { name:  ' Email ' ,convert: function (v){   return   " ( " + v + " ) " ;} },
                    { name:  ' Gender '  }
            ]);

             var  store  =   new  Ext.data.Store({
                proxy:  new  Ext.data.HttpProxy({
                    url:  ' table.aspx?method=search ' ,
                    method:  ' GET '
                }),
                reader: dataReader,
                sortInfo: {field:  ' Id ' , direction:  ' DESC ' } // ASC
                ,autoLoad: true
                 // ,autoDestroy:true
            });

             function  GenderCovert(value,metadata,record,rowIndex, colIndex, store){
                 if (value  ==   1 )
                     return   " 男 " ;
                 else
                     return   " 女 " ;
            }

             var  dataColumns  =   new  Ext.grid.ColumnModel({
                columns: [
                    { header:  " 编  号 " ,draggable: true , dataIndex:  ' Id ' , sortable:  true },
                    { header:  " 名  称 " , dataIndex:  ' Name ' ,resizable: false  },
                    { header:  " 邮  箱 " , dataIndex:  ' Email ' ,menuDisabled:  true ,
                        renderer:  function  (v,p) {
                             // v : value , p : cell
                            p.attr  =   ' ext:qtitle=" '   +   " 标题 "   +  v  +   ' " ' ;
                            p.attr  +=   '  ext:qtip=" 说明  '   +  v  +   ' " ' ;
                             return  v;
                    } },
                    { header:  " 性  别 " , dataIndex:  ' Gender ' ,renderer:GenderCovert }
                ],
                defaults: {
                    align:  ' center '
                    
                }
            });

             var  grid  =   new  Ext.grid.GridPanel({
                store: store,
                cm: dataColumns,     // columns: [{}]
                renderTo: Ext.getBody(),
                autoExpandColumn:  1 ,
                autoHeight:  true ,
                buttonAlign: ' center ' ,
                border:  true ,
                disableSelection:  true ,
                frame:  true ,
                loadMask: true , //  { msg: '正在加载数据，请稍侯……' },     //loadMask: true,
                 // stripeRows: true, //斑马线效果 
                width:  950 ,
                
                title: ' 表格 ' ,
                 // 设置单行选中模式
                selModel:  new  Ext.grid.RowSelectionModel({ singleSelect:  true  }),
                 // columnLines: true,//显示列线条
                viewConfig: {   forceFit:  true   } // 使列自动均分
                ,buttons: [{
                    text:  " 重新加载 "
                        ,handler: function (){
                        store.load();
                    }
                }]
            });
        });

 　　　　后端代码：

 　　　　代码说明：

　　　　　　1.　　使用了开源组件Newtonsoft.Json.dll，支持将数组对象序列化成JSON字符串，非常方便。

　　　　　　2.　　随机返回客户端数据，访问方式请参照系列前面的文章。

三、 代码下载

　　　　ExtJS2009-11-15

本文转自博客园农民伯伯的博客，原文链接：ExtJs 备忘录（5）—— GirdPanl表格（一） [ 基本用法 ]，如需转载请自行联系原博主。