ExtJs之GridPanel、FormPanel综合篇

最新推荐文章于 2024-07-24 12:35:52 发布

iteye_20835

最新推荐文章于 2024-07-24 12:35:52 发布

阅读量138

点赞数

文章标签： json xhtml ui

今天我们一块看一下GridPanel和FormPanel的另外一些知识。在这一篇文章中我觉得更多的是FromPanel的应用，虽然前面我们单独说了FromPanel布局及其相关控件，但是关于FromPanel的提交和加载一直没有说。在这一篇文章中我们着重说一下FromPanel的加载与提交，以及如何将FormPanel与TabPanel结合起来等。例子要实现的功能：显示商品信息并且支持分页和搜索；单击某商品弹出相关信息（包括供货商和种类信息）；在弹出窗口中可以自动加载相关信息并且可以修改提交。

温故而知新

由于这一篇文章是结合了几种控件来阐述的，GridPanel部分是在上一篇"ExtJs之GridPanel篇"之上进行修改的，除了添加其双击事件等代码外其他的几乎完全一样。但是作为一个完整的例子我觉得还是把代码放出了，不明白的朋友可以参考上一篇关于GridPanel的文章。下面是例子中GridPanel功能的后台代码，前台代码我们放在下面和FromPanel一块说：

using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Web.Script.Serialization; using System.Collections.Generic; using System.Text; using Cmj.MyData; namespace GridPanel { public partial class _Default : System.Web.UI.Page { DBHelper dbHelper = new DBHelper(); int count; protected void Page_Load(object sender, EventArgs e) { int pageSize=10; int start=0; Session["categoryID"] = ""; Session["productName"] = ""; if (!string.IsNullOrEmpty(Request["limit"])) { pageSize = int.Parse(Request["limit"]); } if (!string.IsNullOrEmpty(Request["start"])) { start = int.Parse(Request["start"]); } if (start==0 && Request["categoryName"] != null && Request["productName"]!=null)//说明是查询而不是翻页 { Session["categoryID"] = Request["categoryName"]; Session["productName"] = Request["productName"]; } count = GetCount(Session["categoryID"].ToString(), Session["productName"].ToString()); Response.Write(GetJson(GetDataTabel(GetSql(Session["categoryID"].ToString(), Session["productName"].ToString()), pageSize, start), Session["categoryID"].ToString(), Session["productName"].ToString())); Response.End(); } private string GetSql(string categoryID,string productName) { string sql = "SELECT dbo.Products.ProductID, dbo.Products.ProductName,dbo.Categories.CategoryName,dbo.Products.UnitPrice,dbo.Products.Discontinued,dbo.Products.QuantityPerUnit,dbo.Suppliers.CompanyName FROM dbo.Products INNER JOIN dbo.Categories ON dbo.Products.CategoryID = dbo.Categories.CategoryID" + " INNER JOIN dbo.Suppliers ON dbo.Suppliers.SupplierID=dbo.Products.SupplierID "; if (categoryID != "all") { sql += "WHERE dbo.Categories.CategoryID='" + categoryID + "'"; } if(productName!=string.Empty) { sql+= " AND dbo.Products.ProductName like '%" + productName + "%'"; } return sql; } private int GetCount(string categoryID,string productName) { string sql = "SELECT dbo.Products.ProductID FROM dbo.Products INNER JOIN dbo.Categories ON dbo.Products.CategoryID = dbo.Categories.CategoryID" + " INNER JOIN dbo.Suppliers ON dbo.Suppliers.SupplierID=dbo.Products.SupplierID "; if (categoryID != "all") { sql += "WHERE dbo.Categories.CategoryID='" + categoryID + "'"; } if (productName != string.Empty) { sql += " AND dbo.Products.ProductName like '%" + productName + "%'"; } int count = dbHelper.GetDataTable(CommandType.Text, sql).Rows.Count; return count; } private DataTable GetDataTabel(string sql, int pageSize, int start) { PagingSQLHelperExtend psHelper = new PagingSQLHelperExtend(sql,"ProductID", "asc", pageSize); int currentPageIndex=start/pageSize+1; return dbHelper.GetDataTable(CommandType.Text, psHelper.GetSQL(currentPageIndex)); } private string GetJson(DataTable dt,string categoryID,string productName) { List<Product> customers = new List<Product>(); Product customer; foreach (DataRow dr in dt.Rows) { customer = new Product(); customer.ProductID = dr["ProductID"].ToString(); customer.ProductName = dr["ProductName"].ToString(); customer.CategoryName = dr["CategoryName"].ToString(); customer.UnitPrice = double.Parse(dr["UnitPrice"].ToString()); if (dr["Discontinued"].ToString() == "True") { customer.Discontinued = "是"; } else { customer.Discontinued = "否"; } customer.QuantityPerUnit = dr["QuantityPerUnit"].ToString(); customer.CompanyName = dr["CompanyName"].ToString(); customers.Add(customer); } JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); StringBuilder sb = new StringBuilder("{ totalProperty:"); sb.Append(count); sb.Append(",root:"); sb.Append(jsSerializer.Serialize(customers)); sb.Append("}"); return sb.ToString(); } } }

控件结合使用

下面我们看一下整个例子的前提代码。好了，先看一下前台的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>GridPanel</title> <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .btn_search { background: url(ext/resources/images/cmj/btn_search.png) left top no-repeat !important; } .btn_help { background: url(ext/resources/images/cmj/btn_help.png) left top no-repeat !important; } </style> </head> <body> </body> </html>

下面是后台代码（主要是FromPanel相关数据，不包括GridPanel数据的加载）：

主要业务代码

using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Text; using Cmj.MyData; namespace GridPanel { public partial class ProductInfo : System.Web.UI.Page { DBHelper dbHelper = new DBHelper();//自定义数据库操作类 protected void Page_Load(object sender, EventArgs e) { string type = ""; string productId = ""; if (!string.IsNullOrEmpty(Request["type"])) { type = Request["type"]; } if (!string.IsNullOrEmpty(Request["productId"])) { productId = Request["productId"]; } if (type == "getProductInfo") { Response.Write(GetProductInfo(productId)); } else if (type == "getSupplierInfo") { Response.Write(GetSupplierInfo()); } //else if (type == "getCategoryInfo") //{ //} else if (type == "updateProductInfo") { string productName = Request["ProductName"].Replace("'","''"); string discontinued = Request["Discontinued"]; string QuantityPerUnit = Request["QuantityPerUnit"]; string UnitPrice = Request["UnitPrice"]; string UnitsInStock = Request["UnitsInStock"]; string SupplierID = Request["SupplierID"]; string CategoryID = Request["CategoryID"]; string CategoryName = Request["CategoryName"]; string Description = Request["Description"]; UpdateProductInfo(productId,productName,discontinued,QuantityPerUnit,UnitPrice,UnitsInStock,SupplierID,CategoryID,CategoryName,Description); Response.Write("{success:true}"); } Response.End(); } private string GetProductInfo(string productId) { try { string sql = "SELECT dbo.Products.ProductName,dbo.Products.QuantityPerUnit,dbo.Products.UnitPrice,dbo.Products.UnitsInStock,dbo.Products.Discontinued, " + "dbo.Categories.CategoryID,dbo.Categories.CategoryName,dbo.Categories.Description ,dbo.Products.SupplierID FROM dbo.Products INNER JOIN dbo.Categories ON dbo.Products.CategoryID = dbo.Categories.CategoryID WHERE dbo.Products.ProductID='" + productId + "'"; DataTable dt = dbHelper.GetDataTable(CommandType.Text, sql); StringBuilder sb = new StringBuilder("{success:true,info:["); sb.Append(GetJsonFromDataTable(dt)); sb.Append("]}"); return sb.ToString(); } catch (Exception ex) { return "{success:false}"; } } private string GetSupplierInfo() { try { string sql = "SELECT DISTINCT dbo.Suppliers.SupplierID as sID,dbo.Suppliers.CompanyName as cName FROM dbo.Suppliers"; DataTable dt = dbHelper.GetDataTable(CommandType.Text, sql); StringBuilder sb = new StringBuilder("{totalProperty:"); sb.Append(dt.Rows.Count); sb.Append(",root:["); sb.Append(GetJsonFromDataTable(dt)); sb.Append("]}"); return sb.ToString(); } catch (Exception ex) { return "{success:false}"; } } private void UpdateProductInfo(string productId,string productName,string discontinued,string QuantityPerUnit,string UnitPrice,string UnitsInStock,string SupplierID,string CategoryID,string CategoryName,string Description) { string sqlForUpdateProduct = "UPDATE dbo.Products SET ProductName='" + productName + "',Discontinued='" + discontinued + "',QuantityPerUnit='" + QuantityPerUnit + "'," + "SupplierID='" + SupplierID + "',UnitPrice='" + UnitPrice + "',UnitsInStock='" + UnitsInStock + "' WHERE ProductID='" + productId + "'"; string sqlForUpdateCategory = "UPDATE dbo.Categories SET CategoryName='" + CategoryName + "',Description='" + Description + "' WHERE CategoryID='" + CategoryID + "'"; dbHelper.ExcuteNonQuery(CommandType.Text, sqlForUpdateProduct); dbHelper.ExcuteNonQuery(CommandType.Text, sqlForUpdateCategory); } /// <summary> /// 辅助方法，将DataTalbe转化成json字符串 /// </summary> /// <param name="dataTable"></param> /// <returns></returns> private string GetJsonFromDataTable(DataTable dataTable) { bool r=false; StringBuilder json = new StringBuilder(); foreach (DataRow dr in dataTable.Rows) { json.Append("{"); foreach (DataColumn dc in dataTable.Columns) { if (bool.TryParse(dr[dc.ColumnName].ToString(), out r))//如果是bool型，则json值不加双引号 { json.AppendFormat("{0}:{1},", dc.ColumnName, dr[dc.ColumnName].ToString().ToLower()); } else { json.AppendFormat("{0}:/"{1}/",", dc.ColumnName, dr[dc.ColumnName]); } } json.Remove(json.ToString().Length - 1, 1); json.Append("},"); } json.Remove(json.ToString().Length - 1, 1); //json.Append("}"); return json.ToString(); } } }

实体辅助类

using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; namespace GridPanel { public class Product { public string ProductID { get; set; } public string ProductName { get; set; } public string CategoryName { get; set; } public double UnitPrice { get; set; } public string Discontinued { get; set; } public string QuantityPerUnit { get; set; } public string CompanyName { get; set; } } }

简单的看一下效果：

当我们双击GridPanel某行时将弹出对应商品的相关信息（在window控件中显示），我们可以修改其中的信息进行提交。而且在这个例子中我们会向大家展示了如何在FormPanel中嵌套TabPanel。我们知道有很多时候我们的信息通过一个窗口无法完全显示，此时有些朋友会选择在TabPanel中使用FromPanel，但是这样一来造成的问题就是每个Tab中的FromPanel在提交时都是独立的，如果想要同时提交就比较麻烦了（当然你可以选择使用Ext.Ajax.request通过手动获得每个字段的值来提交，但是却很麻烦）。因此，这里我们选择使用FromPanel嵌套TabPanel的方式（由于例子受Northwind业务限制，因此较难找到合适的多Tab同时提交的例子。这里为了给大家展示多个Tab同时提交，就有意的将商品信息的修改和种类的修改组合到一块修改提交，在业务上可能有所不当，故在此声明！）。

注意

代码不是太复杂，但是还是要提醒大家注意一下几点：

关于TabPanel放在FromPanel中时注意deferredRender、layoutOnTabChange属性的使用（由于其中有很多panel一定注意不要把id弄重复了）。
使用FormPanel的加载方法（load）来自动加载时一定要注意FromPanel的reader属性的定义（特别是其中的字段一定要和From控件一致），这一点做不好很容易load失败。
在使用FromPanel的Load方法时注意comboBox、radio(name相同后台返回一个值)、checkbox(name值不同，所以后台返回多个值，返回值必须是true或false)等的赋值。comboBox和radio（虽然例子中没有出现，但是经过测试只要嵌套正常布局[注意同一组radio,name不同],后台返回时只返回需要勾选的键值对[在json中]就可以了）都可以通过load自动加载，可是checkBox确没有找到合适的方法，最终通过在load成功是判读来手动赋值，知道的朋友麻烦说一下。
例子中还用到了显示图片功能，此方法也是开发中常用的方式。

iteye_20835

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs之GridPanel、FormPanel综合篇

今天我们一块看一下GridPanel和FormPanel的另外一些知识。在这一篇文章中我觉得更多的是FromPanel的应用，虽然前面我们单独说了FromPanel布局及其相关控件，但是关于FromPanel的提交和加载一直没有说。在这一篇文章中我们着重说一下FromPanel的加载与提交，以及如何将FormPanel与TabPanel结合起来等。例子要实现的功能：显示商品信息并且支持分页和搜索；...
复制链接

扫一扫