<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中国Java开源产品及团队</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
//定义数据二维数组
var data=[
['1','male', 'nam1','descn1'],
['2', 'female','nam2','descn2'],
['3', 'male','nam3','descn3'],
['4', 'female','nam4','descn4'],
['5', 'male','nam5','descn5'],
];
function renderSex(value) {
if(value == 'male'){
return "<span style='color:red:font-weight:bold:'>红男</span>";
} else {
return "<span style='color:green:font-weight:bold:'>绿女</span>";
}
}
//整理数据定义3列的索引为id,name,descn
var store=new Ext.data.SimpleStore({
data:data,fields:['id','sex','name','descn']
});
//定义勾选框,不需要可不必定义
var sm = new Ext.grid.CheckboxSelectionModel();
//定义列,在这里定义每列的宽度
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//增加自动编号,不需要可不必定义
sm,//勾选框,不需要可不必定义
{header:'编号',dataIndex:'id',width:170,sortable:true},// 生成列,sortable为列排序,不需要设置为false,默认false,renderer为该列增加自定义函数
{header:'性别',dataIndex:'sex',width:170,renderer:renderSex}, // sortable进行排序
{header:'名称',dataIndex:'name',width:170,sortable:true},
{header:'描述',dataIndex:'descn',width:170}
]);
//生成表格
var grid = new Ext.grid.GridPanel({
renderTo:'show',
title:"中国Java开源产品及团队",
height:200,
width:600,
cm:colM,
sm:sm,
store:store,
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg: '显示第{0}条到{1}条记录,一共{2}条',
emptyMsg:'没有记录'
})
});
});
</script>
<div id="show"></div>
</body>
</html>
放在extjs包下,就可以运行,注意指定:ext-all.css;ext-base.js;ext-all.js文件的路径.
分享到:
相关推荐
ExtJS 是一个很不错的Ajax 框架,可以用来开发带有华丽外观的富客户端应用,ExtJS 是一个用javascript 编写,与后台技术无关的前端ajax 框架...本教程主要是针对ExtJS2.0 进行介绍,全部代码、截图等都是基于ExtJS2.0。
ExtJs2.0学习系列ExtJs2.0学习系列
Extjs2.0 智能提示
资料:包括extjs2.0源码
包括ExtJS2.0及API,还包括例子,以及中文的实用开发指南。对于初学ExtJS有很大的帮助。
最近我们在几个应用都使用到了ExtJS,对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造,使得整个系统在用户体验上有了非常大的变化。本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习...
extJs2.0 中文手册 案例
博文链接:https://zjnbshifox.iteye.com/blog/147574
Ext2 核心 API 中文详解 ExtJS2.0实用简明教程 ExtJS2.0教程 ExtJS2.0实用简明教程(easyjf) ext中文API+ sample
Extjs2.0中文文档,pdf文档,值得收藏。 这个是老版本,但是也应该有不少人用这个。 好东西要分享
ajax框架之extjs2.0源码,用例,API……
EXTJS 2.0的官方范例,离线html格式!
关于ext学习的资料,有些例子 ExtJs2.0学习系列.CHM
ExtJS2.0实用简明教程和ExtJSapi
ExtJS2.0实用简明教程ExtJS2.0实用简明教程ExtJS2.0实用简明教程ExtJS2.0实用简明教程ExtJS2.0实用简明教程ExtJS2.0实用简明教程ExtJS2.0实用简明教程ExtJS2.0实用简明教程
这是一份Extjs2.0的技术材料,全部是基础知识,非常适合初学者。
Extjs2.0一些例子,非常适合初学者
《ExtJS2.0实用简明教程》之应用ExtJS详细介绍
extjs2.0 使用简明教程之窗口分组,实现分组窗体
1. ExtJs2.0学习系列(1)--Ext.MessageBox 2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 ...