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

はい、あなたが言ったように、新しく作成されたフォームはデフォルトでは表示されないため、フォームは表示されません。

2種類の溶液：

• あなたはあなたが作成したフォームにshow機能を実行する追加することができますフォームautoShow: true OR
• に追加することができます。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がコンポーネントのインスタンス化でメモリリークを示したように見えるので、できるだけ新しいコンポーネントを作成しないようにしてください。