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文档。