Extjs의 그리드 행에 버튼을 추가하는 방법은 무엇입니까?

현재 XML 파일을 사용하여 그리드의 데이터를 채우고 있습니다. 내 XML 파일이Extjs의 그리드 행에 버튼을 추가하는 방법은 무엇입니까?

<property> 
    <category>Email</category> 
    <name>To-address</name> 
    <value>[email protected]</value> 
</property> 

<property> 
    <category>Email</category> 
    <name>From-address</name> 
    <value>[email protected]</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); 
    }

을 숨어있다. 그러나 그것은 연속적으로 나타나지 않고있다. 그리드 행에 단추를 추가하기 위해 여기서 누락 된 것은 무엇입니까?

출처

2017-11-27 Amit Nekar

'form' 문제에 대한'grid' 접근 방식으로 돌이가는 길을 걷고 있습니다. 내가 너라면 XML을 4 개가 아닌 하나의 레코드로 만들고 필드가있는 formpanel을 사용한다. 이제는 조금 더 쉬울 것이고 장기적으로는 훨씬 쉬울 것입니다. – Alexander

@Alexander 예, 동의합니다. 내가 이미 그걸 가지고 시작 했으니 까, 여기서 내가 누락 된 것을 알고 싶었다. 어쨌든 제안 주셔서 감사합니다 :) –

편집자가 열 정의, 귀하의 경우, 열 유형 gridcolumn (기본 열 타입)이며 암시 적 편집기 구성 요소를 반환해야합니다

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

컬럼의 기능 getEditor()을 통해 정의 필드는 Ext.form.field.Base에서 파생됩니다.

그러나 때때로 getEditor에서 열 구성 요소를 반환하는 : 그것은 잘못된 구성 요소 유형이기 때문에이 작동하지 않을 수

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

. 또한 열의 유형이 고정되어 있고 렌더러를 수동으로 대체하는 경우를 제외하고 열의 단일 셀을 다른 열 유형처럼 동작 할 수 없습니다. 나는 이것에 대한 빠른 수정을 보지 못했다. 트리거 버튼이있는 텍스트 필드가있는 편집기를 반환 할 수 있습니다.

그러나 데이터에 form을 사용하는 것이 좋습니다. 훨씬 적합합니다. 이 양식으로 원하는 곳에 버튼을 배치 할 수 있습니다.

출처

2017-11-27 15:14:50 Alexander

안녕하세요, 네, 그게있어; 내가 구현 한 다른 접근법은 위젯 버튼으로 렌더러를 오버라이드하는 것입니다. 버튼을 실제로 표시하는 것은 놀랍게도 내 모든 그리드 값 열 데이터를 숨기는 것입니다. 실수가 무엇인지 모릅니다. –

@AmitNekar 코드를 보지 않고 무엇을 잘못하고 있는지 말할 수 없습니다. – Alexander

if (record.get ('name') === 'Content') { var id = Ext.id(); Ext.defer (함수() { Ext.widget ('버튼', { renderTo : 아이디, 텍스트 : '편집', WDTH : 100, 핸들러 : 기능 (기록) {경고 ("Hello world");} });}, 50); return Ext.String.format ('

', id); 이것은 내가 시도한 것입니다.처리기가 잘 작동하는 버튼을 추가 할 수 있지만 다른 모눈 값 열 데이터가 숨겨져 있습니다. –

Extjs의 그리드 행에 버튼을 추가하는 방법은 무엇입니까?

답변

관련 문제