如何为网格面板中的每一行创建一个表单：extjs答案

【问题标题】：How to create a Form for each row in a grid panel:extjs如何为网格面板中的每一行创建一个表单：extjs
【发布时间】：2015-11-24 06:55:50
【问题描述】：

如何为 Grid 中的每一行创建不同的表单...

我有一个像..这样的网格

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

【问题讨论】：

您应该更准确...请编辑您的帖子并详细描述您想要的内容。类似“如果我双击网格的任何行，弹出窗口应显示最后一列字符串的 MD5 总和”之类的东西。顺便问一下，您使用的是哪个版本的 ExtJS？
我使用 Ext js 4.2.2 .... 每当我在行上执行任何操作时，我都需要为特定行提交表单。例如：我在每一行都有一个文件上传字段...因此，每当我上传文件时，我都想提交该表格...

标签： extjs extjs4.2

【解决方案1】：

您的问题并不能很好地解释您的问题。请更新您的主题和问题。正如我从您的问题中了解到的那样，是的，您可以。有几种方法。其中之一是使用网格列渲染器将表单放入网格单元格中。另一种方法是在网格列中使用编辑器。第二种方法很简单，但不是正确的方法。如果你也想要第二种方式，我可以添加它。所以，我将添加一个有效的。请检查下面的代码并摆弄：

https://fiddle.sencha.com/#fiddle/11i5

    Ext.define('UploadForm', {
       extend: 'Ext.form.Panel',
       width: 200,
       frame: true,
       items: [{
           xtype: 'filefield',
           name: 'photo',
           msgTarget: 'side',
           allowBlank: false,
           buttonText: 'Select'
       }],

       buttons: [{
           text: 'Upload',
           handler: function() {
               var form = this.up('form').getForm();
               if(form.isValid()){
                   form.submit({
                       url: 'photo-upload.php',
                       waitMsg: 'Uploading your photo...',
                       success: function(fp, o) {
                           Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
                       }
                   });
               }
           }
       }],
        initComponent: function () {
            if (this.delayedRenderTo) {
                this.delayRender();
            }

            this.callParent();
        },
        delayRender: function () {
            Ext.TaskManager.start({
                scope: this,
                interval: 200,
                run: function () {
                    var container = Ext.fly(this.delayedRenderTo);

                    if (container) {
                        this.render(container);
                        return false;
                    } else {
                        return true;
                    }
                }
            });
        }
   });

    var store = Ext.create('Ext.data.Store', {
        fields: ['Name', 'Phone', 'Email', 'filePath'],
        data: [{
            Name: 'Rick',
            Phone: '23122123',
            Email: 'something@mail.com',
            filePath: '/home'
        }, {
            Name: 'Jane',
            Phone: '32132183',
            Email: 'some@thing.com',
            filePath: '/home'
        }]
    });

    var renderTree = function(value, meta, record) {
        var me = this;
          var container_id = Ext.id(),
             container = '<div id="' + container_id + '"></div>';

          Ext.create('UploadForm', {
            delayedRenderTo: container_id
          });
        return container;
    }

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        columns: [
            { text: 'Name',  dataIndex: 'Name'  },
            { text: 'Email', dataIndex: 'Email' },
            { text: 'Phone', dataIndex: 'Phone' },
            { text: 'Upload', 
              dataIndex: 'filePath',
              width: 300,
              renderer: renderTree

            }
        ],
        renderTo: Ext.getBody()
    });

附：它基于Render dynamic components in ExtJS 4 GridPanel Column with Ext.create

【讨论】：