<%@ 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. C语言 流缓冲

    **From : https://www.gnu.org/software/libc/manual/html_node/Stream-Buffering.html** 12.20 流缓冲 通常情况下, ...

  2. 如何结合场景利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...

  3. Install Ubuntu On Windows10(win10上安装linux系统)

    一.准备: 硬件:U盘 软件:ultraiso.Ubuntu镜像文件 二.安装linux: 1.Ubuntu官网(http://www.ubuntu.org.cn/download/alternati ...

  4. Ubuntu15.04 网站服务器环境搭建，php/html/css等学习环境搭建教程

    ---恢复内容开始--- 本文部分参考自:http://www.cnblogs.com/emouse/archive/2013/06/07/3124009.html 原文中存在少量错误,已改正. 首先 ...

  5. Linux入门(11)——Ubuntu16.04安装texlive2016并配置texmaker和sublime text3

    安装过程中需要调用 Perl 的模块 Digest::MD5 来检测 ISO 文件的完整性:升级过程中界面需要调用 Perl 的模块 Tk: sudo apt-get install libdiges ...

  6. ELK系列~Nxlog日志收集加转发(解决log4日志换行导致json转换失败问题)

    本文章将会继承上一篇文章,主要讲通过工具来进行日志的收集与发送,<ELK系列~NLog.Targets.Fluentd到达如何通过tcp发到fluentd> Nxlog是一个日志收集工具, ...

  7. sql执行报错--This version of MySQL doesn't yet support 'LIMIT & IN/ALL/ANY/SOME subquery'

    问题: 不支持使用 LIMIT 子句的 IN/ALL/ANY/SOME 子查询,即是支持非 IN/ALL/ANY/SOME 子查询的 LIMIT 子查询. 解决: 将语句:select * from ...

  8. jsp页面接收json字符串

    jsp页面接收 后台添加

  9. Linux上安装二进制文件MySQL详解

    前言:昨天晚上搞了很久,终于搞清楚mysql的安装配置了,我真是太low了.当我在云服务器上登进Mysql时,真是高兴哈哈,咱一步一步来,彻底搞懂Mysql的安装配置. 我的安装环境: 阿里云服务器 ...

  10. 五、在IDEA中使用GIt版本控制并将本地代码上传至Github

    一.安装git     Git工具下载:https://git-scm.com/downloads 从官网下载.安装很简单,基本都是下一步. 安装完的第一件事情就是创建一个Git用户: git con ...