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/

Ext js可编辑网格

1 个答案: