GroupingStore分组表格

todayapple

浏览: 40796 次
性别:
来自: 北京

最近访客更多访客>>

springstudent

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX—EXT2.0

EXT HTML

<!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>

分享到：

java面试题 | extjs-grid:自定义编辑器，以时间列为例

2008-07-25 16:01
浏览 2320
评论(0)
论坛回复 / 浏览 (0 / 3584)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论