博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ExtJs 分组表格控件----监听
阅读量:4640 次
发布时间:2019-06-09

本文共 2489 字,大约阅读时间需要 8 分钟。

ExtJs 分组表格控件----监听

201381

10:59

 

如图,点击expand可以展开所有的分组,collapse可以合并所有的列,toggletoggleone展开合并一个分组

   Ext.get('expand').on('click', function() {

        grid.getView().expandAllGroups();

    });

    Ext.get('collapse').on('click', function() {

        grid.getView().collapseAllGroups();

    });

    Ext.get('toggle').on('click', function() {

        grid.getView().toggleAllGroups();

    });

    Ext.get('one').on('click', function() {

        var view = grid.getView();

        var groupId = view.getGroupId('female');

        view.toggleGroup(groupId);

    });

实现分组的展开和合并,必须通过grid.getView()对象来调用具体的方法

expandAllGroups()展开所有项;

collapseAllGroups()合并所有项目;

toggleAllGroups()展开没有展开的分组;

toggleGroup()展开指定的分组;

方法获得view对象;得到分组的toggleAllGroups,

折叠/展开该分组

代码示例:

<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 meta = [

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

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

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

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

    ];

    var data = [

        ['1','male','name1','descn1'],

        ['2','female','name2','descn2'],

        ['3','male','name3','descn3'],

        ['4','female','name4','descn4'],

        ['5','male','name5','descn5']

    ];

    var grid = new Ext.grid.GridPanel({

        store: new Ext.data.GroupingStore({

            reader: new Ext.data.ArrayReader({}, meta),

            data: data,

            groupField: 'sex',

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

        }),

        columns: meta,

        view: new Ext.grid.GroupingView(),

        renderTo: 'grid',

        autoHeight: true

    });

    Ext.get('expand').on('click', function() {

        grid.getView().expandAllGroups();

    });

    Ext.get('collapse').on('click', function() {

        grid.getView().collapseAllGroups();

    });

    Ext.get('toggle').on('click', function() {

        grid.getView().toggleAllGroups();

    });

    Ext.get('one').on('click', function() {

        var view = grid.getView();

        var groupId = view.getGroupId('female');

        view.toggleGroup(groupId);

    });

});

        </script>

    </head>

    <body>

        <script type="text/javascript" src="../shared/examples.js"></script>

        <button id="expand">expand</button>

        <button id="collapse">collapse</button>

        <button id="toggle">toggle</button>

        <button id="one">toggle one</button>

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

    </body>

</html>

 

 

 

已使用 Microsoft OneNote 2013 创建。

转载于:https://www.cnblogs.com/babyhhcsy/p/3229864.html

你可能感兴趣的文章
Top K
查看>>
C语言配置文件库iniparser
查看>>
sql STUFF用法
查看>>
1-1 用Python爬取豆瓣及IMDB上的电影信息
查看>>
关于解决session过期跳转到登陆页面并跳出iframe框架
查看>>
老黄历:编码式的统治策略
查看>>
HTML5 标准规范完成了
查看>>
使用Jenkins进行Android自动打包,自定义版本号等信息【转】
查看>>
[NOIP 2016普及组 No.1] 买铅笔
查看>>
单例模式(Singleton Pattern)
查看>>
由数字与字母组成的验证码的实现
查看>>
ResultSet自动关闭问题
查看>>
mvc 部分视图
查看>>
BZOJ3261: 最大异或和
查看>>
全端开发必备!10个最好的 Node.js MVC 框架
查看>>
Fabric远程自动化使用说明
查看>>
linux php命令安装
查看>>
热身赛应该做什么?
查看>>
动手实现读写锁
查看>>
HNOI2010 合唱队
查看>>