<%@ 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. php 连接mysql数据库以及增删改查

    php 连接数据库 一般是用面向对象的方法,需要先创建一个对象,即造一个连接对象,然后再写sql语句,(增改查删),最后执行sql语句 其中在创建连接对象时 我们用到的是MySQLI  是不区分大小写 ...

  2. SQL server 数据库备份大

    首先简单的介绍一下Sql server 备份的类型有: 1:完整备份(所有的数据文件和部分的事务日志文件) 2:差异备份(最后一次完成备份后数据库改变的部分) 3:文件和文件组备份(对指定的文件和文件 ...

  3. pm2部署多个nodejs项目配置教程

    实际项目部署中,我们服务器在启动的时候需要自动启动node服务.以前是通过liunx自带的命令启动.但是随着后台微服务越来越多.每次发布新程序.修改脚本太麻烦了.于是换成PM2来做. 1.首先安装pm ...

  4. Lustre文件系统测试——obdfilter-survey测试

    Lustre文件系统测试--obdfilter-survey测试 介绍 该测试主要是在lustre文件系统工作环境下进行,将直接在ost上生成工作负载模拟并行文件访问,可准确检测盘阵在lustre文件 ...

  5. 基于zookeeper的Swarm集群搭建

    简介 Swarm:docker原生的集群管理工具,将一组docker主机作为一个虚拟的docker主机来管理. 对客户端而言,Swarm集群就像是另一台普通的docker主机. Swarm集群中的每台 ...

  6. Linux下简单C语言小程序的反汇编分析

    韩洋原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 写在开始,本文为因为参加MOO ...

  7. Oracle参数设置之set与reset的实际案例

    Oracle参数设置之set与reset的实际案例 环境:Oracle 10.2.0.5 RAC 需求:节点1的aq_tm_processes要求恢复默认,节点2设置要求保持不变 1.构建测试环境 2 ...

  8. MySql中利用insert into select 准备数据uuid主键冲突

    MYSQL 中表1需要准备大量数据,内容主要取自表2,id必须为32位uuid (项目所有表都是这样,没办法), 准备这样插入: INSERT INTO TBL_ONE (ID, SOID, SNAM ...

  9. Leetcode题解（十六）

    44 ----------------------------------------------------------------分割线------------------------------ ...

  10. dp百题大过关(第一场)

    好吧,这名字真是让我想起了某段被某教科书支配的历史.....各种DP题层出不穷,不过终于做完了orz 虽然各种手糊加乱搞,但还是要总结一下. T1 Monkey Banana Problem    这 ...