1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33
    Vote Rating
    0
    Pat Emi is on a distinguished road

      0  

    Default Unanswered: How to create a dynamic form and Fields

    Unanswered: How to create a dynamic form and Fields


    Hi,
    Please i need help. I want to dynamically create a form, and dynamically populate its field base on the number of values(maybe loop through the database base on what i select and generates fields on the number of items found)


    Code:
          Ext.define('ReportDisplayDataHolder', {
            extend: 'Ext.data.Model',
            fields: [ {
                name:'name',
                type:'text'
            },{
                name:'description',
                type:'text'
            }
            ]
        });
    
    
    
    
    
    Ext.create('Ext.Viewport', {
        title: 'Hello',
        width: '100%',
        layout : 'hbox',
        height:400,
        items:[
            {
                xtype:'form',
                region:'north',
                width:'100%',
                height:100,
                layout:'hbox',
                defaults:{
                 labelAlign:'top',
                 margin:'50 80 5 80'
                },
                    items:[
                {
                    id:'first',
                    xtype:'combo',
                    //margin:'30 50 5 50',
                    fieldLabel:'Applications',
                    store : Ext.create('Ext.data.Store', {
                        model: 'ReportDisplayDataHolder',
                        proxy: {
                            type: 'ajax',
                             url: 'stdReport?generator=allApplications',
                            reader: {
                                type: 'json'
                            }
                        }
                    }),
                     displayField: 'name',
                    valueField: 'name',
                    allowBlank:false,
                    listeners:{
                        change:function(){
    
    
                             var second = Ext.getCmp('second');
                           var sp = Ext.getCmp('first').getValue();
    
                            second.getStore().load({
                                params:{
                                    generator: 'getModules',
                                    param: sp
                                }
                            });
    
                           Ext.getCmp('second').show();
                           Ext.getCmp('third').hide();
    
                            console.log('finishhhh');
                        }
                    }
                },
                {
                    id:'second',
                    xtype:'combo',
                    hidden:true,
                    fieldLabel:'Modules',
                    store : Ext.create('Ext.data.Store', {
                        model: 'ReportDisplayDataHolder',
                        proxy: {
                            type: 'ajax',
                            url: 'stdReport',
                            reader: {
                                type: 'json'
                            }
                        }
                    }),
                    displayField: 'name',
                    valueField: 'name',
                    allowBlank:false,
                    listeners:{
                        change:function(){
    
                            console.log('Herereerrer');
                           var third = Ext.getCmp('third');
                           var sp = Ext.getCmp('second').getValue();
                            third.getStore().load({
                                params:{
                                     generator: 'getReport',
                                    param: sp
                                }
                            });
                               Ext.getCmp('third').show();
                            console.log('finishhhh');
                        }
                    }
                },
                {
                    id:'third',
                    xtype:'combo',
                     hidden:true,
                    fieldLabel:'Reports',
                    store : Ext.create('Ext.data.Store', {
                        model: 'ReportDisplayDataHolder',
                        proxy: {
                            type: 'ajax',
                            url: 'stdReport',
                            reader: {
                                type: 'json'
                            }
                        }
                    }),
                    displayField: 'name',
                    valueField: 'name',
                    allowBlank:false
                }
    
        ]
    
            },
    
            {
                xtype:'panel',// My Dynamic form is to appear here
                region:'center',
                html:' Form is here',
                frame:true
            }
        ],
    
        renderTo: Ext.getBody()
    });
    This third combobox is where the actual work is. When i select a value(say Loan) from this combobox, the select is to display a dynamic form containing all fields(textfield or combobox) attach to Loan which might just be 4 field, and when i select another which also might be 6 or 7 fields, the dynamic form displays with the required field with their labelField attached. I am not hard coding the field that are to be displayed, i want it to be done dynamically base on what i select and creating fields from the database.

    Code:
    {
                    id:'third',
                    xtype:'combo',
                     hidden:true,
                    fieldLabel:'Reports',
                    store : Ext.create('Ext.data.Store', {
                        model: 'ReportDisplayDataHolder',
                        proxy: {
                            type: 'ajax',
                            url: 'stdReport',
                            reader: {
                                type: 'json'
                            }
                        }
                    }),
                    displayField: 'name',
                    valueField: 'name',
                    allowBlank:false
                }
    Please how possible is this, i will appreciate any help and suggestion.
    Thanks in advance. God bless U.

    Pat.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It's simple. Just loop through some data to create form fields out of it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1