The official has an example of grid curd: http://examples.coolite.com/Examples/GridPanel/WebService_Connections/HandlerUsing/I make a slight change on the basis of it, using ComboBox as the editor of the grid:
First show the effect for everyone to adhere to the momentum of watching:
Key code:
Copy Code code as follows:
<ext:column columnid= "ContactName" dataindex= "ContactName" header= "Contact Name"
Width= ">"
<Editor>
<ext:combobox id= "ComboBox1" runat= "Server" storeid= "Stocontactname" displayfield= "Name"
Valuefield= "Name" typeahead= "false" loadingtext= "Searching ..." Width= "570" pagesize= "10"
Editable= "true" mode= "Remote" minlistwidth= "itemselector=" Tr.search-item "
minchars= "1" msgtarget= "Side" triggeraction= "All" grow= "true" >
<CustomConfig>
<ext:configitem name= "TPL" value= "#{tplcontactname}" mode= "Raw"/>
</CustomConfig>
</ext:ComboBox>
</Editor>
</ext:Column>
Because ComboBox is a editor, you cannot configure the template directly, so the template is written independently:
Copy Code code as follows:
<ext:xtemplate id= "Tplcontactname" runat= "Server" >
<div>
<table id= "data_table" class= "T1" >
<thead>
<tr>
<th>
Name
</th>
<th>
Desc
</th>
</tr>
</thead>
<tbody>
<tpl for= "." >
<tr class= "Search-item" >
<td>{Name}</td>
<td>{Desc}</td>
</tr>
</tpl>
</tbody>
</table>
</div>
</ext:XTemplate>
Plus this cool table style is basically done:
Copy Code code as follows:
Body, Table.t1
{
font-size:12px;
}
Table.t1
{
table-layout:fixed;
Empty-cells:show;
Border-collapse:collapse;
margin:0 Auto;
}
Td
{
height:20px;
}
H1, H2, H3
{
font-size:12px;
margin:0;
padding:0;
}
Table.t1
{
border:1px solid #cad9ea;
Color: #666;
}
TABLE.T1st
{
Background-image:url (/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd);
Background-repeat:repeat-x;
height:22px;
}
Table.t1 td, Table.t1 TH
{
border:1px solid #cad9ea;
padding:0 1em 0;
}
Table.t1 tr.a1
{
Background-color: #f5fafe;
}
Enjoy yourself!
Complete code:
Html
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true"%>
<%@ Register assembly= "Coolite.Ext.Web" namespace= "Coolite.Ext.Web" tagprefix= "Ext"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<style type= "Text/css" ><!--
Body, Table.t1
{
font-size:12px;
}
Table.t1
{
table-layout:fixed;
Empty-cells:show;
Border-collapse:collapse;
margin:0 Auto;
}
Td
{
height:20px;
}
H1, H2, H3
{
font-size:12px;
margin:0;
padding:0;
}
Table.t1
{
border:1px solid #cad9ea;
Color: #666;
}
TABLE.T1st
{
Background-image:url (/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd);
Background-repeat:repeat-x;
height:22px;
}
Table.t1 td, Table.t1 TH
{
border:1px solid #cad9ea;
padding:0 1em 0;
}
Table.t1 tr.a1
{
Background-color: #f5fafe;
}
--></style><style type= "Text/css" bogus= "1" > Body, TABLE.T1
{
font-size:12px;
}
Table.t1
{
table-layout:fixed;
Empty-cells:show;
Border-collapse:collapse;
margin:0 Auto;
}
Td
{
height:20px;
}
H1, H2, H3
{
font-size:12px;
margin:0;
padding:0;
}
Table.t1
{
border:1px solid #cad9ea;
Color: #666;
}
TABLE.T1st
{
Background-image:url (/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd);
Background-repeat:repeat-x;
height:22px;
}
Table.t1 td, Table.t1 TH
{
border:1px solid #cad9ea;
padding:0 1em 0;
}
Table.t1 tr.a1
{
Background-color: #f5fafe;
}
</style>
<body>
<ext:scriptmanager id= "ScriptManager1" runat= "Server"/>
<form id= "Form1" runat= "Server" >
<div>
<ext:store runat= "Server" id= "Stocontactname" >
<Proxy>
<ext:httpproxy url= "Customerhandler.ashx?action=contact"/>
</Proxy>
<Reader>
<ext:jsonreader root= "Data" totalproperty= "TotalCount" >
<Fields>
<ext:recordfield name= "Name"/>
<ext:recordfield name= "Desc"/>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:xtemplate id= "Tplcontactname" runat= "Server" >
<div>
<table id= "data_table" class= "T1" >
<thead>
<tr>
<th>
Name
</th>
<th>
Desc
</th>
</tr>
</thead>
<tbody>
<tpl for= "." >
<tr class= "Search-item" >
<td>{Name}</td>
<td>{Desc}</td>
</tr>
</tpl>
</tbody>
</table>
</div>
</ext:XTemplate>
<ext:store id= "dscustomers" runat= "Server" remotesort= "true" useidconfirmation= "true" >
<Proxy>
<ext:httpproxy url= "Customerhandler.ashx?action=query"/>
</Proxy>
<UpdateProxy>
<ext:httpwriteproxy url= "Customerhandler.ashx?action=save"/>
</UpdateProxy>
<Reader>
<ext:jsonreader readerid= "CustomerID" root= "Data" totalproperty= "TotalCount" >
<Fields>
<ext:recordfield name= "CustomerID" sortdir= "ASC"/>
<ext:recordfield name= "CompanyName"/>
<ext:recordfield name= "ContactName"/>
<ext:recordfield name= "Email"/>
<ext:recordfield name= "Phone"/>
<ext:recordfield name= "Fax"/>
<ext:recordfield name= "Region"/>
<ext:recordfield name= "trandate" type= "Date"/>
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:parameter name= "Limit" value= "mode=" "Raw"/>
<ext:parameter name= "Start" value= "0" mode= "Raw"/>
<ext:parameter name= "dir" value= "ASC"/>
<ext:parameter name= "Sort" value= "CustomerID"/>
</BaseParams>
<sortinfo field= "CustomerID" direction= "ASC"/>
</ext:Store>
<ext:viewport id= "ViewPort1" runat= "Server" >
<Body>
<ext:fitlayout id= "FITLAYOUT1" runat= "Server" >
<ext:gridpanel id= "GridPanel1" runat= "Server" header= "false" Border= "false" storeid= "Dscustomers"
Trackmouseover= "true" clickstoedit= "1" autoexpandcolumn= "CompanyName" height= ">"
<columnmodel id= "ColumnModel1" runat= "Server" >
<Columns>
<ext:column columnid= "CustomerID" dataindex= "CustomerID" header= "ID" >
<Editor>
<ext:textfield id= "TextField1" runat= "Server" maxlength= "5" allowblank= "false"/>
</Editor>
</ext:Column>
<ext:column columnid= "trandate" dataindex= "trandate" header= "Tran Date" >
<Editor>
<ext:datefield id= "DateField1" runat= "Server" format= "Yyyy-mm-dd" msgtarget= "Side"/>
</Editor>
</ext:Column>
<ext:column columnid= "CompanyName" dataindex= "CompanyName" header= "Company Name" >
<Editor>
<ext:textfield id= "TextField2" runat= "Server" allowblank= "false"/>
</Editor>
</ext:Column>
<ext:column columnid= "ContactName" dataindex= "ContactName" header= "Contact Name"
Width= ">"
<Editor>
<ext:combobox id= "ComboBox1" runat= "Server" storeid= "Stocontactname" displayfield= "Name"
Valuefield= "Name" typeahead= "false" loadingtext= "Searching ..." Width= "570" pagesize= "10"
Editable= "true" mode= "Remote" minlistwidth= "itemselector=" Tr.search-item "
minchars= "1" msgtarget= "Side" triggeraction= "All" grow= "true" >
<CustomConfig>
<ext:configitem name= "TPL" value= "#{tplcontactname}" mode= "Raw"/>
</CustomConfig>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:column columnid= "Email" dataindex= "email" header= "Email" >
<Editor>
<ext:textfield id= "TextField4" runat= "server" vtype= "email"/>
</Editor>
</ext:Column>
<ext:column columnid= "Phone" dataindex= "phone" header= "Phone" >
<Editor>
<ext:textfield id= "TEXTFIELD5" runat= "Server"/>
</Editor>
</ext:Column>
<ext:column columnid= "Fax" dataindex= "Fax" header= "Fax" >
<Editor>
<ext:textfield id= "TextField6" runat= "Server"/>
</Editor>
</ext:Column>
<ext:column columnid= "Region" dataindex= "Region" header= "Region" >
<Editor>
<ext:textfield id= "TextField7" runat= "Server"/>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<TopBar>
<ext:toolbar id= "Toolbar1" runat= "Server" >
<Items>
<ext:button id= "Button1" runat= "Server" text= "Save" icon= "Disk" >
<Listeners>
<click handler= "#{dscustomers}.save ();"/>
</Listeners>
</ext:Button>
<ext:button id= "Button3" runat= "Server" text= "Add" icon= "Add" >
<Listeners>
<click handler= "#{gridpanel1}.insertrecord (0, {}); #{gridpanel1}.getview (). Focusrow (0); #{gridpanel1}. Startediting (0, 0); "/>
</Listeners>
</ext:Button>
<ext:button id= "Button2" runat= "Server" text= "Reject Changes" icon= "Arrowundo" >
<Listeners>
<click handler= "#{dscustomers}.rejectchanges ();"/>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:pagingtoolbar id= "PagingToolbar1" runat= "Server" storeid= "dscustomers" pagesize= ""/>
</BottomBar>
<Listeners>
<beforeedit handler= "Return!" (e.field== ' CustomerID ' &&!e.record.newrecord); " />
</Listeners>
<loadmask showmask= "true"/>
<savemask showmask= "true"/>
</ext:GridPanel>
</ext:FitLayout>
</Body>
</ext:ViewPort>
</div>
</form>
</body>
Customerhandler.ashx
Copy Code code as follows:
Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using Coolite.Ext.Web;
Namespace Webspn.controllers
{
<summary>
Summary description for $codebehindclassname $
</summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
public class Customerhandler:ihttphandler
{
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
String json = "";
var Request =context. Request;
String action= request["action"];
if (action = = "Query")
{
Random rand=new Random ();
int limit =int. Parse (request["limit"]);
int start =int. Parse (request["start"));
ilist<customer> list = new list<customer> ();
for (int i = start; I < start + limit; i++)
List. ADD (New Customer
{
CustomerID = "Customer" +i,
Address = ' Address ' +i,
City = "City" + Rand. Next (1000),
CompanyName = "Com" + Rand. Next (1000),
ContactName = "Contract" + Rand. Next (1000),
ContactTitle = "Title" + Rand. Next (1000),
Country = "Country" + Rand. Next (1000),
Email = Rand. Next (1000) + "@live. com",
Fax = Rand. Next (1000). ToString () + rand. Next (1000),
Mobile = Rand. Next (1000). ToString () + rand. Next (1000),
Notes = "Notes" + Rand. Next (1000),
Phone = "Phone" + rand. Next (1000),
Region = "Region" + Rand. Next (1000),
Trandate =datetime. Now. AddDays (Rand. Next (30))
});
json= Coolite.Ext.Web.JSON.Serialize (list);
JSON = "{data:" + JSON + ", TotalCount:" + 100 + "}";
Context. Response.Write (JSON);
}
else if (action = = "Save")
{
Saving
Storedatahandler DataHandler = new Storedatahandler (request["Data"));
changerecords<customer> data = datahandler.objectdata<customer> ();
foreach (Customer customer in data.) Deleted)
{
Db. Customers.attach (customer);
Db. Customers.deleteonsubmit (customer);
}
foreach (Customer customer in data.) Updated)
{
Db. Customers.attach (customer);
Db. Refresh (refreshmode.keepcurrentvalues, customer);
}
foreach (Customer customer in data.) Created)
{
Db. Customers.insertonsubmit (customer);
}
Db. SubmitChanges ();
Response sr = new Response (true);
Sr. Success = true;
Sr. Write ();
}
else if (action = = "Contact")
{
string query = request["Query"]?? "";
JSON = ' [{Name: ' Bruce Lee query: ' +query + ', Desc: ' SKJFKASJDKF '},{name: ' zzz ', Desc: ' SFFFFKF '},{name: ' Ssse ', Desc: ' ZZZZZZASJDKF '}, "+
"{Name: ' Bruce Lee ' + DateTime.Now +" ', Desc: ' SKZZJDKF '},{name: ' zzz ', Desc: ' SFFFFKF '},{name: ' Ssse ', Desc: ' ZZZZZZASJDKF '}, "+
"{Name: ' Bruce Lee ', Desc: '" + DateTime.Now + "'},{name: ' zzz ', Desc: ' SFFFFKF '},{name: ' Ssse ', Desc: ' ZZZZZZASJDKF '}" +
"]";
JSON = "{data:" + JSON + ", TotalCount:" + 20 + "}";
Context. Response.Write (JSON);
}
}
public bool IsReusable
{
Get
{
return false;
}
}
}
public partial class Customer
{
public string CustomerID {get; set;}
public string CompanyName {get; set;}
public string ContactName {get; set;}
public string ContactTitle {get; set;}
public string Address {get; set;}
public string City {get; set;}
public string Region {get; set;}
public string PostalCode {get; set;}
public string Country {get; set;}
public string Phone {get; set;}
public string Fax {get; set;}
public string Mobile {get; set;}
public string Email {get; set;}
public string webpage {get; set;}
public string Notes {get; set;}
Public DateTime trandate {get; set;}
}
}