Extjsグリッド内のComboBox

Question

私はいくつかのデータ（ユーザーリスト）を持つグリッドを持っています。各行には、更新、削除、アクティブ化、サスペンドなどの多くのアクションがあります。

400〜500ピクセルを超えるボタンをたくさん配置するのではなく、各フィールドにアクションを適用してコンボボックスを配置したいと考えています。

問題は、ちょうどそのような列の行にコンボボックスをレンダリングできないか、何か不足しているということですか？誰かがこれでいくつかの光を当てることができますか？

new Ext.grid.GridPanel({ 
     region: 'center', 
     id: 'usersGrid', 
     store: store, 
     stripeRows: true, 
     autoExpandColumn: 'username', 
     columns: [ 
     { 
       // username 
     }, 
     { 
       // email 
     }, 
     { 
       // last seen 
     }, 
     { 
      // actions combo, it won't show 
       header : '', 
       width : 220, 
       fixed : true, 
       hideable : false, 
       dataIndex: 'actions', 
       renderer: new Ext.form.ComboBox({ 
         store: new Ext.data.SimpleStore({ 
          id: 0, 
           fields: ['abbr', 'action'], 
           data : [ 
           ['suspend', 'Suspend'], 
           ['activate', 'Activate'], 
           ['update', 'Update'], 
           ['delete', 'Delete'] 
           ] 
         }), 
         displayField:'action', 
         valueField: 'abbr', 
         mode: 'local', 
         typeAhead: false, 
         triggerAction: 'all', 
         lazyRender: true, 
         emptyText: 'Select action' 
       }) 
     } 
     ] 
}) 

Answer 1

これはほとんど正しいです。カスタムエディタを追加する方法にはいくつかの調整が必要な場合があります。この変更を試しましたか？

editor: new Ext.form.ComboBox({ 
        store: new Ext.data.SimpleStore({ 
         id: 0, 

残念ながら、あなたのコードが何をしているのか判断できず、動作していません。

使用しているExtJSのバージョンは何ですか？注目すべき点の1つは、現在のExtJS APIドキュメントにExt.data.SimpleStoreというオブジェクトが表示されないことです。別の種類のデータストアを代わりに使用しようとしましたか？このコンボに異なるタイプのストアを使用することをお勧めしますか？

Answer 2

1. 変換グリッド編集可能なグリッドへ
2. ではなく、「レンダラ」の欄に、エディタの設定を追加します。変更されたコードの下を検索します。

new Ext.grid.EditorGridPanel({ 
    region: 'center', 
    id: 'usersGrid', 
    store: store, 
    stripeRows: true, 
    autoExpandColumn: 'username', 
    columns: [ 
    { 
      // username 
    }, 
    { 
      // email 
    }, 
    { 
      // last seen 
    }, 
    { 
     // actions combo, it won't show 
      header : '', 
      width : 220, 
      fixed : true, 
      hideable : false, 
      dataIndex: 'actions', 
      editor : {xtype:'combo', 
         store: new Ext.data.ArrayStore({ 
           fields: ['abbr', 'action'], 
           data : [           
             ['suspend', 'Suspend'], 
             ['activate', 'Activate'], 
             ['update', 'Update'], 
             ['delete', 'Delete'] 
             ] 
           }), 
           displayField:'action', 
           valueField: 'abbr', 
           mode: 'local', 
           typeAhead: false, 
           triggerAction: 'all', 
           lazyRender: true, 
           emptyText: 'Select action' 
         } 
    }] 

}）

Answer 3

どのように行ごとに、右クリックしてコンテキストメニューは？私たちは、エディタのグリッドを使用することを決定したとき

Answer 4

このメソッドに設定列レンダラー....

https://github.com/mrlayeghi/ComboRenderer