<%@ 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. DevOps之存储和数据库

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <数据(Data)> 了解有关数据部分.涉及存储及数据库的概念:知识与技能的层次( ...

  2. Django REST FrameWork中文教程2:请求和响应

    从这一点开始,我们将真正开始覆盖REST框架的核心.我们来介绍几个基本的构建块. 请求对象REST框架引入了Request扩展常规的对象HttpRequest,并提供更灵活的请求解析.Request对 ...

  3. C＃ TextBlock 上标

    我需要做一个函数,显示 ,但是看起来用 TextBlock 做的不好看. 我用 WPF 写的上标看起来不好看,但是最后有了一个简单方法让他好看. 本文告诉大家如何做一个好看的上标. 一开始做的方法: ...

  4. Akka（29）： Http：Server-Side-Api，Low-Level-Api

    Akka-http针对Connection的两头都提供了方便编程的Api,分别是Server-Side-Api和Client-Side-Api.通过这两个Api可以大大提高编程效率.当然,上期我们提到 ...

  5. 什么是UUID？

    1.定义 UUID含义是通用唯一识别码 (Universally Unique Identifier),这 是一个软件建构的标准,也是被开源软件基金会 (Open Software Foundatio ...

  6. substance在java swing中使用注意事项

    package org.dgw.uidemo; import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing.UI ...

  7. php代码常见错误详解整理

    错误类型: 一.未使用二进制上传   代码:    Fatal error: This encoded file is corrupted. Please refer to http://www.ze ...

  8. quartz 定时任务

    面试问到了,回答的不是很全面,丢人呀.研究过,用过的东西. 2年多没用,回忆一下: Quartz任务调度框架和Spring集成使用:定时执行一些任务 核心:调度器.任务和触发器. 调度器负责调度各个任 ...

  9. LeetCode 79. Word Search（单词搜索）

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  10. python学习笔记（十一）之函数

    牛刀小试: 定义一个无参函数 >>> def myFirstFunc(): ... print("Hello python") ... print("h ...