<%@ 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. springboot自定义配置源

    概述 我们知道,在Spring boot中可以通过xml或者@ImportResource 来引入自己的配置文件,但是这里有个限制,必须是本地,而且格式只能是 properties(或者 yaml). ...

  2. Django REST framework 中文教程1:序列化

    建立环境 在我们做任何事情之前,我们将使用virtualenv创建一个新的虚拟环境.这将确保我们的包配置与我们正在开展的任何其他项目保持良好的隔离. virtualenv envsource env/ ...

  3. string使用

    一.list和string转化 List转字符串,用逗号隔开 List<string> list = new List<string>();list.Add("a&q ...

  4. C#方法中参数ref和out的解析

    一.C#方法中参数类型 有4种参数类型,有时候很难记住它们的不同特征,下图对它们做一个总结,使之更容易比较和对照. 二.C#方法中的参数 1.值参数 使用值参数,通过复制实参的值到形参的方式把数据传递 ...

  5. Memcached查找命令

    Memcached各个查找命令的语法格式都类似,且有相同的参数和参数含义,先将可能出现的各个参数的意义说明如下 key:键值 key-value 结构中的 key,用于查找缓存值. noreply(可 ...

  6. MQTT——控制报文格式

    解控制报文格式是学习MQTT中,笔者认为最为重要的一个知识点.MQTT的所有行为都离不开他.控制报文可以分为三个部分组成,分别为:固定报头.可以变报头.有效载荷部分. 注意:上面的说的报文的类型.是指 ...

  7. JavaScript数组去重方法汇总

    1.运用数组的特性 1.遍历数组,也遍历辅助数组,找出两个数组中是否有相同的项,若有则break,没有的话就push进去. //第一版本数组去重 function unique(arr){ var r ...

  8. js实现前端下载文件

    在前端下载文本格式的文件时,可采用下面的方式: (1)创建基于文件内容的Blob对象: (2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址. (3 ...

  9. C#之可选参数和命名参数

    设计方法的参数是,可以将部分参数和全部参数分配默认值,然后调用这些方法的时候可以选择不提供部分实参,使用参数定义的默认值,另外,还可以在调用方法的时候通过指定参数名称来传递实参. 例如: public ...

  10. ubuntu 14.04搭建PHP项目基本流程

    首先准备需要安装东西的列表1.apache服务器,2.php,3.mysql,4.几个软件包的链接包,安装方式是以apt-get方式安装; 1.安装apache服务器: apt-get install ...