Question

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

我有一个类似的网格..

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

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

P.S。它基于Render dynamic components in ExtJS 4 GridPanel Column with Ext.create

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

1 个答案: