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

如何为网格中的每一行创建不同的表单

我有一个网格像

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()
});

---

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

Ext.define（'UploadForm'{
扩展：“Ext.form.Panel”，
宽度：200，
框架：对，
项目：[{
xtype:'filefield'，
姓名：‘照片’，
msgTarget:'侧面'，
allowBlank:false，
buttonText:“选择”
}],
按钮：[{
文本：“上传”，
处理程序：函数（）{
var form=this.up（'form'）.getForm（）；
if（form.isValid（））{
提交表格({
url:'photo upload.php'，
waitMsg:'上传您的照片…'，
成功：功能（fp，o）{
Ext.Msg.alert（'Success'，'Your photo'+o.result.file+'“已上载”）；
}
});
}
}
}],
initComponent:函数（）{
如果（本.delayedRenderTo）{
这个.delayRender（）；
}
这是callParent（）；
},
delayRender:函数（）{
Ext.TaskManager.start({
范围:本,，
间隔时间:200,，
运行：函数（）{
var container=Ext.fly（this.delayedRenderTo）；
if（集装箱）{
这个.render（容器）；
返回false；
}否则{
返回true；
}
}
});
}
});
var store=Ext.create（'Ext.data.store'{
字段：[“姓名”、“电话”、“电子邮件”、“文件路径”]，
数据：[{
名字：'瑞克'，
电话：23122123，
电邮:'something@mail.com',
文件路径：'/home'
}, {
姓名：'简'，
电话：32132183，
电邮:'some@thing.com',
文件路径：'/home'
}]
});
var renderTree=函数（值、元、记录）{
var me=这个；
var container_id=Ext.id（），
容器=“”；
Ext.create（'UploadForm'{
delayedRenderTo:container\u id
});
返回容器；
}
Ext.create（'Ext.grid.Panel'{
标题：《辛普森一家》，
店:店,，
栏目：[
{text:'Name'，dataIndex:'Name'}，
{text:'Email'，dataIndex:'Email'}，
{text:'Phone'，dataIndex:'Phone'}，
{文本：“上载”，
数据索引：“文件路径”，
宽度：300，
渲染器：渲染树
}
],
renderTo:Ext.getBody（）
});

---

注意：它是基于

的，你应该更精确一些。。。请编辑你的帖子，并详细描述你想要什么。类似于“如果我在网格的任何一行上双击clic，弹出窗口应该显示最后一列字符串的MD5和”。顺便问一下，您使用的是哪个版本的ExtJS？我使用的是ExtJS4.2.2。。。。每当我对该行执行任何操作时，我都需要提交特定行的表单。。我在每一行都有一个文件上传字段…所以每当我上传一个文件，我都想提交那个表格。。。

    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()
    });