Extjs 网格具有多选功能以检索选定列表的值

Question

假设我有一个带有多选选项的网格，当用户选择 4 个列表并想要获取值（在屏幕上发出警报）时，我该怎么做？ 在至少选择一个列表之前，我将如何禁用按钮？

Answer 1

您提出的所有问题都已经回答了很多次。 sencha.com 上也有很好的 ExtJS 示例。 例如，列表视图网格显示多个 select 和可写存储的可编辑网格在单击时显示按钮启用。 但最重要的是文档。 让我解释以下代码的功能。 其中大部分来自list view示例。

该网格从list.php中获取 JSON 具有以下结构

{"authors":[{"surname":"Autho1"},{"surname":"Autho2"}]}

和网格：

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.panel.*'
]);
Ext.onReady(function(){
    // Here i've definned simple model with just one field
    Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: ['surname']
    });
    var store = Ext.create('Ext.data.JsonStore', {
        model: 'ImageModel',
        proxy: {
            type: 'ajax',
            url: 'list.php',
            reader: {
                type: 'json',
                root: 'authors'
            }
        }
    });
    store.load();

    var listView = Ext.create('Ext.grid.Panel', {
        id: 'myPanel', // Notice unique ID of panel
        width:425,
        height:250,
        collapsible:true,
        renderTo: Ext.getBody(),

        store: store,
        multiSelect: true,
        viewConfig: {
            emptyText: 'No authors to display'
        },

        columns: [{
            text: 'File',
            flex: 50,
            // dataIndex means which field from model to load in column
            dataIndex: 'surname' 
        }],
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            // This button will log to console authors surname who are selected
            // (show via firebug or in chrome js console for example)
            text: 'Show selected',
            handler: function() {
                // Notice that i'm using getCmp(unique Id of my panel) 
                // to get panel regerence. I could also use 
                // this.up('toolbar').up('myPanel')
                // see documentation for up() meaning
                var selection = Ext.getCmp('myPanel').getSelectionModel().getSelection();
                for (var i=0; i < selection.length; i++) {
                    console.log(selection[i].data.surname);
                }
            }
        },{
            text: 'Disabled btn',
            id: 'myHiddenBtn', // Notice unique ID of my button
            disabled: true // disabled by default
        }]
    }]
    });

    // Here i'm waiting for event which is fired
    // by grid panel automatically when you click on 
    // any item of grid panel. Then I lookup
    // my button via unique ID and set 'disabled' property to false
    listView.on('itemclick', function(view, nodes){
        Ext.getCmp('myHiddenBtn').setDisabled(false);
    });
});

我不知道该怎么做，但是我使用了文档并且结果有效；-)。 有关更多信息，请参阅网格面板文档。