Sencha ext.js, 즉석에서 양식 만들기

Question

나는 extjs about adding a form on click의 자습서를 따르려고합니다.

이제 "비틀기"는 좀 더 구조화 된 접근 방식을 직접 만들고 싶습니다. 그래서 나는 그리드와 폼을 생성하기 위해 Ext.define을 사용하고있다.

그리드 :

Ext.define('MyApp.view.main.EmployeeGrid', { 
    extend: 'Ext.grid.Grid', 
    xtype: 'employee-grid', 

    title: 'Employee Directory', 
    iconCls: 'x-fa fa-users', 
    listeners: { 
     itemtap: function() { 
      console.log("test"); 
      Ext.create("MyApp.view.main.FormPanel", {}); 
     } 
    }, 
    store: { 
     data: [{ 
      "firstName": "Jean", 
      "lastName": "Grey", 
      "phoneNumber": "(372) 792-6728" 
     }] 
    }, 

    columns: [{ 
     text: 'First Name', 
     dataIndex: 'firstName', 
     flex: 1 
    }, { 
     text: 'Last Name', 
     dataIndex: 'lastName', 
     flex: 1 
    }, { 
     text: 'Phone Number', 
     dataIndex: 'phoneNumber', 
     flex: 1 
    }] 
}); 

형태 :

Ext.define("MyApp.view.main.FormPanel", { 
    extend: "Ext.form.Panel", 
    xtype: 'form-panel', 
    title: 'Update Record', 
    floating: true, 
    centered: true, 
    width: 300, 
    modal: true, 
    items: [{ 
     xtype: 'textfield', 
     name: 'firstname', 
     label: 'First Name' 
    }, { 
     xtype: 'toolbar', 
     docked: 'bottom', 
     items: ['->', { 
      xtype: 'button', 
      text: 'Submit', 
      iconCls: 'x-fa fa-check', 
      handler: function() { 
       this.up('formpanel').destroy(); 
      } 
     }, { 
      xtype: 'button', 
      text: 'Cancel', 
      iconCls: 'x-fa fa-close', 
      handler: function() { 
       this.up('formpanel').destroy(); 
      } 
     }] 
    }] 
}); 

문제가있는 코드가 MyApp.view.main.EmployeeGrid 클래스의 listeners: ...을 받고있다. 콘솔에 항목이 기록되므로 함수가 실행되었음을 알 수 있습니다. 그러나 양식이 표시되지 않습니다. - 올바른 접근 방법은 무엇입니까?

Answer 1

예, 새로 만든 양식이 기본적으로 표시되지 않으므로 양식은 표시되지 않습니다.

두 솔루션 :

이

양식에 추가 할 수
• 이 autoShow: true 또는
• 당신은 생성 된 양식의 show 기능을 실행 추가 할 수 있습니다 그러나 Ext.create(...).show()

, 내가하는 것이 좋습니다 것입니다 양식을 다시 사용하여 새로운 인스턴스를 한 번만 인스턴스화하고 그리드에 저장 한 후 이후 호출에 다시 사용하십시오.

itemtap: function(view, index, target, record) { 
    if(!this.myForm) this.myForm = Ext.create("Ext.form.Panel", {}); 
    this.myForm.loadRecord(record); 
    this.myForm.show(); 
} 

이 기능을 사용하려면 양식에 closeAction: 'hide'을 설정해야 할 수 있습니다.

ExtJS 6의 일부 버전에서 IE가 구성 요소 인스턴스화시 메모리 누수 현상을 보인 것처럼 보였으므로 가능한 한 새로운 구성 요소를 거의 만들지 않아야합니다.