VS2005中使用Extjs GridPanel(1)

由于本人对Extjs尚处于初期学习阶段 只为遇到同样开发困难的朋友一些开发建议 欢迎高手们不吝赐教。
Extjs是一个很不错的JS开源框架,如果你不知道Extjs是什么,那得先去看看它的官方网站
http://extjs.com/
其中很引人瞩目的就是他的Gird控件 丰富的功能和友好的界面
是实现企业内部系统非常好的解决方案,但由于其默认的格式JSON,在VS2005里没有的得到比较好的支持
另一个方面 由于文档大多数采用英文编写,对于像我这样的初学者看起来还是有些困难。
由于自己对这个还是比较感兴趣 所以还是想了一些现有的方法来实现出一些效果 举个例子吧
Grid很重要的一个部分是数据源 默认采用的格式是JSON格式的数据源 而VS里的GridView通常我们使用的数据绑定对象一般都是DataTable
因此 首先要做的就是需要这么一个类 能将最基本的DataTable变换成JSON格式的对象
以下是我自己编写的类文件 只正对于DataTable而言进行的很基本的转换


public static class JSON






{


public static string JSONParse(DataTable dt)






{


        StringBuilder retStr = new StringBuilder("var " + dt.TableName + "_data = [");


        StringBuilder strTemp = new StringBuilder("");


//retStr.Append("['3m Co',71.72,0.02,0.03,'2008-9-1 12:05:09']");


for (int i = 0; i < dt.Rows.Count; i++)






{


            retStr.Append(JSONDataRowParse(dt.Rows[i], ref strTemp));


            strTemp.Remove(0, strTemp.Length);


        }


        retStr.Remove(retStr.Length - 1, 1);


        retStr.Append("];");


return retStr.ToString();


    }




public static string JSONParseNoScript(DataTable dt)






{


        StringBuilder retStr = new StringBuilder("");


        StringBuilder strTemp = new StringBuilder("");


//retStr.Append("['3m Co',71.72,0.02,0.03,'2008-9-1 12:05:09']");


for (int i = 0; i < dt.Rows.Count; i++)






{


            retStr.Append(JSONDataRowParse(dt.Rows[i], ref strTemp));


            strTemp.Remove(0, strTemp.Length);


        }


        retStr.Remove(retStr.Length - 1, 1);


return retStr.ToString();


    }




private static string JSONDataRowParse(DataRow dr,ref StringBuilder strTemp)






{


        strTemp.Append("[");


for (int i = 0; i < dr.Table.Columns.Count; i++)






{


if (JSONDataColumnParse(dr.Table.Columns[i]) == TypeEnum.Num)






{


                strTemp.Append(dr[i].ToString()+",");


            }


else






{


                strTemp.Append("'" + dr[i].ToString() + "',");


            }


        }


        strTemp.Remove(strTemp.Length - 1, 1);


        strTemp.Append("],");


return strTemp.ToString() ;


    }




private static TypeEnum JSONDataColumnParse(DataColumn DC)






{


if (DC.DataType == typeof(int) || DC.DataType == typeof(bool) || DC.DataType == typeof(float) || DC.DataType == typeof(double))






{


return TypeEnum.Num;


        }


else






{


return TypeEnum.String;


        }


    }




private enum TypeEnum






{


        String,


        Num,


        Date


    }


}
有了这样一个类文件,就可以将一个DataTable对象转换成一个String类型的
JSON基本格式数据，然后 使用单值绑定的方式绑定到页面前端
在后台编写一个DataTable 然后使用这个类的静态方法予以转换


            varData = JSON.JSONParse(dt);


            DataBind();
前台 将这个string对象varData 作为页面的一个绑定值




<%

#varData%>
这样操作后 页面上的JS就有了这样的一个对象 它可以作为Extjs的一个数据源 比如Grid中的store属性 可以指定一种Store 对象而这种Store对象的构造函数中,在JSON方法所产生出的一个DataTable就可以指定为这个Store的Data,类似我对这个 DataTable的TableName取名为Sara 经过静态方法处理后 产生了一个Sara_Data的JS,JSON格式对象那么我在构造Extjs的GridPanel时候 在数据的一部分就可以这样写了


        store:new Ext.data.GroupingStore({


            reader: reader,


            data: Sara_data,


            sortInfo:{field: 'price', direction: "ASC"},


            groupField:'lastChange'


        })
当然 这样做首先就是Sara_Data在构造GridPanel时已经生成并称为JS的一个对象了
图例:



这样 一个最基本的由后台代码生成 前台代码绑定为数据源的Extjs GridPanel对象就完成了 当然 这个只是一切的开始。