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

Posted 2023-02-26

【中文标题】如何为网格面板中的每一行创建一个表单：extjs

【英文标题】：How to create a Form for each row in a grid panel: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 .... 每当我在行上执行任何操作时，我都需要为特定行提交表单。例如：我在每一行都有一个文件上传字段...因此，每当我上传文件时，我都想提交该表格...

【参考方案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: '[e-mail]',
            filePath: '/home'
        , 
            Name: 'Jane',
            Phone: '32132183',
            Email: '[e-mail]',
            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