選択したリストの値を取得するExtjsグリッド

Question

複数選択オプションを使用するグリッドがあり、ユーザーが4つのリストを選択して値を取得したいとしたら、どうすればよいですか？少なくとも1つのリストが選択されるまで、どのようにボタンを無効にするのですか？

Answer 1

あなたが質問したすべての質問は、何回も回答されています。また、sencha.comにはgood ExtJS examplesがあります。たとえば、list view gridには複数の選択が表示され、editable grid with writable storeにはクリック時のボタン有効が示されます。しかし、大部分はdocumentationです！次のコードの機能を説明しましょう。そのほとんどはlist viewの例です。

このグリッドは構造

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

、グリッド、次のいlist.phpからJSONを取得します。

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ドキュメントを参照してください。