Apex Code Development You need to sign in to do that
Don't have an account?
1986anuj Save button in extjs
Hi, I am trying to create a form using extjs and adding a save button to it which will save the data into salesfroce database.But its not working for me...
Below is the VF code and the controller code.
<apex:page controller="EmployeeData" sidebar="false">
<link rel="Stylesheet" type="text/css" href="{!$Resource.ExtJS}/resources/css/ext-all.css" />
<script type="text/javascript" src="{!$Resource.ExtJS}/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="{!$Resource.ExtJS}/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var employee_form = new Ext.FormPanel({
labelWidth: 75,
url: "{!save}",
title:'Employee Details',
frame:true,
width:500,
items: [{xtype: 'textfield', fieldLabel: 'Employee Name',name: 'empName'},
{xtype: 'textfield', fieldLabel: 'Employee Code',name: 'empNo'},
{xtype: 'textfield', fieldLabel: 'Designation',name: 'desig'}],
buttons: [{text: 'Save'}]
});
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myDataString = 'var myData = [ ';
<apex:repeat value="{!employeeData1}" var="e" id="ContactRepeat">
myDataString += "['{!e.Employee_Code__c}','{!e.Employee_Name__c}','{!e.Designation__c}'],";
</apex:repeat>
myDataString += "['','',''] ];";
eval(myDataString);
var store = new
Ext.data.SimpleStore({fields:[{name:'Employee_Code__c'},{name:'Employee_Name__c'},{name:'Designation__c'}]}); store.loadData(myData);
// CREATE THE GRID
var grid = new Ext.grid.GridPanel({store: store, columns: [
{id: 'Employee_Code__c', header: "Employee Code", width:00, sortable:true,frame:true, dataIndex: 'Employee_Code__c'},
{id: 'Employee_Name__c', header: "Employee Name", width: 150, sortable: true,frame:true, dataIndex: 'Employee_Name__c'},
{id: 'Designation__c', header: "Designation", width: 150, sortable: true,frame:true, dataIndex: 'Designation__c'} ],stripeRows:true,frame:true, autoExpandColumn: 'Employee_Code__c', height: 230, width: 500, title: 'MY EXT JS EMPLOYEE\'S CONTACT LIST'});
employee_form.render('employeeDetails');
grid.render('myContactList-grid');
grid.getSelectionModel().selectFirstRow();
});
</script>
<div id="employeeDetails"></div>
<div id="myContactList-grid"></div>
</apex:page>
Controller code is -
public class EmployeeData {
List<Employee__c> emp;
String employeeName;
public List<Employee__c> getEmployeeData1()
{
return emp = [select Employee_Code__c,Employee_Name__c, Designation__c from Employee__c];
}
public String getEmployeeName()
{
return employeeName;
}
public PageReference save()
{
//Insert code
return null;
}
}
The save button is not working and i am getting errror -
Save error: Unknown property 'EmployeeData.save' Employee.page TestProject/src/pages
I believe that the only method is to employ < apex : ActionFunction
this allows you do delcare an Apex Method that will be called, and specifies the name of a javascript function that will call it.
so, now you can call apex from your page, the trick is to bind variables in the page so that they are ready and available to your controller ( Apex) when it gets called.
there are two ways, one is to bind them directly from your form fields using expressions. Not sure if you are doing thator not.
the other way is to bind your data ( collected from ext form) into hidden fields on the page that are bound to Apex Controller properties. This method requires setting up a hidden VF field using < apex : inputHidden and then in your save function you assign the EXT form fields into these hidden fields using document.getElementById().value = ext_form_value; Then calling the Action Function to send the data back to the controller.
Here is an example of the trick of binding hidden form fields to Controller properties: Captcha Article
look for this code:
<apex:inputhidden value="{!challenge}" id="challenge" /> <apex:inputhidden value="{!response}" id="response" /> <script type="text/javascript"> function captureResponse(ele) { document.getElementById('{!$Component.challenge}').value = document.getElementById('recaptcha_challenge_field').value; document.getElementById('{!$Component.response}').value = document.getElementById('recaptcha_response_field').value; } </script>
to see how a hidden input field can be specified and hold data from the form, this data is then available in your controller when your action function is invoked.
summary :
user fills in EXT form fields
your functions takes form fields and fills in hidden inputs
your function calls the action method specified using < apex: actionFunction
your controller actionfunction is run and can see the values placed in the hidden inputs
All Answers
in Visualforce your save method is defined correctly as a page reference, returning null.
but this line of code
url: "{!save}",
looks like it is expecting a string or url. Since your save() is not a property, but you are using it in the place of a
property, the VF compiler is looking for a save property, thus the error.
So you actually have a deeper problem, you can get the URL of the page, but i'm pretty sure that is not how EXT works..
EXT does not know about Visualforce to Apex bindings and a simple url will probably not save things as you expect.
you may need to build a seperate save page that looks at it's parameters and constructs the object to save.
Hi Ron,
Thanks for the reply !!!
I got your point.
Plese let me know how can i pass values frm VF page to apex code?and how can i save it into db.
I am writing a function in button handler like this
buttons: [{text: 'Save',handler: function() { }}] });
but dont know what to write in that function.
Please suggest something.
thanks,
anuj
I believe that the only method is to employ < apex : ActionFunction
this allows you do delcare an Apex Method that will be called, and specifies the name of a javascript function that will call it.
so, now you can call apex from your page, the trick is to bind variables in the page so that they are ready and available to your controller ( Apex) when it gets called.
there are two ways, one is to bind them directly from your form fields using expressions. Not sure if you are doing thator not.
the other way is to bind your data ( collected from ext form) into hidden fields on the page that are bound to Apex Controller properties. This method requires setting up a hidden VF field using < apex : inputHidden and then in your save function you assign the EXT form fields into these hidden fields using document.getElementById().value = ext_form_value; Then calling the Action Function to send the data back to the controller.
Here is an example of the trick of binding hidden form fields to Controller properties: Captcha Article
look for this code:
<apex:inputhidden value="{!challenge}" id="challenge" /> <apex:inputhidden value="{!response}" id="response" /> <script type="text/javascript"> function captureResponse(ele) { document.getElementById('{!$Component.challenge}').value = document.getElementById('recaptcha_challenge_field').value; document.getElementById('{!$Component.response}').value = document.getElementById('recaptcha_response_field').value; } </script>
to see how a hidden input field can be specified and hold data from the form, this data is then available in your controller when your action function is invoked.
summary :
user fills in EXT form fields
your functions takes form fields and fills in hidden inputs
your function calls the action method specified using < apex: actionFunction
your controller actionfunction is run and can see the values placed in the hidden inputs
Hey thanks Ron,
I ahve used apexfunction and called my save method.
All is working fine !!!
thanks,
Anuj
Do you mind sharing the end result of your code after integrating the action function component? Thanks!
Hello, can you send me a simple eg to save updated data in ext js grid in salesforce...thank you