由于本人对Extjs尚处于初期学习阶段 只为遇到同样开发困难的朋友一些开发建议 欢迎高手们不吝赐教。
Extjs是一个很不错的JS开源框架,如果你不知道Extjs是什么,那得先去看看它的官方网站
http://extjs.com/
其中很引人瞩目的就是他的Gird控件 丰富的功能和友好的界面
是实现企业内部系统非常好的解决方案,但由于其默认的格式JSON,在VS2005里没有的得到比较好的支持
另一个方面 由于文档大多数采用英文编写,对于像我这样的初学者看起来还是有些困难。
由于自己对这个还是比较感兴趣 所以还是想了一些现有的方法来实现出一些效果 举个例子吧
Grid很重要的一个部分是数据源 默认采用的格式是JSON格式的数据源 而VS里的GridView通常我们使用的数据绑定对象一般都是DataTable
因此 首先要做的就是需要这么一个类 能将最基本的DataTable变换成JSON格式的对象
以下是我自己编写的类文件 只正对于DataTable而言进行的很基本的转换
有了这样一个类文件,就可以将一个DataTable对象转换成一个String类型的
JSON基本格式数据,然后 使用单值绑定的方式绑定到页面前端
在后台编写一个DataTable 然后使用这个类的静态方法予以转换
前台 将这个string对象varData 作为页面的一个绑定值
这样操作后 页面上的JS就有了这样的一个对象 它可以作为Extjs的一个数据源 比如Grid中的store属性 可以指定一种Store对象 而这种Store对象的构造函数中,在JSON方法所产生出的一个DataTable就可以指定为这个Store的Data,类似我对这个DataTable的TableName取名为Sara 经过静态方法处理后 产生了一个Sara_Data的JS,JSON格式对象 那么我在构造Extjs的GridPanel时候 在数据的一部分就可以这样写了
当然 这样做首先就是Sara_Data在构造GridPanel时已经生成并称为JS的一个对象了
图例:
这样 一个最基本的由后台代码生成 前台代码绑定为数据源的Extjs GridPanel对象就完成了 当然 这个只是一切的开始。
下一篇主要讨论GridPanel中行事件的处理
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("<script type=\"text/javascript\">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("];</script>");
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
}
}
{
public static string JSONParse(DataTable dt)
{
StringBuilder retStr = new StringBuilder("<script type=\"text/javascript\">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("];</script>");
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();
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'
})
reader: reader,
data: Sara_data,
sortInfo:{field: 'price', direction: "ASC"},
groupField:'lastChange'
})
当然 这样做首先就是Sara_Data在构造GridPanel时已经生成并称为JS的一个对象了
图例:
这样 一个最基本的由后台代码生成 前台代码绑定为数据源的Extjs GridPanel对象就完成了 当然 这个只是一切的开始。
下一篇主要讨论GridPanel中行事件的处理