ExtJs 备忘录（7）—— GirdPanl表格（三） [ 统计|查看、修改单行记录 ]

         var  currentWindow,detailWindow,OpenDetailFunc,detailForm;
        
        Ext.onReady( function () {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget  =   ' side ' ;

             var  store  =   new  Ext.data.Store({
                proxy:  new  Ext.data.HttpProxy({
                    url:  ' 7.1.aspx?method=search ' ,
                    method:  ' GET '
                }),
                reader:  new  Ext.data.JsonReader({
                    totalProperty:  ' count ' ,
                    root:  ' result '
                }, [
                        { name:  ' Name '  },
                        { name:  ' Id '  },
                        { name:  ' Email '  },
                        { name:  ' Gender '  }
                ])
            });
            
             // 加载数据
            store.load({
                params:{   limit:  10     }
            });

             var  dataColumns  =   new  Ext.grid.ColumnModel({
                columns: [
                     new  Ext.grid.RowNumberer(),  // 显示行号
                    { header:  " 编  号 " , dataIndex:  ' Id ' , sortable:  true  },
                    { header:  " 名  称 " , dataIndex:  ' Name '  },
                    { header:  " 邮  箱 " , dataIndex:  ' Email '  },
                    { header:  " 性  别 " , dataIndex:  ' Gender ' , 
                        renderer:  function (value, cell, record) {
                             // alert(record.data.Age);
                             var  GenderStr  =  record.data.Gender  ==   0   ?   " 女 "  :  " 男 " ;
                             return    ' <a href="javascript:void(0);" onclick=javascript:OpenDetailFunc( ' + record.data.Id + ' ," ' + record.data.Name + ' "," ' + record.data.Email + ' ", ' + record.data.Gender + ' ); style="cursor:hand"> '   +  GenderStr  +   ' </a> ' ;
                         }
                    }
                ],
                defaults: {
                    align:  ' center '
                }
            });
            
             // easy-ext.js
             var  grid  =  GridPanel(store,dataColumns, 10 , ' <center style="curor:hand" onclick="window.location.reload();">表格查看、修改单行记录|统计</center> ' );
            grid.width = 800 ;
            grid.render(Ext.getBody());
            
             // -------------------------------------------查看、修改单条记录
            
             var    tbId  =   new  NumberField( ' tbId ' , ' 编  号 ' );
             var    tbName  =   new  TextField( ' tbName ' , ' 名  称 ' );
             var    tbEmail  =   new  TextField( ' tbEmail ' , ' 邮  箱 ' );
             var    cbGender  =   new  ComboBox( ' cbGender ' , ' 性  别 ' ,[[ 1 , ' 男 ' ],[ 0 , ' 女 ' ]]);
            
            detailForm  =   new  Ext.FormPanel({
                layout:  ' form ' ,
                frame: true ,
                items:[ tbId, tbName, tbEmail, cbGender],
                buttons: [
                    { text:  ' 修  改 '  },
                    {  text:  ' 取  消 '  , handler :  function (){ detailWindow.hide(); }}
                ]
            });

            
             // 参数赋值，显示窗体
            OpenDetailFunc  =   function (Id,Name,Email,Gender){
                
                 var  form  =  detailForm.getForm();
                tbId.value  =  Id;
                tbName.value  =  Name;
                tbEmail.value  =  Email;
                cbGender.value  =  Gender;
                detailWindow.show();
            };
            
            detailWindow  =   new  Ext.Window({
                title: " 详情 " ,
                closable: true ,
                iconCls: ' add ' ,
                autoWidth: true ,
                autoHeight:  true ,
                buttonAlign: ' center ' ,
                closeAction: ' hide ' ,
                plain: true ,
                 // width:400,
                 // height:380,
                items:[detailForm],
                listeners: {
                     ' show ' : function (){
                         this .center();          // 屏幕居中
                    }
                }
            });
        });

     ///   <summary>
     ///  将数据表转换成JSON类型串
     ///   </summary>
     ///   <param name="dt"> 要转换的数据表 </param>
     ///   <param name="dispose"> 数据表转换结束后是否dispose掉 </param>
     ///   <returns></returns>
     public   static  StringBuilder DataTableToJson(System.Data.DataTable dt,  bool  dt_dispose)
    {
        StringBuilder stringBuilder  =   new  StringBuilder();
        stringBuilder.Append( " [ " ); // \r\n

         // 数据表字段名和类型数组
         string [] dt_field  =   new   string [dt.Columns.Count];
         int  i  =   0 ;
         string  formatStr  =   " {{ " ;
         string  fieldtype  =   "" ;
         foreach  (System.Data.DataColumn dc  in  dt.Columns)
        {
            dt_field[i]  =  dc.Caption.Trim(); // ToLower().
            formatStr  +=   " ' "   +  dc.Caption.Trim()  +   " ': " ; // ToLower().
            fieldtype  =  dc.DataType.ToString().Trim().ToLower();
             if  (fieldtype.IndexOf( " int " )  >   0   ||  fieldtype.IndexOf( " deci " )  >   0   ||
                fieldtype.IndexOf( " floa " )  >   0   ||  fieldtype.IndexOf( " doub " )  >   0   ||
                fieldtype.IndexOf( " bool " )  >   0 )
            {
                formatStr  +=   " { "   +  i  +   " } " ;
            }
             else
            {
                formatStr  +=   " '{ "   +  i  +   " }' " ;
            }
            formatStr  +=   " , " ;
            i ++ ;
        }

         if  (formatStr.EndsWith( " , " ))
        {
            formatStr  =  formatStr.Substring( 0 , formatStr.Length  -   1 ); // 去掉尾部","号
        }
        formatStr  +=   " }}, " ;

        i  =   0 ;
         object [] objectArray  =   new   object [dt_field.Length];
         foreach  (System.Data.DataRow dr  in  dt.Rows)
        {

             foreach  ( string  fieldname  in  dt_field)
            {    // 对 \ , ' 符号进行转换 
                objectArray[i]  =  dr[dt_field[i]].ToString().Trim().Replace( " \\ " ,  " \\\\ " ).Replace( " ' " ,  " \\' " );
                 switch  (objectArray[i].ToString())
                {
                     case   " True " :
                        {
                            objectArray[i]  =   " true " ;  break ;
                        }
                     case   " False " :
                        {
                            objectArray[i]  =   " false " ;  break ;
                        }
                     default :  break ;
                }
                i ++ ;
            }
            i  =   0 ;
            stringBuilder.Append( string .Format(formatStr, objectArray));
        }
         if  (stringBuilder.ToString().EndsWith( " , " ))
        {
            stringBuilder.Remove(stringBuilder.Length  -   1 ,  1 ); // 去掉尾部","号
        }

         if  (dt_dispose)
        {
            dt.Dispose();
        }
         return  stringBuilder.Append( " ] " ); // \r\n
    }

     public   override   string  Search()
    {
         int  start  =   - 1 ;
         int .TryParse(Request.QueryString[ " start " ],  out  start);
         int  limit  =   - 1 ;
         int .TryParse(Request.QueryString[ " limit " ],  out  limit);
         string  id  =  Request.QueryString[ " id " ];
        IList < User >  result  =   new  List < User > ();

         if  ( string .IsNullOrEmpty(id))
            result  =  GetPage(ConverToList(dataSource.Values), start, limit);
         else
        {
             int  uid;
             if  ( int .TryParse(id,  out  uid))
            {
                 if  (dataSource.ContainsKey(uid))
                    result.Add(dataSource[uid]);
            }
        }

         // 统计
        DataTable dt  =   new  DataTable();
        dt.Columns.Add( " Id " );
        dt.Columns.Add( " Email " );
        dt.Columns.Add( " Name " );
        dt.Columns.Add( " Gender " );
        dt.Columns.Add( " Age " );

         int  avg_Age  =   0 ;
         foreach  (User item  in  result)
        {
            avg_Age  +=  item.Age;
            dt.Rows.Add(item.Id, item.Email, item.Name, item.Gender, item.Age);
        }
         if  (result.Count  >   0 )
            dt.Rows.Add( "" ,  "" ,  "" ,  "" ,  string .Format( " 平均：{0} " , avg_Age  /  result.Count));

         return   new  StringBuilder().Append( " {count: " )
        .Append( 1000 )
        .Append( " ,result: " )
        .Append(DataTableToJson(dt,  true ))
             //         .Append(JavaScriptConvert.SerializeObject(result))
        .Append( ' } ' )
        .ToString();
    }

        Ext.onReady( function () {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget  =   ' side ' ;

             var  store  =   new  Ext.data.GroupingStore ({
                proxy:  new  Ext.data.HttpProxy({
                    url:  ' 7.2.2.aspx?method=search ' ,
                    method:  ' GET '
                }),
                reader:  new  Ext.data.JsonReader({
                    totalProperty:  ' count ' ,
                    root:  ' result '
                }, [
                        { name:  ' Name '  },
                        { name:  ' Id '  },
                        { name:  ' Email '  },
                        { name:  ' Gender '  },
                        { name:  ' Age '  },
                        { name:  ' groupField ' ,convert: function (v){   return   ' 数据 ' ;} }
                ]),
                sortInfo:{field:  ' Age ' , direction:  " ASC " },
                groupField: ' groupField '
            });
            
             // 加载数据
            store.load({
                params:{   limit:  10     }
            });
            
             // 自定义
//             Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
//                 return v + (record.data.estimate * record.data.rate);
//             };
            
             var  summary  =   new  Ext.ux.grid.GroupSummary();

             var  dataColumns  =   new  Ext.grid.ColumnModel({
                columns: [
                     new  Ext.grid.RowNumberer(),  // 显示行号
                    { header:  " 编  号 " , dataIndex:  ' Id ' , sortable:  true  },
                    { header:  " 名  称 " , dataIndex:  ' Name '  },
                    { header:  " 邮  箱 " , dataIndex:  ' Email '  },
                    { header:  " 性  别 " , dataIndex:  ' Gender '  },
                    { header:  " 数据 " , dataIndex:  ' groupField '  },
                     // max,min,count,sum,average
                    { header:  " 总年龄 " , dataIndex:  ' Age ' ,summaryType: ' average ' }
                     // ,summaryType:'totalCost',groupable: false
                ],
                defaults: {
                    align:  ' center '
                }
            });

             var  grid  =   new  Ext.grid.GridPanel({
                store: store,
                cm: dataColumns,
                renderTo: Ext.getBody(),
                autoExpandColumn:  1 ,
                autoHeight:  true ,
                buttonAlign: ' center ' ,
                border:  true ,
                disableSelection:  true ,
                frame:  true ,
                loadMask: true ,
                width:  800 ,
                view:  new  Ext.grid.GroupingView({
                    forceFit:  true ,
                    showGroupName:  false ,
                    enableNoGroups:  false ,
                    enableGroupingMenu:  false ,
                    hideGroupedColumn:  true
                }),
                plugins : summary,
                 // 设置单行选中模式
                selModel:  new  Ext.grid.RowSelectionModel({ singleSelect:  true  }),
                 // columnLines: true,//显示列线条
                viewConfig: {   forceFit:  true   } // 使列自动均分
            });
        });