ExtJs之GridPanelFormPanel综合篇

Posted 2022-06-03 KenshinCui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ExtJs之GridPanelFormPanel综合篇相关的知识，希望对你有一定的参考价值。

今天我们一块看一下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.<a href="https://it.cha138.com/html/" target="_blank"><strong class="keylink">html</strong></a>Controls; 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); <a href="https://it.cha138.com/javascript/" target="_blank"><strong class="keylink">javascript</strong></a>Serializer 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成功是判读来手动赋值，知道的朋友麻烦说一下。
例子中还用到了显示图片功能，此方法也是开发中常用的方式。

以上是关于ExtJs之GridPanelFormPanel综合篇的主要内容，如果未能解决你的问题，请参考以下文章

03_java基础之综合练习与考核评估

ExtJs之DHTML,DOM,EXTJS的事件绑定区别