i'm new in ExtJS and Servlet.
I created a form with 2 fields usinf ExtJS :
var panel = Ext.create('Ext.form.Panel',
{
title: 'Personnal Data',
bodyPainting: 5,
width: 350,
region:'center',
url: 'save_form.php',
items:
[{
xtype: 'textfield',
fieldLabel: 'First Name ',
name: 'firstName'
},
{
xtype: 'textfield',
fieldLabel: 'Last Name ',
name: 'lastName'
}],
buttons:
[{
text: 'Submit',
handler: function()
{
var formData = this.up('form').getForm();
}
}]
});
But i don't know how to pass the value of the two fields to a servlet, by clicking on the button.
And how can i retrieve the data entered in the form, in the servlet ?
Thank you !
By default ExtJS Forms will send over the values in an "ajax" fashion and I believe it will be a "post". In your servlet (assuming you are posting to a servlet defined in your web.xml file) in your doPost (or doGet) methods, use the "request" variable in the method and do
request.getParameter("firstName")
and
request.getParameter("lastName")
.
Link to HttpServlet Definition (is the same for just about every java container).
Edit:
In your handler you need to add:
formData.submit();
Related
I am using JQuery Datatable Editor with Server Side processing using Java Servlet. Editing a row works fine but the updated data is not being shown in the table.
The edit is successful and I am able to see the JSON object for the updated row in the browser console.
var editor = new $.fn.dataTable.Editor( {
ajax: '/fda/intranet/translationNew/TranslationFileServ',
table: '#example',
idSrc: 'id',
fields: [
{ label: 'Id', name: 'id',type: "readonly" },
{ label: 'In Current File', name: 'inCurrentFile',type: "readonly" },
{ label: 'en_us', name: 'en_us',type: "readonly" },
{ label: 'translatedTo', name: 'translatedTo',type: "readonly" },
{ label: 'translation', name: 'translation', type: 'textarea' }
// etc
]
} );
I'm developing an application using Java Spring and ExtJS. The front end contains a panel with some fields including 3 comboboxes. To fill the comboboxes, I have defined a function which is fired on ComboBox afterRender. I have a store for each combobox (each combobox is filled from different tables).
The problem is when the page is rendered, the function is called 3 times but only the 3rd combo box is filled, or the JSON string returned contains only the value for last combo box. Actually the request for all 3 comboboxes are sent, but only the last request is processed.
Can anyone give me an idea how to handle this problem?
This is how i defied a combo box.
{
xtype: 'combobox',
x: 300,
y: 70,
store: 'TasksStr',
msgTarget: 'side',
displayField: 'label',
valueField: "value",
itemId: 'TaskRef',
fieldLabel: 'Task Ref',
name: 'taskRef'
} //Similarly 2 more combo boxes for Project and Status
This is the controller:
init: function(application) {
this.control({
"#TaskRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
},
"#ProjectRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
},
"#StatusRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
}
});
}
This is the store:
Ext.define('MainApp.store.TasksStr', {
extend: 'Ext.data.Store',
requires: [
'MainApp.model.Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'TasksStr',
model: 'MainApp.model.Model',
proxy: {
type: 'ajax',
url: 'http://localhost:8080/project/Tasks',
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
}
}
}, cfg)]);
}
});
This is the controller in java:
#RequestMapping(value="/{id}")
public String getElanLUT(#PathVariable("id") String Id, ModelMap model ){
System.out.println(Id);
try{
ABCDao.set(Id);
List<ABC> List = Dao.getABC();
model.addAttribute("data", List);
model.addAttribute("success", true);
model.addAttribute("count", List.size());
}catch(Exception e){
model.addAttribute("success", false);
e.printStackTrace();
}
return "jsonTemplate";
}
While running this code, the console for java prints all 3 Id's but the value returned is just the 3rd one.
Thanks in advance.!
You need to create store instances for all 3 combo boxes.
{
xtype: 'combobox',
x: 300,
y: 70,
store: Ext.create('MainApp.store.TasksStr'),
msgTarget: 'side',
displayField: 'label',
valueField: "value",
itemId: 'TaskRef',
fieldLabel: 'Task Ref',
name: 'taskRef'
}
I am using fusion chart in my application.I am taking json array from servlet to javascript.
Code :
var customerCountList=response.sharecountlist;
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
type: "column3d",
renderAt: "spraybookerCount-bar",
width: "500",
height: "300",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Revenue for last year",
"palettecolors": "e44a00",
"subCaption": "Harry's SuperMart",
"xAxisName": "refvalue",
"yAxisName": "['viewcount']",
"theme": "carbon"
},
"data"://here i want to use response.sharecountlist
}
});
revenueChart.render("spraybookerCount-bar");
});
here sharecountlist is sharecountlist==[{"viewcount":99,"refvalue":"Guest"},{"viewcount":4,"refvalue":"facebook"},{"viewcount":2,"refvalue":"friend"}].
sharecountlist is dynamic ,so how can I use this sharecountlist in place of data in above code. Please help me.
Thanks.
I have nameProperty set in the proxy of my store like this :
Code:
writer : {
type : 'json',
nameProperty : 'mapping',
root : 'PerVO'
}
And in my model , the mapping like this:
{
name : 'modules',
mapping : 'modules.collection',
defaultValue: []
},
This works fine when I call the CRUD operations on the store. Now I want to get the data in the format being sent to the server for other operations. The problem is that when I get the record from the store , the mapping is lost. So how can I useExt.data.writer.Json or some other api to generate the data EXACTLY as it would be generated while being sent to the server with mapping applied :
This is what the store sends for save (I need the data like this. Note : Difference is 'collection:')
"modules": {
"collection": {
"isActive": 1,
"metadata": {
"actionCodes": "",
"memos": ""
},
"moduleCode": "OM",
"moduleId": 250,
"moduleName": "Org Management",
"success": false,
"viewId": 0
}
},
This is what i get from the store when the record is looked up:
"modules": {
"isActive": 1,
"metadata": {
"actionCodes": "",
"memos": ""
},
"moduleCode": "OM",
"moduleId": 250,
"moduleName": "Org Management",
"success": false,
"viewId": 0
},
I need to get the data as sent by the store to server.
Thanks
Nohsib
Simply change the name in the mapping to the following
{
name : 'collection',
mapping : 'modules.collection',
defaultValue: []
}
The name config is the name that is used within the model. If you look at the data property of a model object, the name used in the mapping is used to store the value in the model. The name is same name that we use while retrieving data from a model object too. Ex. model.get(name);
From the api.
The name by which the field is referenced within the Model
I want to know how to iterate a JSON object using jQuery. My requirement is I am getting a list from a Java Servlet to the UI and I have to populate a combo box with the AJAX response.
The above tack I already did it using struts2 and jQuery. Now I am in the middle of nowhere, how to iterate the Java List back in JSP:
$("#XXX option").remove();
$.each(data.YYYList, function(index, item) {
$("#XXX").append($("<option></option>").text(item).val(item));
});
I have set the MIME type as response.setContentType("application/json");
Can any one please guide me how to achieve this. Please let me know if any other information is needed from me.
Based on the small amount of information given by Esh, here is an example that I created for the very function you listed. I have a JSON that I want to be used in multiple select boxes.
Fiddle
Example Json:
"yyyList": [
{
"Id": "1",
"Name": "aaaa "
}, {
"Id": "2",
"Name": "bbb "
}, {
"Id": "6",
"Name": "ccc "
}, {
"Id": "7",
"Name": "ddd "
} ]
$.ajax({
url: "URL",
//data: "",
type: "GET",
dataType: 'json',
success: function (data) {
$.each(data.YYYList, function () {
$('#state').append('<'option value='+this.Id+'>'+this.Name+'<'option>');
});
}
})
$('#state') ---> gives the same id for select tag in HTML
Please make correct it option syntax
Hope this helps.