How to create a Form for each row in a grid panel:extjs

Question

How do i create a different form for each row in the Grid...

i have a grid like ..

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

You should be more precise... Please edit your post and describe in detail what you want. Something like "if I double-clic on any row of the grid a pop-up should display the MD5 sum of the last column string". By the way which version of ExtJS are you using? — Michel, Nov 24 '15 at 07:29
I Use Ext js 4.2.2.... whenever i perform any operation on the Row i need to submit the form for a particular row.. ex: i had an file upload field in each row...so whenever i upload a file i would like to submit that form... — Kumar, Nov 24 '15 at 08:00

score 0 · Answer 1 · edited May 23 '17 at 11:51

Your question doesn't explain your problem very well. Please update your topic and question. As I understood from your question, yes, you can. There are couple of ways. One of them is putting a form into a grid cell using grid column renderer. Another way is using editor in grid column. The second way is easy, but it's not proper way. If you want the second way also, I can add it. So, I'll add an efficient one. Please check the code below and fiddle:

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. Its based from Render dynamic components in ExtJS 4 GridPanel Column with Ext.create

How to create a Form for each row in a grid panel:extjs

1 Answers1