Results 1 to 5 of 5

Thread: complex form

  1. #1

    Default complex form

    hi all,

    just wondering if there is an existing plugin/extension for a from to submit and load the following json:

    PHP Code:
    {
            
    first:'John',
            
    last:'Doe',
            
    company:'Some Company',
            
    email:'[email protected]',
            
    phones:[{
                
    phone:'11111111',type:'mobile'
            
    },{
                
    phone:'22222222',type:'office'
            
    },{
                
    phone:'33333333',type:'home'
            
    }]


    this "phones" section is dynamic depending on user/server data.

  2. #2
    Ext JS Premium Member
    Join Date
    Jun 2009
    Location
    Eastern WA, US
    Posts
    78

    Default

    I would just make a simple mapping routine to flatten out your json.

    Code:
    var values = {};
    Ext.iterate(json, function(key, val){
        if (!Ext.isArray(val)) // simple value, load it
            values[key] = val;
        else{ // we have an array
            Ext.each(val, function(itm, ix){
                Ext.iterate(itm, function(valKey, valVal){
                    values[valKey + "-" + ix] = valVal;
                });
            });
        }
    });
    form.setValues(values);
    I didn't test it, but you get the idea, it would produce a hash like such:
    Code:
    {
            first:'John',
            last:'Doe',
            company:'Some Company',
            email:'[email protected]',
            phone-1:'11111111',
            type-1:'mobile',
            phone-2:'22222222',
            type-2:'office',
            phone-3:'33333333',
            type-3:'home'
    }
    For this to work, of course, you would need to have your form fields names accordingly. If you want to use the json to drive the number of fields you have, you would obviously take another route (use the json to generate your form config).

  3. #3

    Default

    this is what im working on

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>

        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <
    title>Complex form test</title>
        
        <
    link rel='stylesheet' type='text/css' href='http://extjs.com/deploy/dev/resources/css/ext-all.css'/>
        <
    script type="text/javascript"    src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
        <script type="text/javascript"    src="http://extjs.com/deploy/dev/ext-all-debug.js"></script>


        
    </head>
    <body>
    </body>
    </html>
        
    <script language="javascript" type="text/javascript">
        Ext.QuickTips.init();
    </script>

    <script type="text/javascript"  language="javascript">

    Ext.ns('Ext.ux.form');

    //MyForm=Ext.extend(Ext.form.FormPanel,{
    MyForm=Ext.extend(Ext.Panel,{

        initComponent:function(){
        
            Ext.apply(this,{
                //baseCls: 'x-plain',
                labelWidth: 55,
                //url:'save-form.php',
                defaultType: 'textfield',
                layout:'hbox',
                items: [{
                    fieldLabel: 'Phone',
                    name: 'phone',
                    anchor:'100%',  // anchor width by percentage
                    xtype:'textfield'
                },{
                    fieldLabel: 'Type',
                    name: 'type',
                    anchor: '100%'  // anchor width by percentage
                }]

            })
            
            MyForm.superclass.initComponent.call(this)
        },

        initFields : function(){
            //var f = this.form;
            var formPanel = this;
            var fn = function(c){
                if(formPanel.isField(c)){
                    //f.add(c);
                }if(c.isFieldWrap){
                    Ext.applyIf(c, {
                        labelAlign: c.ownerCt.labelAlign,
                        labelWidth: c.ownerCt.labelWidth,
                        itemCls: c.ownerCt.itemCls
                    });
                    //f.add(c.field);
                }else if(c.doLayout && c != formPanel){
                    Ext.applyIf(c, {
                        labelAlign: c.ownerCt.labelAlign,
                        labelWidth: c.ownerCt.labelWidth,
                        itemCls: c.ownerCt.itemCls
                    });
                    if(c.items){
                        c.items.each(fn, this);
                    }
                }
            };
            this.items.each(fn, this);
        },

        onRender : function(ct, position){
            this.initFields();
            Ext.FormPanel.superclass.onRender.call(this, ct, position);
            //this.form.initEl(this.body);
        },
        isField : function(c) {
            return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
        },

        setValues : function(values){
            if(Ext.isArray(values)){ // array of objects
                for(var i = 0, len = values.length; i < len; i++){
                    var v = values[i];
                    var f = this.findField(v.id);
                    if(f){
                        f.setValue(v.value);
                        if(this.trackResetOnLoad){
                            f.originalValue = f.getValue();
                        }
                    }
                }
            }else{ // object hash
                var field, id;
                for(id in values){
                    if(!Ext.isFunction(values[id]) && (field = this.findField(id))){
                        field.setValue(values[id]);
                        if(this.trackResetOnLoad){
                            field.originalValue = field.getValue();
                        }
                    }
                }
            }
            return this;
        },

        findField : function(id){
            var field = this.items.get(id);
            if(!Ext.isObject(field)){
                this.items.each(function(f){
                    if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
                        field = f;
                        return false;
                    }
                });
            }
            return field || null;
        }    
        
        
    })

    Ext.ux.form.ArrayField = Ext.extend(Ext.form.Field,{
        
        onRender : function(ct, position){

            this.panel =new Ext.Panel({
                renderTo: ct,
                width:230,
                height:50,
                autoScroll:true,
                layout:'vbox',
                items:[]
                //layout:'vbox',
            });
            this.el=this.panel.getEl();
        
            //Ext.ux.form.ArrayField.superclass.onRender.call(this, ct, position);
            
            this.hiddenField =  Ext.DomHelper.append(this.el,{tag:'input', type:'hidden',name:this.name});
        },
        
        setValue:function(val) {

            var v =  Ext.util.JSON.encode(val);
            this.hiddenField.value=v;
            //alert(v);        
            //this.panel.removeAll();

            for (var i=0;i<val.length;i++){
                var f = new MyForm()
                this.panel.add(f)
                this.panel.doLayout();   
                f.setValues(val[i])
            }
            
        },
        
        getValues:function(){
        }
    });

    // register xtype
    Ext.reg('arrayfield', Ext.ux.form.ArrayField);

    </script>

    <script type="text/javascript">

    Ext.onReady(function(){

        var f = new Ext.FormPanel({
            labelWidth: 75,
            url:'save-form.php',
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',

            items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, new Ext.form.TimeField({
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
                }),
                this.a=new Ext.ux.form.ArrayField({name:'items',form:MyForm})
            ],

            buttons: [{
                text: 'Save',
                handler: function(){
                    var i=0;
                }, 
                scope:this
            },{
                text: 'Cancel'
            }]
        });

        f.render(document.body);
        
        var rec={}
        rec.data={
            first:'John',
            last:'Doe',
            company:'Some Company',
            email:'[email protected]',
            items:[{
                phone:'11111111',type:'mobile'
            },{
                phone:'22222222',type:'office'
            },{
                phone:'33333333',type:'home'
            }]
        }
        
        f.form.loadRecord(rec);
        
    })


    </script> 

  4. #4

    Default

    i replied earlier but somehow it had to be approved by the moderator. any idea why is it so?

  5. #5
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186

    Default Short answer, no.

    When I first started posting a couple messages a day, I also started needing approval. I think it has to do with the size/frequency of posts compared to the account's recent activity. Then again, maybe it's a mod trying to fix something and trying to prevent changes while they work on the forums.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •