Home > Developer > Web Develop
<%@ page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Webapplication1._default"% >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title
<link href= "extjs3/resources/css/ext-all.css" rel= "stylesheet"/>
<script src= "extjs3/ Adapter/ext/ext-base.js "></SCRIPT>
<script src=" Extjs3/ext-all.js "></SCRIPT>
<script>
Ext.onready (function () {
var sm = new Ext.grid.CheckboxSelectionModel ();
var cm = new Ext.grid . Columnmodel ([
New Ext.grid.RowNumberer (),
SM,
{header: ' number ', Dataindex: ' ID ', sortable:true},
{header: ' Names ', Dataindex: ' Name '},
{header: ' description ', dataindex: ' Descn '},
{
Header: ' Date ', Dataindex: ' Time ', type: ' Da Te '
},
{header: ' Gender ', dataindex: ' Sex ', renderer:function (value) {
if (value = = "Male") {
return ' <span s Tyle= ' Color:red;font-weight:bold; ' > Red man </span > ";
} else {
return "<span style= ' color:green;font-weight:bold; ' > Female </span > ";
}
} }
]);//Create Columns
var data = [
[' 1 ', ' name1 ', ' descn1 ', ' 1970-01-12t02:58:04 ', ' Man '],
[' 2 ', ' name2 ', ' descn2 ', ' 1970-01-12t02:58:04 ', ' Man '],
[' 3 ', ' Name3 ', ' descn3 ', ' 1970-01-12t02:58:04 ', ' Man '],
[' 1 ', ' name1 ', ' descn1 ', ' 1970-01-12t02:58:04 ', ' Man '],
[' 2 ', ' name2 ', ' descn2 ', ' 1970-01-12t02:58:04 ', ' Man '],
[' 3 ', ' Name3 ', ' descn3 ', ' 1970-01-12t02:58:04 ', ' Man '],
[' 1 ', ' name1 ', ' descn1 ', ' 1970-01-12t02:58:04 ', ' Man '],
[' 2 ', ' name2 ', ' descn2 ', ' 1970-01-12t02:58:04 ', ' Man '],
[' 1 ', ' name1 ', ' descn1 ', ' 1999-01-12t02:58:04 ', ' Woman '],
[' 2 ', ' name2 ', ' descn2 ', ' 1999-01-12t02:58:04 ', ' Woman '],
[' 3 ', ' Name3 ', ' descn3 ', ' 1999-01-12t02:58:04 ', ' Woman '],
[' 1 ', ' name1 ', ' descn1 ', ' 1999-01-12t02:58:04 ', ' Woman '],
[' 2 ', ' name2 ', ' descn2 ', ' 1999-01-12t02:58:04 ', ' Woman '],
[' 3 ', ' Name3 ', ' descn3 ', ' 1999-01-12t02:58:04 ', ' Woman '],
[' 1 ', ' name1 ', ' descn1 ', ' 1999-01-12t02:58:04 ', ' Woman '],
[' 2 ', ' name2 ', ' descn2 ', ' 1999-01-12t02:58:04 ', ' Woman '],
//]
var store = new Ext.data.Store ({
Proxy:new Ext.data.HttpProxy ({
URL: ' Handler3.ashx ',
Type: ' Ajax ',
Getmethod:function () {return ' POST ';},
Reader: {
Type: ' JSON ',
}
}),
Reader:new Ext.data.JsonReader ({},[
{name: ' Id '},
{name: ' Name '},
{name: ' DESCN '},
{name: ' Time '},
{name: ' Sex '},
])
})
Store.load ();
var Grid = new Ext.grid.GridPanel ({
Renderto: ' Test ',
Store:store,
HEIGHT:200,
Sm:new Ext.grid.RowSelectionModel ({singleselet:true}),
Striperows:true,
Loadmask:true,
CM:CM,
Viewconfig: {
Columnstext: ' Displayed columns ',
Sortasctext: ' Descending ',
Sortdesctext: ' Ascending ',
SCROLLOFFSET:50,
Forcefit:true
},
Bbar:new Ext.pagingtoolbar ({
Pagesize:5,
Store:store,
Displayinfo:true,
Displaymsg: ' shows the record of {0} to the {1} bar, altogether {2} ',
Emptymsg: "No Records"
}),
});
Store.load ();
Ext.get (' Remove '). On (' click ', function () {
Store.remove (Store.getat (1));
Grid.view.refresh ();
})
Grid.on (' click ', function () {
var selection = Grid.getselectionmodel (). Getselections ();//GET Rowset
for (var i = 0; i < selection.length; i++)
{
var record = Selection[i];
Ext.Msg.alert (' Hint ', Record.get ("Id") + "," + record.get (' Name ') + "," + record.get ("DESCN"));
}
})
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<div id= "Test" ></div>
<input id= "Remove" type= "button" value= "Delete"/>
<input id= "addbtn" type= "button" value= "Add"/>
</div>
</form>
</body>
Background code:
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
list<student> list = new list<student> ();
for (int i = 0; i <; i++)
{
Student stu = new Student ();
Stu. Id = i++;
Stu. Name = "name" + i++;
STU.DESCN = "Chaoyang" + i + "area";
Stu. Time = DateTime.Now.ToString ();
if (i% 2 = = 0)
{
Stu.sex = "male";
}
Else
{
Stu.sex = "female";
}
List. ADD (Stu);
}
String JSON = Newtonsoft.Json.JsonConvert.SerializeObject (list);
Context. Response.Write (JSON);
}
Extjs+handler Getting Started display
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
