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

[jsakalos]

MetaForm, after configuration, behaves exactly as Ext.form.FormPanel so you can listen to same events as for standard Ext.form.

[ikk0]

Even though I still couldn't find a solution for my problem, I think I found a really, really small bug in your code:

                    case 'save':
                    case 'submmit':
                        button = this.getButton(name, {
                            handler:this.submit.createDelegate(this, [{params:{cmd:'setPref'}}])
                        });
                    break;

"submmit". Think that was not intended?
Greetings

[jsakalos]

Oh yes, thanks for finding typo. In fact, I've never thought that somebody will use that part of code... I use it to make life easier in my app.

[george.antoniadis]

Saki for once again you've outdone your self! :)
Grats on yet another awesome ux ;)

Just a question. has anyone tried adding tabs on a metaform?

[jsakalos]

There is no support for any visual structure in MetaForm. It just takes metaData and renders fields one after the other. I wouldn't use it for very complex crafted forms that are most likely unique in whole app anyway.

[jamesfarrer]

Hi Jozef,

Thanks for all your excellent advice and extensions on here - I have also used your datetime field which is brilliant.

I'm having a problem using this one though....

To start with, I am just using your test form and test json data... however I get this problem...

var win = new Ext.Window({
         id:'metaform-win'
        ,layout:'fit'
        ,width:500
        ,height:300
        ,title:'Ext.ux.MetaForm'
        ,renderTo:'dynamic-form'
        ,items:{
             xtype:'metaform'
            ,url:'../profile/getprofileform.castle'
            ,buttons:[{
                 text:'Load'
                ,handler:function() {
                    Ext.getCmp('metaform-win').items.get(0).getForm().load();
                }
            },{
                 text:'Submit'
                ,handler:function() {
                    Ext.getCmp('metaform-win').items.get(0).getForm().submit();
                }
            }]
        }
    }); 

I then get this error....

fire : function(){
            var ls = this.listeners, scope, len = ls.length;
            if(len > 0){
                this.firing = true;
                var args = Array.prototype.slice.call(arguments, 0);
                for(var i = 0; i < len; i++){
                    var l = ls[i];
                    if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
                        this.firing = false;
                        return false;
                    }
                }
                this.firing = false;
            }
            return true;
        } 

The specific issue is that l.fireFn is undefined. Do you think this is a problem because I am using renderTo?

Thanks

James

[jsakalos]

Difficult to say... You should examine the call stack to see where is initiator of the error. In any case, I'd recommend against renderTo especially rendering to another container as body. You can also try to set autoInit:false to see what happens.

BTW, MetaForm has integrated an infrastructure for buttons you just need to provide function getButton and createButtons array.

[chalu]

I am using Ext 2.0.2, I can't Ext.isArray in the docs, and the firebug javascript console in my ext application returns undefined with this code alert(Ext.isArray).

Though the demo / example I downloaded worked (after adding <?php instead of <? to the php code in formconfig.php which was causing an error), integrating it with my application now throws errors from within the Ext.ux.MetaForm.js file.

First, within the removeAll function, I had to make this change

// remove form panel items
                //this.items.each(this.remove, this); // this line just won't work in my application
		if(this.items && this.items.length > 0 && !Ext.isEmpty(this.items[0])){
			this.items.each(this.remove, this);
		}

Now I am stuck within the onMetaChange function, with firebug reporting that column has no
properties, from this line

columns.get(colIndex++).add(config);

seems that it is not been initialized from this line :

columns = this.items.get(0).items;

All I did to try to use it was
1. include the Ext.ux.MetaForm.js file
2. added this code to my application :

if(!Ext.get('metaform-win')){
				var win = new Ext.Window({
			         id:'metaform-win'
			        ,layout:'fit'
			        ,width:370
			        ,height:300
			        ,title:'Configure User Column Action Settings'
			        ,items:{
			             xtype:'metaform'
			            ,url:'formconfig.php'
			            ,buttons:[{
			                 text:'Cancle'
			                ,handler:function() {
			                    Ext.getCmp('metaform-win').close();
			                }
			            },{
			                 text:'Submit'
			                ,handler:function() {
			                    Ext.getCmp('metaform-win').items.get(0).getForm().submit();
			                }
			            }]
			        }
			    });
			
			    win.show();
			}
		}

Even using the same code in the html file from the source download still produces the same set of errors. Please what am I missing in it's usage. Note I am using the yui adapter includes, I can't find Ext.isArray. Thanks for this extension

[jsakalos]

I am using Ext 2.0.2, I can't Ext.isArray in the docs, and the firebug javascript console in my ext application returns undefined with this code alert(Ext.isArray).

You can replace Ext.isArray(a) with 'function' === typeof a.pop. Ext.isArray is in SVN but not in distribution yet.

Though the demo / example I downloaded worked (after adding <?php instead of <? to the php code in formconfig.php which was causing an error)

This is just php.ini setting, short_open_tag = On

Other issues: You have to make it working at least once with the provided php backend to understand the structure of delivered JSON - it's quite deep and complex.

removeAll: I've just tested it and it works flawlessly. Strange...

columns: have you configured columnCount?

Just to be sure, I'm updating code in the first post but I doubt that it has changed. I haven't touched MetaForm for a couple of weeks....

[chalu]

columnCount somewhere in the formconfig.php code has a value of 2 i.e "columnCount" => 2.
Do I need to change this to fix the errors, what I find strange is that your the example works on its own, but when put in my application, even without tampering with the original source ,it spits errors. Can't I just have it run in an application just by including the source and using your example block of code in the html file that shiped with the download.

This may not be the right place for this anyway but please, I am using some grid panel that accepts column model settings from meta data from the server, it has a toolbar that I also wish to adapt to some server meta, I need a way to remove the items in the toolbar and repopulate it, each time the grid recieves server meta.
tried

gridObject.remove( gridObject.getToolBar() );

and

  Ext.each(gridObject.items, function(item){
      this.remove(item);
  }, gridObject.getToolBar());

all to no avail

Thanks Man