ExtJs 分组表格控件

ExtJs 分组表格控件

2013年8月1日

10:33

 

在定义分组表格控件时，定义的方式和grid没有什么区别，重要的是在定义store的定义的是groupingStore。参数含义

reader：读取数据的方式。

data：数据来源；

groupField：分组的依据是什么

sortInfo：排序依据需要传递排序的字段和排序的方式

   var store = new Ext.data.GroupingStore({

        reader: reader,

        data: data,

        groupField: 'sex',

        sortInfo: {field: 'id', direction: "ASC"}

    });

定义grid的使用也定义GridPanel，与定义普通grid不同的是需要定义一个view，通过该view来定义一个GroupingView

    var grid = new Ext.grid.GridPanel({

        autoHeight: true,

        store: store,

        columns: columns,

        view: new Ext.grid.GroupingView(),

        renderTo: 'grid'

    });

完整代码示例：

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gbk">

        <title>03.grid</title>

          <link rel="stylesheet" type="text/css" href="../ext3.2/resources/css/ext-all.css" />

        <script type="text/javascript" src="../ext3.2/adapter/ext/ext-base.js"></script>

        <script type="text/javascript" src="../ext3.2/ext-all.js"></script>

        <script type="text/javascript">

Ext.onReady(function(){

    Ext.QuickTips.init();

    var columns = [

        {header:'编号',dataIndex:'id'},

        {header:'性别',dataIndex:'sex'},

        {header:'名称',dataIndex:'name'},

        {header:'描述',dataIndex:'descn'}

    ];

    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({

        autoHeight: true,

        store: store,

        columns: columns,

        view: new Ext.grid.GroupingView(),

        renderTo: 'grid'

    });

});

        </script>

    </head>

    <body>

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

    </body>

</html>

 

 

 

已使用 Microsoft OneNote 2013 创建。





posted @ 2013-08-01 14:57  thero  阅读(572)  评论(0)    收藏  举报