<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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: '编号', dataIndex: 'Id', sortable: true },
{ header: '名称', dataIndex: 'Name' },
{ header: '描述', dataIndex: 'descn' },
{
header: '日期', dataIndex: 'Time', type: 'date'
},
{ header: '性别', dataIndex: 'sex', renderer:function(value){
if (value == "男") {
return "<span style='color:red;font-weight:bold;'>红男</span >";
} else {
return "<span style='color:green;font-weight:bold;'>女</span >";
}

} }

]);//创建列
//var data = [
// ['1', 'name1', 'descn1','1970-01-12T02:58:04','男'],
// ['2', 'name2', 'descn2', '1970-01-12T02:58:04', '男'],
// ['3', 'name3', 'descn3', '1970-01-12T02:58:04', '男'],
// ['1', 'name1', 'descn1', '1970-01-12T02:58:04', '男'],
// ['2', 'name2', 'descn2', '1970-01-12T02:58:04', '男'],
// ['3', 'name3', 'descn3', '1970-01-12T02:58:04', '男'],
// ['1', 'name1', 'descn1', '1970-01-12T02:58:04', '男'],
// ['2', 'name2', 'descn2', '1970-01-12T02:58:04', '男'],
// ['1', 'name1', 'descn1', '1999-01-12T02:58:04', '女'],
// ['2', 'name2', 'descn2', '1999-01-12T02:58:04', '女'],
// ['3', 'name3', 'descn3', '1999-01-12T02:58:04', '女'],
// ['1', 'name1', 'descn1', '1999-01-12T02:58:04', '女'],
// ['2', 'name2', 'descn2', '1999-01-12T02:58:04', '女'],
// ['3', 'name3', 'descn3', '1999-01-12T02:58:04', '女'],
// ['1', 'name1', 'descn1', '1999-01-12T02:58:04', '女'],
// ['2', 'name2', 'descn2', '1999-01-12T02:58:04', '女'],
//]
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: '显示的列',
sortAscText: '降序',
sortDescText: '升序',
scrollOffset:50,
forceFit:true
},
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: '显示第{0}条到第{1}条的记录，一共{2}条',
emptyMsg:"没有记录"
}),

});
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();//获取行集合
for (var i = 0; i < selection.length; i++)
{
var record = selection[i];
Ext.Msg.alert('提示', record.get("Id") + "," + record.get('Name') + "," + record.get("descn"));
}
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="test"></div>
<input id="remove" type="button" value="删除" />
<input id="addbtn" type="button" value="添加"/>
</div>
</form>
</body>
</html>

后台代码：

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<student> list = new List<student>();
for (int i = 0; i < 100; i++)
{
student stu = new student();
stu.Id = i++;
stu.Name = "name" + i++;
stu.descn = "朝阳" + i + "区";
stu.Time = DateTime.Now.ToString();
if (i % 2 == 0)
{
stu.sex = "男";
}
else
{
stu.sex = "女";
}
list.Add(stu);
}
string JSON = Newtonsoft.Json.JsonConvert.SerializeObject(list);
context.Response.Write(JSON);
}

ExtJS+Handler入门显示的更多相关文章

  1. Jqgrid入门-显示基本的表格(一)

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的.         特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...

  2. extjs 简单入门

    中文网站:http://extjs.org.cn/ 英文网站:http://www.sencha.com/products/extjs/ 1.简介 extJS是一种主要用于创建前端用户界面,是一个基本 ...

  3. 22.Extjs Panel中显示多行工具栏(tbar)

    转自:http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中,我们经常性的会用到工具栏,在Extjs中Panel中提供了tbar和 ...

  4. Extjs 表格横坐标显示问题

    在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的a ...

  5. Extjs关于alert显示不出—异步问题

    对应extjs提示框不能正常显示,而使用js的本身提示框可以正常,但由于样式不统一,不是 好的解决方法. 解决该问题,要了解extjs异步原理. ext的提示框都是异步的,非阻塞模式的,浏览器js的提 ...

  6. 19.Extjs主页面显示js

    1. /** * @author sux * @time 2011-1-11 * @desc main page */ var mainPage = Ext.extend(Ext.Viewport,{ ...

  7. 84. ExtJS下页面显示中文乱码问题

    转自:https://blog.csdn.net/wenminhao/article/details/51198981 最近在学校extjs是,使用js脚本显示中文在html页面中时,中午出现了乱码的 ...

  8. MFC入门--显示静态图片及调用本地软件

    MFC是微软开发的基础类库,主要用来开发图形界面应用程序,在学习中,我们要验证算法好坏,一般需要对结果进行可视化. OpenCV是计算机视觉中的开源算法库,集成了很多先进算法,现在想将MFC与Open ...

  9. ExtJS从入门到后面肯定要抛弃

    一.ExtJs定义 ①基于JavaScript语言 ②基于JavaSwing的MVC架构 ③支持组件化.模块化设计 ④提供“本地数据源”的支持 ⑤完完善与服务端的交互机制 ⑥是最有可能拥有大规模可视化 ...

随机推荐

  1. 一款好用的软件easyUI

    easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HT ...

  2. 第四章 MySQL高级查询（二）

    第四章 MySQL高级查询(二) 一.EXISTS子查询 在执行create 或drop语句之前,可以使用exists语句判断该数据库对像是否存在,返回值是true或false.除此之外,exists ...

  3. 多线程（RunLoop）

    1.RunLoop的概念及作用 2.RunLoop的使用 3.RunLoop的相关类 4.RunLoop的工作原理 5.小结 6.思考 什么是RunLoop? 从字面意思上是一直循环跑,事实上就是一个 ...

  4. 如何开发webpack loader

    关于webpack 作为近段时间风头正盛的打包工具,webpack基本占领了前端圈.相信你都不好意思说不知道webpack. 有兴趣的同学可以参考下我很早之前的webpack简介 . 确实webpac ...

  5. masonry 设置控件抗压缩及抗拉伸

    使用masonry正常设置约束时两个label的显示是下图 添加代码设置蓝色label的抗压缩属性后( [self.missionNameLabel setContentCompressionResi ...

  6. 简单说下C#变量的作用域

    变量的作用域分为局部变量和全局变量举个小例子 class Program { int i = 3;//这个变量i 需要实例化Program才能使用 static void Main(string[] ...

  7. 完整Log4Net配置信息

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...

  8. Java IO(IO流)-1

    IO流 第一部分 (outputStream/InputStream Writer/Redaer) IO流对象中输入和输出是相辅相成的,输出什么,就可以输入什么. IO的命名方式为前半部分能干什么,后 ...

  9. React与Preact差异之 -- setState

    Preact是React的轻量级实现,是React比较好的替代者之一,有着体积小的优点,当然与React之间一定会存在实现上的差异,本文介绍了在 setState 方面的差异之处. 源码分析 首先来分 ...

  10. Vuex state 状态浅解

    对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...