2016-12-18 26 views
0

フォーム上にグリッドを作成し、レコードを動的に表示しています。ファイルフィールドを使用してコメントフィールドを編集するにはセルエディタを使用し、ファイルフィールドを使用するには添付ファイルの列にフルパスを表示します。 私が使用していたコードを参照してください:グリッドレコードをロードした後ExtJSのグリッドセルにファイルフィールドを表示する方法

    { 
         xtype: 'container', 
         flex: 1, 
         layout: { 
          type: 'fit' 
         }, 
         items: [ 
          { 
           xtype: 'grid', 
           itemId: 'myAttachGrid', 
           reference: 'myAttachGrid ', 
           store: Ext.create('JSSample.store.attach.MyAttachGrid'), 
           multiSelect: true, 
           autoScroll: true, 
           columnWidth: 1, 
           editable: true, 
           columnLines: true, 
           plugins: [ 
            Ext.create('Ext.grid.plugin.CellEditing', { 
             clicksToMoveEditor: 1, 
             autoCancel: false 
            }) 
           ], 
           columns: [ 
            { 
             header: 'File', dataIndex: 'Attachments', width: '40%' 
            },           
            { 
             header: '', 
             dataIndex: '', 
             width: '10%', 
             hideable: true, 
             editor: { 
              xtype: 'filefield', 
              labelWidth: 50, 
              msgTarget: 'side', 
              buttonOnly: true, 
              anchor: '100%',             
              buttonText: '...', 
              listeners: { 
               change: function (fld, value) { 
                alert(value.replace(/C:\\fakepath\\/g, '')); 
               } 
              } 
             } 
            },          

            { 
             header: 'Comments', dataIndex: 'Comments', width: '50%', editor: 'textfield' 
            } 
           ] 
          } 
         ] 
        } 

を次のように動的に表示されています

enter image description here

さて、私の問題は、FileFieldには、我々は上をダブルクリックするとき後に表示されています細胞。 [下のスクリーンショットである]:

enter image description here

だから、私は、[セルをダブルクリックせずに可視にレコードでFileFieldにしたいです。

+1

使用するExtJSのバージョンを指定してください。 ExtJS 6には、[widgetcolumn](http://docs.sencha.com/extjs/6.0.1/classic/Ext.grid.column.Widget.html)が用意されています。これはあなたが望むことを行うはずです。 – Alexander

+0

私は使用しています - Ext JS 6.0.2.437 –

答えて

0

コメントに記載された@alexanderとして、ExtJS 6では、Ext.grid.column.Widgetを使用してグリッドにファイルフィールドを追加できます。

たとえば、this fiddleをチェックします。

+0

助けてくれてありがとう。しかし、次のエラーを受け取ってstore.removeAll()を使用してグリッドをクリアすると、新しいエラーが発生します。Uncaught TypeError:focusEl.isTabbableは関数ではありません –

関連する問題