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

Question

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

Answer 1

您提出的所有问题都已经回答了很多次。 sencha.com 上还有good ExtJS examples。例如list view grid 显示多选，editable grid with writable store 显示单击时启用按钮。但是最重要的是documentation！让我解释以下代码的功能。大部分来自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);
    });
});

我不知道如何做到这一点，但我使用了文档并且结果有效;-)。有关详细信息，请参阅 Grid panel 文档。