具有多选功能的Extjs网格可检索所选列表的值

Question

假设我有一个带有多选项的网格,当用户选择4个列表并想要获取值(在屏幕上提醒)我该怎么做？我将如何禁用按钮,直到选择至少一个列表？

Answer 1

您提出的所有问题已经多次回答.在sencha.com上也有很好的ExtJS示例.例如,列表视图网格显示多个选择和可编辑网格,其中可写商店显示按钮启用单击.但最重要的是文档!让我解释下面代码的功能.其中大部分来自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);
    });
});

我不知道如何从头脑中做到这一点,但我使用了文档,结果有效;-).有关更多信息,请参阅网格面板文档.