Ext js編集可能なグリッド

Question

グリッドを作った。 ext js 4を使用してモーダルウィンドウで選択した行をどのように編集できますか？

Ext.create('Ext.grid.Panel', { 
    title: 'Users', 
    height: 200, 
    width: 400, 
    store: store, 
    columns: [{ 
     header: 'Name', 
     dataIndex: 'name' 
    }, { 
     header: 'Surname', 
     dataIndex: 'surname' 
    }, { 
     header: 'Date of birth', 
     dataIndex: 'date', 
     xtype:'datecolumn', 
     format: 'd/m/Y', 
     flex:1 
    }], 
    renderTo: Ext.getBody() 
}); 

Answer 1

@k_bこれがあなたを助けている場合、あなたがロジックを理解するために一つだけの最初のステップである チェック：これは私のコードです。

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'name', type: 'string'}, 
     {name: 'surname', type: 'string'}, 
     {name: 'date', type: 'date'} 
    ] 
}); 

var data = { 
    users: [ 
     { 
      name: 'Ed Spencer', 
      surname : 'Jobs' 
     }, 
     { 
      name: 'Ed Spencer2', 
      surname : 'Jobs2' 
     } 
    ] 
}; 

var store = Ext.create('Ext.data.Store', { 
    autoLoad: true, 
    model: 'User', 
    data : data, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'users' 
     } 
    } 
}); 


Ext.create('Ext.grid.Panel', { 
    title: 'Users', 
    height: 200, 
    width: 400, 
    store: store, 
    columns: [{ 
     header: 'Name', 
     dataIndex: 'name' 
    }, { 
     header: 'Surname', 
     dataIndex: 'surname' 
    }, { 
     header: 'Date of birth', 
     dataIndex: 'date', 
     xtype:'datecolumn', 
     format: 'd/m/Y', 
     flex:1 
    }], 
    listeners: 
    { 
     scope: this, 
     selectionchange: function(model, records){ 
      var rec = records[0]; 
      if (rec) { 


       var editform = Ext.create('Ext.form.Panel', { 
        width: 390, 
        bodyPadding: 10, 
        renderTo: Ext.getBody(), 
        items: [{ 
         xtype: 'textfield', 
         name: 'name', 
         fieldLabel: 'Name' 
        }, 
        { 
         xtype: 'textfield', 
         name: 'surname', 
         fieldLabel: 'Surname' 
        } 
        ], 
       buttons: [{ 
       text: 'Save', 
       handler: function() { 
       var form = this.up('form'); 
       form.updateRecord(); 
       var record = form.getForm().getRecord(); 

        Ext.Msg.alert('Record',record.get('name')); 
        record.save(); 
       }}] 
       }); 

       Ext.create('Ext.window.Window', { 
        title: 'Edit', 
        height: 200, 
        width: 400, 
        layout: 'fit', 
        items: [ 
        editform] 
        }).show(); 

       editform.getForm().loadRecord(rec); 
      }   
     } 
    }, 
    renderTo: Ext.getBody() 
}); 

https://jsfiddle.net/ep24cc30/4/