Question

请找到我正在使用的选项的jsfiddle：http://jsfiddle.net/7bj4n/2/ 代码示例：

   Ext.define('App.MyStore', {
    extend: 'Ext.data.Store',
    fields: ['name', 'email', 'phone'],
    data: [
        { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"},
        { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"},
        { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"},
        { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"},
        { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"},
        { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"}
    ]
});
Ext.define('App.MyGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mygrid',
    title: 'Simpsons',
    width: 500,
    initComponent: function () {
        this.store = Ext.create('App.MyStore');
        this.selModel = Ext.create("Ext.selection.CheckboxModel", { 
            allowDeselect: true,
            //checkOnly : true,
            mode:'MULTI',
            listeners: {
                beforeselect: function(selModel, record, index){
                    //return false;
                    console.log('sm::beforeselect');   
                   // console.log(selModel);   

                },
                select: function(){
                    console.log('sm::select');                    
                }
            }
        });
        this.callParent(arguments);
    },
    columns: [
        { header: 'Name', dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ]
});

Ext.onReady(function () {
    Ext.widget('mygrid', {
        title: 'First Panel',
        renderTo: Ext.getBody(),
        listeners: {
            itemclick: function(){
                console.log('itemclick');
            }
        }    
    });
});

问题陈述与示例：

用户正在查看5000行的网格视图，并且让他们想要随机选择多行...让我们说21-30，然后501-700和1201-1350等< / p>

目前他们可以通过单击网格行进行shift + select来实现这一点，但如果他们碰巧点击网格行/正文中的任何位置，或者甚至右键单击他们的整个选择将被取消选择，并且只有他们碰巧点击的行/右键单击被选中，这真的很烦人，他们必须再次重复相同的选择过程...显然不是一个好的用户体验。

总之，我希望在他们想要的任何行上使用shift + select来保留多行选择，但是仅在复选框上使其起作用并禁用该网格行/正文单击或右键单击。

P.S：＆＃34; checkonly＆＃34;选项适用于复选框，但它禁用多项选择（shift + select）

有什么建议吗？

ExtJS Gridview仅在复选框上选择多个记录

0 个答案: