[HELPED] Dynamic Form from RPG example?

[mwmayer4]

The example provided for building a dynamic form in RPG is pretty straightforward. But if you are trying to use MVC I would think you might have to do it somewhat differently. I'm at a loss as to how to attack it. Would I just not have a view.js and do it all in the controller? If it did it that way, I'm perplexed as to how I would get the form.js into the viewport. Any guidance would be appreciated!

[eweiler]

 this.getViewport().add({component}) or this.getViewport().insert(2, {component})

[mwmayer4]

hmmmm... ok, I'll mull that over... One thought I did have was that I may be able to make my view.js a data view and use XTemplate as a way to build it... does that sound doable?

[eweiler]

I think the important parts of that example are the Valence.util.execDynamicScript() along with the renderTo: "formMainDiv"

If I was going to make this in MVC, I would put something out in my viewport with an html id of formMainDiv and have the ajax and script execute in the controller init or an event which listens for something being rendered.

[mwmayer4]

ok.. that makes sense... I have yet to use the renderTo in my MVC apps, so I've never had a id tag in my viewport like that, but it makes sense. I'll give it a shot..

[eweiler]

Tell us about what you want to do. Going this route may not be your best bet...

[mwmayer4]

I have a master file of system codes that I present to a user in a grid. They can then select a system. Based on that selection, I have another file that contains the description, field length, field type, of what needs to be on the form. The form can have from 1-99 fill in the blanks. for example, the form it might look like this:


Date: 99/99/9999
Title: AAAAAAAAAAAAAAAAAAAA
Vendor: 99999
Type: X
Series: XXXXX

it's completely variable as to what the form is going to look like.

I see where I could run the AJAX request on the selection event of the system code, and on the back end build the form view. I just need to do it MVC style..

Keep in mind, the viewport has other things in it. This form would be an item in an accordion layout. The system code grid is the other panel in the accordion. When the select the system code, I can do a syscodeview.collpase() and then do a formview.expand().
it would contain the dynamic form I built on the backend.

[eweiler]

Some options you have are to dynamically build the form in javascript, or maybe even better build all the fields, and dynamically hide/show what is needed.

[mwmayer4]

i don't think pre-building all the fields will work because the xtype and lengths vary..

field3 might be xtype: 'numberfield' in system A, but xtype: 'textfield' in system B, etc etc...
plus some other attributes may be different, like allowBlank: false.

[eweiler]

In the past, in a situation similar to this, I've constructed the components on the front end, based on configuration records from the back.

Here is an example in pseudo code.

//User clicks, request configs from server. records return like this:

[{ xtype : 'numberfield', allowBlank: false, size: 2, maxLength: 4, fieldLabel : 'My Label' },
 { xtype : 'numberfield', allowBlank: false, size: 2, maxLength: 4, fieldLabel : 'My Label' },
 { xtype : 'numberfield', allowBlank: false, size: 2, maxLength: 4, fieldLabel : 'My Label' }]


// assume we already have a form panel we are working with
//when the new config is available, clear out the old form items, and build in these

var myForm = this.getMyForm();

myForm.removeAll();

var itemArray = [];

Ext.each(yourConfigResults, function(rec) {
   // maybe you do custom calculations or data massaging here.
   // how much you need to do depends on how close your data is to configs

   // add a config for each component
   itemArray.push({
       xtype : rec.xtype,
       allowBlank : rec.allowBlank,
       fieldLabel  : rec.fieldLabel,
       disabled    : rec.isEditable === 'Y',
       etc. etc. etc.

   });

});

myForm.add(itemArray);

[mwmayer4]

Whoa!!! now that's a nice trick... I like that!! thanks!

[mwmayer4]

question on the above pseudo code. in the Ext.each function, when the push is executed, how does it know to push it to myForm?

[eweiler]

The push is adding config objects to the itemArray array.

Below the Each loop, it adds the items to the form:

myForm.add(itemArray);

[mwmayer4]

big duh for me... Thanks!

[mwmayer4]

one last question (i hope)... when i do the myForm.removeAll(). is it going to only remove the "items" or the entire guts of the .js file. For example, if my form looks like this:

Ext.define('VendorMaster.view.ScanForm', {
    extend: 'Ext.form.Panel',
	alias: 'widget.scanform',
	initComponent: function() {
		var me = this;

		Ext.apply(me, {
			bodyPadding: 15,
			frame: true,
			defaults: {
				labelAlign: 'right',
				labelWidth: 200,
				size: 35
			},

			tbar: me.buildTbar(),
			items: me.buildItems()

		});

		me.callParent(arguments);
	},

	buildTbar: function() {
		return [{
               xtype: 'tbseparator'
		},{
            xtype: 'button',
			itemId: 'executescan',
			text: 'Scan',
			iconCls: 'Camera'
		},{
            xtype: 'tbseparator'
		}, {
            xtype: 'button',
			itemId: 'cancelscanbutton',
			text: 'Cancel',
			iconCls: 'cancel'
		},{
            xtype: 'tbseparator'
		}];
	},

	buildItems: function() {
		return [{
            xtype: 'hidden',
            id: 'scansys',
            name: 'SCANSYS'
		},{
			xtype: 'numberfield',
			fieldLabel: 'Company Number',
			name: 'COMPNBR',
			readOnly: true
		}, {
			xtype: 'numberfield',
			fieldLabel: 'Vendor Number',
			name: 'VENDOR',
			readOnly: true
		}, {
            xtype: 'textfield',
			fieldLabel: 'Vendor Name',
			name: 'VENNAME',
			readOnly: true
		}, {
			xtype: 'combo',
			fieldLabel: 'Document Type',
            name: 'DOCTYPE',
			store: 'Doctypes',
			displayField: 'DRNAM',
			valueField: 'DRKEY',
            value: '',
			allowBlank: false,
			queryMode: 'local',
			emptyText: 'Select Document Type',
			size: 40
		}];
	}
});

would i need to send back everything after the Ext.define, or what?
I see there is a remove() and a removeChildEls()... if I'm only worried about the items: which would be best?
not sure from what I read in the api docs...