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);
    });
});

我不知道該怎么做，但是我使用了文檔並且結果有效；-)。 有關更多信息，請參閱網格面板文檔。