GroupingStore分组表格

最新推荐文章于 2021-04-09 09:43:31 发布

todayapple

最新推荐文章于 2021-04-09 09:43:31 发布

阅读量176

点赞数

分类专栏： AJAX—EXT2.0 文章标签： EXT HTML

AJAX—EXT2.0 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </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>
</head>

<body>

<br>
<script>

Ext.onReady(function(){
var data = [

['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];

var reader = new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
]);

var store = new Ext.data.GroupingStore({
reader: reader,
data: data,
groupField:'sex',
sortInfo: {field:'id',direction: "ASC"}

});

var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width:650,
//height: 150,
//loadMask: true,
//stripeRows:true,
store: store,
//cm: cm,
viewConfig:{
forceFit: true
},
//autoExpandColumn:'descn',
columns: [
{id:'id',header: "编号", sortable: true, dataIndex: 'id'},
// {header: "性别", sortable: true, dataIndex: 'sex'},
{header:'性别',dataIndex:'sex',width:80,renderer: function (value){
if ( value == 'male')
{
return "<span style='color:red;font-weight:bold;'>男</span><img src='drop-no.gif' />";
} else {
return "<span style='color:green;font-weight:bold;'>女</span><img src='drop-add.gif' />";
}

}},
{header: "名字", sortable: true, dataIndex: 'name'},
{header: "描述", sortable: true, dataIndex: 'descn'}

],
frame:true, //表格外加边框
collapsible: true,
animCollapse: false,
view: new Ext.grid.GroupingView()

});

});

</script>

<div id="grid" align="center">
</div>

</body>
</html>