Ext.ux.MetaForm - A FormPanel configured by metadata received from server

[jsakalos]

Yes, fields are generated in the order they are received. I know nothing about DWR but PHP's json_encode always honors the order in which the object/array being encoded has been defined.

[pokerking400]

Fantastic. This is what i am looking for. I was going nowhere with your recordform plugin as that is not usable for me.

This little example is the one i am looking for. Basically i wanted to use same data sore info i am sending grid to use it for forms as well.

Even editing grid will send a request to server and return with one record.

I do not want to put any UI elements in server. That is aefully bad design. I am only sending generic data , may be one type of editor based on the format. That is because database has that info , i am just propagating it to UI.

I need to redesign your example to create a render object to render the fields. Single colum , double colum or form with tabs.

1. Basic form rendering is with single , dual and ..
2. One one Forms Kind of person with office address and home address ( kind of drop down to save space.
3. One to many if the result set has Object inside then grid will be created and reloaded with child data.

That is the idea. I have to do it by this week. That is my own goal. We will see.

Thanks again for the example. I wasted two days searching ..you hav eto put this in your example website as well. It is simple but for nebies like me any thing simple is good.

[pokerking400]

hi saki ,

what meta data i have to send to create this form?.

bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});

    var tab2 = new Ext.FormPanel({
        labelAlign: 'top',
        title: 'Inner Tabs',
        bodyStyle:'padding:5px',
        width: 600,
        items: [{
            layout:'column',
            border:false,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            height:235,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Personal Details',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            },{
                cls:'x-plain',
                title:'Biography',
                layout:'fit',
                items: {
                    xtype:'htmleditor',
                    id:'bio2',
                    fieldLabel:'Biography'
                }
            }]
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    tab2.render(document.body);
});

This is the dynamic form with tabpanels. Once i able to create this , that will be the first step , then i have to create content for the tabs later.

I want to use your sample meta data to create this , how do i do it?

Big Thanks!

[jsakalos]

Just follow the example written in PHP from the first post.

[pokerking400]

That is a plain form. I want to add tab panel to existing form. How do i do that through metadata

[jsakalos]

Then you are on your own. MetaForm doesn't support tabs at present.

[pokerking400]

Not a problem. I am just checking whether someone has done the thing i am looking for, then i can build upon it.

Thanks for the reply anyway.

[Duxer]

Hello Jozef!

I define small xtype - this is label + radio button 'yes' and radio button 'no' based on panel. And I try to set value in this field from JSON as for other, but it is not working... Can you give me some advice what should there present to set value?

/**
 *
 * @class Ext.ux.YesNoRadio
 * @extends Ext.Panel
 */

Ext.ux.YesNoRadio = Ext.extend(Ext.Panel, {
    
    fieldLabel:'',
    labelWidth:80,
    value:true,
    
    initComponent:function() {
    Ext.apply(this, {
        border:false
       ,layout:'absolute'
       ,height:20
       ,width:this.labelWidth + 100
       ,style:'font-size:12px;'
       ,items:[
        {
             x:0
            ,y:0
            ,xtype:'label'
            ,text: this.fieldLabel
        },
        {
             x: this.labelWidth + 5
            ,y:0
            ,xtype:'radio'
            ,boxLabel:'Yes'
            ,checked: (this.value == true)
            ,name:this.name
            ,inputValue:1
        },
        {
             x: this.labelWidth + 50
            ,y:0
            ,xtype:'radio'
            ,boxLabel:'No'
            ,checked: (this.value == false)
            ,name:this.name
            ,inputValue:0
        }]
    });
    
        // call parent initComponent
        Ext.ux.YesNoRadio.superclass.initComponent.call(this);
    
    } // end of function initComponent
    
});

// register xtype
Ext.reg('yesnoradio', Ext.ux.YesNoRadio);
 
// end of file

[jsakalos]

Off the top of my head: You should set value instead of inputValue. All form controls understand value - if it is present in config then it is set as value of field.

[pokerking400]

OnMetaChange ...

i need something like this when it sees fieldset...i don't know exact stuff i have to do to get new fields

			
			if('fieldset' === config.xtype) {
					Ext.apply(config, {
					xtype:'fieldset',
					checkboxToggle:true,
					title: 'User Information2',
					width:400,
					height:300,
					defaults: {width: 210},
					collapsed: true,
					items :{
							 xtype:'metaform'
							,title:'Ext.ux.MetaForm1'
							,url:'/recordform/formconfig1.php'
						}	
					});
			}


or 

			
			if('fieldset' === config.xtype) {
					Ext.apply(config, {
					xtype:'fieldset',
					checkboxToggle:true,
					title: 'User Information2',
					width:400,
					height:300,
					defaults: {width: 210},
					collapsed: true,
					items :{
							url:'/recordform/formconfig1.php'
						}	
					});
			}