Afterrender는 EXTJS의 눈금에서 사용될 때 콤보 박스에서 작동하지 않습니다.

Question

이것은 그리드 내부의 콤보 상자 용 코드입니다.

{ 
    header: 'FSCS', 
    dataIndex: 'acntOvrrideTypeCd', 
    flex: 1, 
    renderer: function(val, metaData, record, rowIndex, colIndex) { 
     var id = Ext.id(); 
     var store = new Ext.data.Store({ 
      fields: ['code', 'description'], 
      data: [{ 
       "code": "", 
       "description": "" 
      }, { 
       "code": "E", 
       "description": "E" 
      }, { 
       "code": "D", 
       "description": "D" 
      }, { 
       "code": "S", 
       "description": "S" 
      }] 
     }); 

     Ext.Function.defer(
      (function() { 
       var cb = Ext.create('Ext.form.ComboBox', { 
        id: 'acntOvrrideTypeCd-' + rowIndex, 
        queryMode: 'local', 
        renderTo: id, 
        store: store, 
        forceSelection: true, 
        triggerAction: 'all', 
        lazyRender: true, 
        size: 5, 
        valueField: 'code', 
        displayField: 'description', 
        value: val 
        //listeners:{ 
        // scope: this, 
        // 'select': Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex) 
        //} 

       }); 
       cb.on(afterrender, function() { 
        console.log("------- box---" + rowIndex); 
        Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex); 
       }); 
      }), 0.25); 

     console.log("i----------" + id); 
     return (Ext.String.format('<div id="{0}"></div>', id)); 
    } 
} 

'afterrender'이벤트가 실행되지 않습니다. 구성 요소를 렌더링 한 후에 활성화 또는 비활성화해야합니다.

누구든지 도움을 줄 수 있습니다.

Answer 1

그냥 오타 일 뿐이며, afterrender는 따옴표로 묶어야합니다. 그렇지 않으면 정의되지 않은 이벤트에 대한 함수를 추가하기 만하면됩니다.

cb.on('afterrender',function(){ 
    console.log("------- box---" + rowIndex); 
    Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex); 
}); 

Answer 2

코드에 몇 가지 문제가 있습니다. 당신은 그리드의 렌더링 기능의 콤보를 만들려고하는 것처럼

1. 그것은 (상단의 코드는 코드 블록에 포함되지 않은) 보인다. 대신 Ext.grid.plugin.CellEditing 플러그인을 사용하는 것이 나을 것입니다. 그러면 열이 렌더링 될 때가 아니라 주문형 필드가 생성됩니다. 그리드보기가 새로 고침 될 때마다 그리드의 모든 행에 대해 다른 상점과 콤보 박스를 생성하게됩니다. 실적이 좋지 않거나 사용자 환경에 좋지 않습니다.

2. 지연을 호출 할 때 지속 시간은 초가 아니라 밀리 초입니다. 또한 괄호 안에 함수를 래핑 할 필요가 없습니다. 그냥 함수 자체를 제공하십시오. 이처럼 : 당신의 성분 (a 탭 패널 등) 즉시 모든 구성 요소를 렌더링하지 않습니다 일부 컨테이너의 아이 인 경우는

   Ext.defer(function(){ 
       // do stuff 
   }, 25); 
   

3. true로 lazyRender 설정에만 작동합니다.

4. 생성시 사용 가능한 정보가없는 경우가 아니라면 렌더링 할 때 생성 할 때 콤보 상자에서 비활성화 된 구성을 설정하는 것이 더 쉽습니다.

5. nscrob와 마찬가지로 on 메서드를 사용할 때 이벤트를 문자열로 지정해야합니다. 당신이 청취자의 설정을 (당신이 주석이있는)를 사용하는 경우, 당신은 다만 할 수 있습니다

   listeners: { 
       afterrender: function(){ 
        console.log("------- box---" + rowIndex); 
        Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex); 
       }, 
       select: function(){ 
        Ext.getCmp('amlFscsForm').controller.amlShow(rowIndex); 
       } 
   } 
   

   그것은 구성 요소 자체 (당신의 콤보 상자)에이 리스너 함수의 디폴트의 범위가 너무 scope: this가 불필요 점에 유의하는 것이 중요합니다 . 이 콤보 박스를 만드는 객체가 무엇이든간에 범위를 원한다면 그렇지 않습니다.

첫 번째 요점이 가장 중요합니다. CellEditing (또는 RowEditing) 플러그인을 사용해 보면 훨씬 더 원활하게 진행될 것임을 보증합니다.