PDA

View Full Version : [2.0] Auto Form



santoshrestha
11 Aug 2007, 12:06 PM
This is my attempt to make a dynamic AutoFormPanel where all the properties of the form including fields and its properties retrieve from JSON call. I could not properly extend from FormPanel. Could someone rewrite this to properly extend from Standard FormPanel.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="/nepoglobal/jspack/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/nepoglobal/css/nepoCss.css" />
<script>
var GBL_UPDATE_FILE='/Client Onboarding/testRemote.nepo';
</script>
<!--
<script type="text/javascript" src="/nepoglobal/jspack/ext/archive/ext-1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/nepoglobal/jspack/ext/archive/ext-1.1/ext-all.js"></script>
<script type="text/javascript" src="/nepoglobal/js/nepoCls.js?test=sss"></script>
-->


<script type="text/javascript" src="/nepoglobal/jspack/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/nepoglobal/jspack/ext/ext-all.js"></script>
<script type="text/javascript" src="/nepoglobal/js/nepoCls.js?test=sss"></script><script>

Ext.ux.AutoFormPanel = Ext.extend(Ext.FormPanel,{
url:'form.nepo',
timeout: 30,
method: 'POST',
badServerRespText: 'Error: Server Error',
badComText: 'Error: Server Unavailable',
renderObj:null,

createForm : function(config){
formProp=config.form
formData=config.data
var fields = [];
for(var i=0; i<formProp.items.length; i++){
switch(formProp.items[i].xtype)
{
case 'combobox':
formProp.items[i].store=new Ext.data.SimpleStore({
fields: ['inVal', formProp.items[i].displayField],
data : eval('formData.'+formProp.items[i].store)
});
fields[fields.length]=new Ext.form.ComboBox(formProp.items[i]);
break;
default:
fields[fields.length]=formProp.items[i]
}
}
formProp.items=fields
return formProp;
},
initComponent : function() {
Ext.ux.AutoFormPanel.superclass.initComponent.call(this);
var params ='cmd=data';
this.transaction = Ext.lib.Ajax.request(
this.method,
this.url + (this.method=='GET' ? '?' + params : ''),
{success: this.successRemoteVal, failure: this.failureRemoteVal, scope: this, timeout: (this.timeout*1000)},
params);
},

successRemoteVal: function(response) {
this.transaction = null;
var result = this.processResponse(response);
if(result) {
new Ext.FormPanel(this.createForm(result)).render(this.renderObj);
}else{

}
},

// private
failureRemoteVal: function(response) {

},

// private
processResponse: function(response) {
return (!response.responseText ? false : Ext.decode(response.responseText));
}
});

Ext.form.Field.prototype.msgTarget = 'under';

var dynamicForm = function() {
Ext.QuickTips.init();

return {
init :function(){
Ext.getDom('test').innerHTML=null;
var tmp=new Ext.ux.AutoFormPanel({renderObj:'test'})
}
}
}();
Ext.EventManager.onDocumentReady(dynamicForm.init, dynamicForm, true);


</script>
</head>
<body>
<input type="button" value="Update Form" onClick="dynamicForm.init();">
<div id="test"></div>

</body>
</html>

and here is the sample JSON output


{
"data":{
"states":[
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
['CA', 'California'],
['CO', 'Colorado'],
['CN', 'Connecticut'],
['DE', 'Delaware'],
['DC', 'District of Columbia'],
['FL', 'Florida'],
['GA', 'Georgia'],
['HW', 'Hawaii'],
['ID', 'Idaho'],
['IL', 'Illinois'],
['IN', 'Indiana'],
['IA', 'Iowa'],
['KS', 'Kansas'],
['KY', 'Kentucky'],
['LA', 'Louisiana'],
['MA', 'Maine'],
['MD', 'Maryland'],
['MS', 'Massachusetts'],
['MI', 'Michigan'],
['MN', 'Minnesota'],
['MS', 'Mississippi'],
['MO', 'Missouri'],
['MT', 'Montana'],
['NE', 'Nebraska'],
['NV', 'Nevada'],
['NH', 'New Hampshire'],
['NJ', 'New Jersey'],
['NM', 'New Mexico'],
['NY', 'New York'],
['NC', 'North Carolina'],
['ND', 'North Dakota'],
['OH', 'Ohio'],
['OK', 'Oklahoma'],
['OR', 'Oregon'],
['PA', 'Pennsylvania'],
['RH', 'Rhode Island'],
['SC', 'South Carolina'],
['SD', 'South Dakota'],
['TE', 'Tennessee'],
['TX', 'Texas'],
['UT', 'Utah'],
['VE', 'Vermont'],
['VA', 'Virginia'],
['WA', 'Washington'],
['WV', 'West Virginia'],
['WI', 'Wisconsin'],
['WY', 'Wyoming']
],
"priority":[
['1', 'High'],
['2', 'Medium'],
['3', 'Low']
]
},
"form":{
"labelWidth": 75,
"id":"paramForm",
"url":"save-form.php",
"frame":true,
"title": "Simple Form",
"bodyStyle":"padding:5px 5px 0",
"width": 680,
"defaults": {"width": 230},
"defaultType": "textfield",

"items": [{
"fieldLabel": "First Name",
"name": "first",
"allowBlank":false
},{
"fieldLabel": "Last Name",
"name": "last"
},{
"xtype":"datefield",
"fieldLabel": "Middle Name",
"name": "last"
},{
"xtype":"datefield",
"name": "date",
"fieldLabel": "Date"
},{
"xtype":"htmleditor",
"name": "date",
"width":510,
"height":300,
"fieldLabel": "Date"
},{
"xtype":"combobox",
"store":"states",
"hiddenName":"state",
"displayField":"outVal",
"typeAhead": true,
"mode": "local",
"triggerAction": "all",
"emptyText":"Select a state...",
"selectOnFocus":true,
"fieldLabel": "States"
},{
"xtype":"combobox",
"store":"priority",
"hiddenName":"priority",
"displayField":"outVal",
"typeAhead": true,
"mode": "local",
"triggerAction": "all",
"emptyText":"Select a priority...",
"selectOnFocus":true,
"fieldLabel": "Priority"
},{
"xtype":"timefield",
"fieldLabel": "Cool Time",
"name": "time",
"minValue": "8:00am",
"maxValue": "6:00pm"
}]
}
}