Extjs網格和表格

Question

我有一個非常簡單的extjs網格。 （Extjs 5.1.1） 我的問題：如果我想要一個簡單的表單，當我雙擊其中一個行。但我不知道如何。如果我修改其中一個字段而不是運行更新的背景。 （http://users/update）表單將JSON數據發送到後端。

我的代碼如下：（讀是OK）

var Users = { 
    init: function () { 
     itemdblclick: this.editDocument 
    }, 

    edit: function(grid, roWindex, e) { 
     var id = grid.getStore().getAt(rowIndex); 
     Users.openEditForm(id); 
    }, 

    openEditForm: function(id){ 
     // form open 
    } 
}; 

Users.init(); 

Ext.application({ 
    name : 'Users', 
    launch : function() { 
     Ext.widget({ 
      renderTo : Ext.getBody(), 
      xtype : 'grid', 
      title : 'Users', 
      height : 800, 
      store : { 
       fields : [ 'login_id', 
          'login_name', 
          'login_firstname', 
          'login_middlename', 
          'login_lastname', 
          'login_email', 
          'login_mobile', 
          'login_status' ], 
       autoLoad : true, 
        proxy: { 
         type: 'ajax', 
         api: { 
          read: 'http://users/select', 
          create: 'http://users/insert', 
          update: 'http://users/update', 
          destroy: 'http://users/delete' 
         }, 
         reader: { 
          type: 'json', 
          successProperty: 'success', 
          root: 'data', 
          messageProperty: 'message' 
         }, 
         writer: { 
          type: 'json', 
          writeAllFields: false, 
          root: 'data' 
         } 
        } 
      }, 
      columns: { 
       items: [ 
        { text: 'ID', dataIndex: 'login_id', editor: 'textfield', width: 200 }, 
        { text: 'Login Name', dataIndex: 'login_name', editor: 'textfield', width: 200 }, 
        { text: 'Firstname', dataIndex: 'login_firstname', editor: 'textfield', width: 200 }, 
        { text: 'Middlename', dataIndex: 'login_middlename', editor: 'textfield', width: 200 }, 
        { text: 'Lastname', dataIndex: 'login_lastname', editor: 'textfield', width: 200 }, 
        { text: 'Email', dataIndex: 'login_email', editor: 'textfield', width: 200 }, 
        { text: 'Mobile', dataIndex: 'login_mobile', editor: 'textfield', width: 200 }, 
        { text: 'Status', dataIndex: 'login_status', editor: 'textfield', width: 200 } 
       ] 
      }, 
      listeners: { 
       itemdblclick: function(dv, record, item, index, e) { 
        // This is row index 
        alert(index); 
       } 
      } 
     }) 
    } 
}); 

Answer 1

解決方法很簡單。我寫了一個函數：

openWindow = function(record) { 
    var panel = new Ext.form.Panel({ 
     renderTo: document.body, 
     title: 'Users', 
     height: 400, 
     width: 400, 
     bodyPadding: 10, 
     defaultType: 'textfield', 
     items: [ 
      { 
       fieldLabel: 'Login', 
       name: 'login_name', 
       value: record.data.login_name 
      }, 
      { 
       fieldLabel: 'Firstname', 
       name: 'login_firstname', 
       value: record.data.login_firstname 
      } 
     ] 
    }); 

    var window = new Ext.Window({ 
     id  : 'window', 
     height : 400, 
     width : 400, 
     items : [panel] 
    }); 

    window.show(); 
} 

我的聽衆：

listeners: { 
       celldblclick: function (table, td, cellIndex, record, tr, rowIndex, e, eOpts) { 
        openWindow(record); 
       } 
      } 

Answer 2

使用Ext.grid.plugin.RowEditing插件。如何看this example。

Answer 3

有幾種方法可以做到這一點。

試試這個：

Ext.define('App.view.Window',{ 
extend: 'Ext.window.Window', 
alias : 'widget.mywindow', 

closable: false, 
title: 'myWindow', 
height: 600, 
width: 800, 
frame: false, 
maximizable: true, 
autoScroll: true, 
minHeight: 200, 
modal: true, 
closeAction: 'hide', 

buttons: [{ 
text: 'Close', 
    handler:function(button, e, options){ 
     button.up('mywindow').close() 
    } 
    }] 
}); 

(...) 

listeners: { 
    itemdblclick: function(grid,record,item, index, e, eOpts) { 
    Ext.widget('mywindow').show(); 
    } 
}