See Extension only
Source Code

Ext Simple Form Example

This example shows how to Build a from using Ext.ux.SimpleFormPanel.


Members
Id First Name Last Name Edit In Panel Edit In Window
1 Surinder Singh Edit Edit
2 Sawaranjeet kaur Edit Edit
<!-- Simple Form Panel ux Start-->
<script type="text/javascript" 	src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/simpleForm/simpleFormPanel.js"></script>
<script type="text/javascript" 	src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/simpleForm/simpleFormWindow.js"></script>
<!-- Simple Form Panel ux End-->
<script type="text/javascript">
var demoPanelForm;
var demoWindowForm;
Ext.onReady(function(){	
	demoPanelForm = new Ext.ux.SimpleFormPanel({
		renderTo:'demoFormExample',
		formName:'members',//form name will be sent to the server, can be used to detect which form is being processed
		border:true,
		height:250,
		hideReloadButton:false,//hide the reload form button
		hideResetButton:false,//hide the Reset form button
		url:scriptUrl+'ux/simpleForm/example/index.php',//url where we will proessed the data
		formDetails : {//add the field under this config param as u needed 	
			border:false, 
			labelStyle:'font-weight:bold;',
			title:'Enter The Details',
			items: {
				layout:'form',
				border:false,
				labelWidth:100,
				padding:'10px',
				defaults:{
					labelStyle:'font-weight:bold;',
					width:250,
					xtype:'textfield'
				},
				items:[{				
					fieldLabel:'First Name',
					name:'first_name'
				},{				
					fieldLabel: 'Last Name',
					name:'last_name'
				},{
					fieldLabel: 'Email',
					name:'email'
				},{
					fieldLabel: 'Phone',
					name:'phone'
				}] 
			}
		},
		listeners:{
			formsave:function(formpanel,id, result){
				alert(result.feedback);
			}	
		}
	});	
	demoWindowForm = new Ext.ux.SimpleFormWindow({//same as above just to show form in window
		title:'Enter The Details',
		formName:'members',
		border:false,
		height:250,
		hideReloadButton:false,
		hideResetButton:false,
		url:scriptUrl+'ux/simpleForm/example/index.php',
		formDetails : {		
			border:false, 
			labelStyle:'font-weight:bold;',
			items: {
				layout:'form',
				border:false,
				labelWidth:100,
				padding:'10px',
				defaults:{
					labelStyle:'font-weight:bold;',
					width:250,
					xtype:'textfield'
				},
				items:[{				
					fieldLabel:'First Name',
					name:'first_name'
				},{				
					fieldLabel: 'Last Name',
					name:'last_name'
				},{
					fieldLabel: 'Email',
					name:'email'
				},{
					fieldLabel: 'Phone',
					name:'phone'
				}] 
			}
		},
		listeners:{
			formsave:function(formpanel,id, result){
				alert(result.feedback);
			}	
		}
	});
	
	//if you want to insert a new record use
	//demoPanelForm.show(0);					 		
	//demoWindowForm.show(0);
});
</script>
<h1 class="extensionHeading">Ext Simple Form Example</h1>
<p>This example shows how to Build a from using Ext.ux.SimpleFormPanel.</p>
<br />

<div id="demoFormExample" style="height:320px;"></div>

	
var demoPanelForm;
var demoWindowForm;
Ext.onReady(function(){	
	demoPanelForm = new Ext.ux.SimpleFormPanel({
		renderTo:'demoFormExample',
		formName:'members',//form name will be sent to the server, can be used to detect which form is being processed
		border:true,
		height:250,
		hideReloadButton:false,//hide the reload form button
		hideResetButton:false,//hide the Reset form button
		url:scriptUrl+'ux/simpleForm/example/index.php',//url where we will proessed the data
		formDetails : {//add the field under this config param as u needed 	
			border:false, 
			labelStyle:'font-weight:bold;',
			title:'Enter The Details',
			items: {
				layout:'form',
				border:false,
				labelWidth:100,
				padding:'10px',
				defaults:{
					labelStyle:'font-weight:bold;',
					width:250,
					xtype:'textfield'
				},
				items:[{				
					fieldLabel:'First Name',
					name:'first_name'
				},{				
					fieldLabel: 'Last Name',
					name:'last_name'
				},{
					fieldLabel: 'Email',
					name:'email'
				},{
					fieldLabel: 'Phone',
					name:'phone'
				}] 
			}
		},
		listeners:{
			formsave:function(formpanel,id, result){
				alert(result.feedback);
			}	
		}
	});	
	demoWindowForm = new Ext.ux.SimpleFormWindow({//same as above just to show form in window
		title:'Enter The Details',
		formName:'members',
		border:false,
		height:250,
		hideReloadButton:false,
		hideResetButton:false,
		url:scriptUrl+'ux/simpleForm/example/index.php',
		formDetails : {		
			border:false, 
			labelStyle:'font-weight:bold;',
			items: {
				layout:'form',
				border:false,
				labelWidth:100,
				padding:'10px',
				defaults:{
					labelStyle:'font-weight:bold;',
					width:250,
					xtype:'textfield'
				},
				items:[{				
					fieldLabel:'First Name',
					name:'first_name'
				},{				
					fieldLabel: 'Last Name',
					name:'last_name'
				},{
					fieldLabel: 'Email',
					name:'email'
				},{
					fieldLabel: 'Phone',
					name:'phone'
				}] 
			}
		},
		listeners:{
			formsave:function(formpanel,id, result){
				alert(result.feedback);
			}	
		}
	});
	
	//if you want to insert a new record use
	//demoPanelForm.show(0);					 		
	//demoWindowForm.show(0);
});
<?php
    error_reporting
(E_ALL&~E_NOTICE);
    
session_start();
    
    
/**** 
    * we are saving data in sesstion 
    ***************/
    
if(!isset($_SESSION['dummydata'])){//set dummy data one time
        
$_SESSION['members_details']    = array();
        
$_SESSION['members_details'][1]    = array('first_name'=>'Surinder''last_name'=>'Singh','email'=>'a@a.com','phone'=>'1234567');
        
$_SESSION['members_details'][2]    = array('first_name'=>'Sawaranjeet''last_name'=>'kaur','email'=>'a@a.com','phone'=>'1234567');
        
$_SESSION['dummydata']            = true;
    }
    
    
/***
    *helper functions
    ***************/
    
function RequestGetVar($key$default=''){
        if(isset(
$_REQUEST[$key])){
            return 
$_REQUEST[$key];
        }
        return 
$default;
    }
    
    
/***
    *helper functions
    ***************/
    
function dumpInSession($key$var){
        
ob_start();
        
var_dump($var);
        
$_SESSION[$key] = ob_get_clean();
    }
    
/***
    *Print the records to show
    ****************************/
    
function getGridData(){
        
?>
        <div class="dummyGrid x-panel x-grid-panel">
            <div class="x-panel-tl">
                <div class="x-panel-tr">
                    <div class="x-panel-tc">
                        <div class="x-panel-header x-unselectable">
                            <span class="x-panel-header-text" >Members</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="x-panel-bwrap" >
                <div class="x-panel-ml">
                    <div class="x-panel-mr">
                        <div class="x-panel-mc">          
                            <table cellspacing="3">
                              <tr class="x-grid3-header">
                                <th scope="col">Id</th>
                                <th scope="col">First Name</th>
                                <th scope="col">Last Name</th>
                                <th scope="col">Edit In Panel</th>
                                <th scope="col">Edit In Window</th>
                              </tr>
                             <?php foreach($_SESSION['members_details'] as $id=>$row){ ?>
                              <tr class="x-grid3-row">
                                <td id="grid1_<?php echo $id?>_id"><?php echo $id?></td>
                                <td id="grid1_<?php echo $id?>_first_name"><?php echo $row['first_name']; ?></td>
                                <td id="grid1_<?php echo $id?>_last_name"><?php echo $row['last_name']; ?></td>
                                <td><a href="javascript: void(0);" onclick="demoPanelForm.show(<?php echo $id?>)" >Edit</a></td>
                                <td><a href="javascript: void(0);" onclick="demoWindowForm.show(<?php echo $id?>, this)" >Edit</a></td>
                              </tr>
                              <?php ?>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="x-panel-bl x-panel-nofooter">
                    <div class="x-panel-br">
                        <div class="x-panel-bc"></div>
                    </div>
                </div>
            </div>
        </div>
        <?php    
        
    
}
    
    
/*****
    *Save the form details for given form and id
    *************************/
    
function saveFormDetails($form$id){
        if(
$form=='members'){
            
$data = array('first_name'=>RequestGetVar('first_name'), 'last_name'=>RequestGetVar('last_name'),'email'=>RequestGetVar('email'),'phone'=>RequestGetVar('phone'));
        }
    
        
$_SESSION[$form.'_details'][$id] = $data;
        
        
$result             = new stdClass();        
        
$result->feedback    'Form Details saved';
        
$result->success    true;
        
//$result->id            = $id;//if it was insert query, then return the new id
        
return $result;
    }
    
    
/*****
    *Return the record for given form and id
    *************************/
    
function loadFormDetails($form$id){
        
$rows                $_SESSION[$form.'_details'];//finding which table to be used    
        
$result             = new stdClass();
        
$result->data        $rows[$id];//finding which record to be load
        
$result->feedback    '';//set this message in case of error        
        
$result->success    true;//set this as false in case of error
        
return $result;
    }
    
    
$subTask            RequestGetVar('subTask''loadFormDetails');
    
$form                RequestGetVar('form''members');//used to determine, we are dealing with which form
    
$id                    RequestGetVar('id''0');
    
    if(
$subTask=='loadFormDetails'){
        
$result    loadFormDetails($form$id);    
    }
    if(
$subTask=='saveFormDetails'){
        
$result saveFormDetails($form$id);    
    }
    if(
$subTask=='getGridData'){
        
$result getGridData();
        return;    
    }    
    if(
$subTask=='dump'){//debug helper
        
echo "<pre>";
        
var_dump($_SESSION);
        echo 
"</pre>";
        die();
    }
    
    echo 
$json             json_encode($result);

?>