Extjsのグリッド行にボタンを追加するには？

Question

現在、XMLファイルを使用してグリッドのデータを入力しています。私のXMLファイルには、この

<property> 
    <category>Email</category> 
    <name>To-address</name> 
    <value>abc@xyz.com</value> 
</property> 

<property> 
    <category>Email</category> 
    <name>From-address</name> 
    <value>abc@xyz.com</value> 
</property> 
<property> 
    <category>Email</category> 
    <name>Email-body</name> 
    <value>My Body</value> 
</property> 
<property> 
    <category>Email</category> 
    <name>Password</name> 
    <value>1234</value> 
</property> 

のようなものであると私はこのように私のグリッドを移入しています：

{ 
     xtype: 'grid', 
     columns: [ 
     { 
     text: 'Name', 
     width: 100, 
     dataIndex: 'name' 
     }, 
     { 
     text: 'Value', 
     dataIndex: 'value', 
     flex: 1, 
     getEditor: function(record){ 
      if(record.get('name') === 'password'){ 
        return Ext.create('Ext.grid.CellEditor', { 
        field: Ext.create('Ext.form.field.Text', { 
        inputType: 'password' 
      } 
      ) 
      }) else if(record.get('name') === 'Content') { 
        return Ext.create('Ext.grid.column.Action', { 
        width:50, 
        items: [{ 
         iconCls: 'x-fa fa-cog', 
         tooltip: 'Edit', 
         handler: function(grid, rowIndex, colIndex) { 
             alert('Hello World'); 
            } 
           }] 
         }); 
      } 
      else{ 
        return Ext.create('Ext.grid.CellEditor', { 
        field: Ext.create('Ext.form.field.Text', { 
        } 
       ) 
      }) 
      }, 
      renderer: function(value, meta, rec){ 
       if(record.get('name') === 'password'){ value = '***';} 
       return value; 
      } 

     } 
     } 
     ], 
     selType: 'cellmodel', 
     plugins: { 
     ptype: 'cellediting', 
     } 
    } 

私がポップアップして行くことになる値としてのコンテンツの行にボタンを追加したいですクリック時にユーザーにメール本文を追加するウィンドウ。 これは私が試みたものです。ハンドラが正常に動作してボタンを追加することができますが、予備的なステップとして、私は、コンテンツを追加していたアクション列に警告ボックスをチェックしたいことは、他のグリッド値列データ

if(record.get('name') === 'Content'){ 
     var id = Ext.id(); 
     Ext.defer(function(){ 
      Ext.widget('button',{ 
       renderTo: id, 
       text: 'Edit', 
       width: 100, 
       handler:function(record) {alert("Hello world"); } 
       }); 
     }, 50); 
     return Ext.String.format('<div id="{0}"></div>', id); 
    } 

を隠しています。しかし、それは行に表示されていません。私はグリッド行にボタンを追加するためにここで欠けているものは何ですか？

text: 'Value', 
dataIndex: 'value', 
flex: 1, 

て

Answer 1

エディタが列に定義され、あなたのケースでは、列の型gridcolumn（デフォルトのカラム型）のものであり、暗黙的に定義された関数の列のgetEditor()は、エディタコンポーネントを返す必要がありますフィールドはExt.form.field.Baseから派生しています。

しかし、あなたは時々getEditorから列コンポーネントを返却する：それは間違っているコンポーネントの種類があるので、これは動作しないことができる

getEditor: function(record){ 
    ... 
    else if(record.get('name') === 'Content') { 
      return Ext.create('Ext.grid.column.Action', { 
      ... 

。また、列に固定された型があり、レンダラーを手動でオーバーライドする場合を除いて、列の1つのセルを別の列型のように動作させることはできません。私はこれのための迅速な修正が表示されません。おそらくトリガーボタンが付いたテキストフィールドを持つエディターを返すことができます。

ただし、データにはformを使用することをお勧めします。これははるかに適しています。このフォームでは、いつでもどこでもボタンを配置できます。