ExJs教程----列表中选择多条记录和单条记录，选择性禁止用户选择复选框

最新推荐文章于 2023-03-08 14:41:55 发布

呼噜噜哟

最新推荐文章于 2023-03-08 14:41:55 发布

阅读量928

点赞数

分类专栏：【002】ExtJS基础

本文链接：https://blog.csdn.net/u011176794/article/details/52668521

版权

【002】ExtJS基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.选择单条记录

Ext.define('ExtJS5Example.view.selectStudentInfo', {
    extend: 'Ext.window.Window',
    alias: 'widget.selectStudentInfo',
    requires: ['Ext.form.Panel'],
    title: '选择学生信息',
    width: 530,
    modal: true,
    autoHeight: true,
    bodyPadding: 0,
    border: false,
    itemId: 'selectStudentInfo',
    items: [{
        xtype: 'gridpanel',
        width: 530,
        store: 'ExtJS5Example.StudentInfoStore',
        selModel: { mode: "SINGLE" },//模式是单个，表明只能选择一条数据，
        selType: 'checkboxmodel',//必须要写，声明该列是复选框
        columns: [{
            hidden: true,
            dataIndex: 'StudentID'
        }, {
            text: '学生姓名',
            width: 180,
            dataIndex: 'StuName'
        }, {
            text: '学生年龄',
            width: 120,
            dataIndex: 'StuAge'
        },  {
            text: '学生性别',
            width: 60,
            dataIndex: 'StuSex'
        }]
    }],
    buttons: [{
        margin: '5 10 5 400',
        text: '选择',
        itemId: 'btnSelect',
        listeners: {
            'click': function () {
                var selModel = this.up().up().down("grid").getSelectionModel().getSelection()[0];//选择第一条数据(其实也就只能选择一条)
                if (selModel.data != null) {//判断选择的数据是否为空
                   //TODO
                }
            }
        }
    }, {
        text: '关闭',
        margin: '5 0 5 0',
        listeners: {
            'click': function () {
                Ext.ComponentQuery.query("#selectStudentInfo")[0].close();
            }
        }
    }],
    closable: false
});

2.选择多条记录

Ext.define('ExtJS5Example.view.selectStudentInfo', {
    extend: 'Ext.window.Window',
    alias: 'widget.selectStudentInfo',
    requires: ['Ext.form.Panel'],
    title: '选择学生信息',
    width: 530,
    modal: true,
    autoHeight: true,
    bodyPadding: 0,
    border: false,
    itemId: 'selectStudentInfo',
    items: [{
        xtype: 'gridpanel',
        width: 530,
        store: 'ExtJS5Example.StudentInfoStore',
        selType: 'checkboxmodel',//必须要写，声明该列是复选框
        columns: [{
            hidden: true,
            dataIndex: 'StudentID'
        }, {
            text: '学生姓名',
            width: 180,
            dataIndex: 'StuName'
        }, {
            text: '学生年龄',
            width: 120,
            dataIndex: 'StuAge'
        },  {
            text: '学生性别',
            width: 60,
            dataIndex: 'StuSex'
        }]
    }],
    buttons: [{
        margin: '5 10 5 400',
        text: '选择',
        itemId: 'btnSelect',
        listeners: {
            'click': function () {
                var selModel = this.up().up().down("grid").getSelectionModel().getSelection();//将用户选择的所有记录全都抓取出来
                if (selModel.getCount() > 0) {
                   //TODO
                }
            }
        }
    }, {
        text: '关闭',
        margin: '5 0 5 0',
        listeners: {
            'click': function () {
                Ext.ComponentQuery.query("#selectStudentInfo")[0].close();
            }
        }
    }],
    closable: false
});

3.选择性禁止用户选择复选框

有些时候我们需要根据列表中某列的值来判断用户可不可以选择前面的复选框，可以使用以下代码来实现

Ext.define('ExtJS5Example.view.selectStudentInfo', {
    extend: 'Ext.window.Window',
    alias: 'widget.selectStudentInfo',
    requires: ['Ext.form.Panel'],
    title: '选择学生信息',
    width: 530,
    modal: true,
    autoHeight: true,
    bodyPadding: 0,
    border: false,
    itemId: 'selectStudentInfo',    
    items: [{
        xtype: 'gridpanel',
        width: 530,
        store: 'ExtJS5Example.StudentInfoStore',
        selModel: { mode: "SINGLE" },//模式是单个，表明只能选择一条数据，
        selType: 'checkboxmodel',//必须要写，声明该列是复选框
	listeners: {
        beforeselect: function (e, record, index, eOpts) {
            var store1 = this.store;
            if (store1.getAt(index).data.StuAge != "9") {
                return false;
              }
          }
        },       
	 columns: [{
            hidden: true,
            dataIndex: 'StudentID'
         }, {
            text: '学生姓名',
            width: 180,
            dataIndex: 'StuName'
         }, {
            text: '学生年龄',
            width: 120,
            dataIndex: 'StuAge'
         },  {
            text: '学生性别',
            width: 60,
            dataIndex: 'StuSex'
         }]
    }],
    buttons: [{
        margin: '5 10 5 400',
        text: '选择',
        itemId: 'btnSelect',
        listeners: {
            'click': function () {
                var selModel = this.up().up().down("grid").getSelectionModel().getSelection()[0];//选择第一条数据(其实也就只能选择一条)
                if (selModel.data != null) {//判断选择的数据是否为空
                   //TODO
                }
            }
        }
    }, {
        text: '关闭',
        margin: '5 0 5 0',
        listeners: {
            'click': function () {
                Ext.ComponentQuery.query("#selectStudentInfo")[0].close();
            }
        }
    }],
    closable: false
});