Question

Here, the Sencha team explains how to have a one to many relationship:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store

And you get more in detail here:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader

where they explain that

“This may be a lot to take in – basically a User has many Orders, each
of which is composed of several OrderItems. Finally, each OrderItem
has a single Product.”

Nice.

Now I want to have a Form where there’s the user information PLUS a grid of the user’s orders (not the MVC framework, just a a derived class of form.Panel).

How can I do this? Here’s the beginning of my form.Panel class, where there are only fields. I just want to add to it a datagrid that is linked with Product.

So I create my store, like in the example, Sencha gave, then I create a grid that is linked to a MyFramework.form.Panel, and everything works fine. I just want to make something like a “nested table”, a one to many grid in that class, to display the products that belong to the current user.

Any idea how to do this?

Ext.define('MyFramework.form.Panel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.writerform',

    requires: ['Ext.form.field.Text'],

    initComponent: function(){
        this.addEvents('create');
        Ext.apply(this, {
            activeRecord: null,
            iconCls: 'icon-user',
            frame: true,
            title: 'User',
            defaultType: 'textfield',
            bodyPadding: 5,
            fieldDefaults: {
                anchor: '100%',
                width: 500,
                labelWidth: 200,
                labelAlign: 'right'
            },  
            items: [{
                xtype:'tabpanel',
                activeTab: 0,
                defaults:{
                    layout: 'fit',
                    bodyStyle:'padding:10px'
                },  
                items:[{
                    title:'General information',
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: 'Titre ',
                        name: 'titre',
                        allowBlank: false
                    },{ 
                        fieldLabel: 'Image grande ',
                        name: 'imgGrande'
                    }]  
                },{
                    title:'Products',
                    defaultType: 'textfield',
                    items: [
                        /*
                         * Advices/example here!
                         * I'm stuck!
                         */
                    ]  
                }]  
            }]
        });
        this.callParent();
    }
});

Answer 1

You can work with the concept of Dynamic Form interacting with an embbed grid.

Of course that doesn’t suit your needs right away. My advice, though, is to start from there and try to implement a field that will be related to an embbed grid, in your case a grid of products.

With that said, you wouldn’t have a form that is filled by the embbed grid selection, but a single field that gets filled like a ComboBox, but by the grid selection.

Maybe try the Ext.form.LookUp field, a component that I’ve created that is kinda related to that problem.

This component is not exactly what you are looking for, since it works with single records, like with one to one relationships. But you can try to implement something from there.