Drag and drop file using ExtJS 6

Drag and drop file using ExtJS 6 - java

I currently have a webapp whose view is written using ExtJS 6: we currently use a Java applet, whose purpose is to allow user to Drag & Drop file from the File System to the Web Server.
My aim is to remove that applet, and to handle the Drag & Drop using ExtJS6: is that possible?
I tried to search for it in the documentation, but the only topic I found (https://docs.sencha.com/extjs/6.0/core_concepts/drag_drop.html) is about dragging and dropping framework elements.

The Window contained in this fiddle allow users to Drag & Drop File from the File System to the Web Server.
Source code:
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'size', 'file', 'status']
});
var postDocument = this.postDocument;
Ext.widget('container', {
renderTo: Ext.getBody(),
items: [{
multiSelect: true,
xtype: 'grid',
id: 'UploadGrid',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 2
}, {
header: 'Size',
dataIndex: 'size',
flex: 1,
renderer: Ext.util.Format.fileSize
}, {
header: 'Status',
dataIndex: 'status',
flex: 1,
renderer: this.rendererStatus
}],
viewConfig: {
emptyText: 'Drop Files Here',
deferEmptyText: false
},
store: store,
listeners: {
drop: {
element: 'el',
fn: 'drop'
},
dragstart: {
element: 'el',
fn: 'addDropZone'
},
dragenter: {
element: 'el',
fn: 'addDropZone'
},
dragover: {
element: 'el',
fn: 'addDropZone'
},
dragleave: {
element: 'el',
fn: 'removeDropZone'
},
dragexit: {
element: 'el',
fn: 'removeDropZone'
},
},
noop: function(e) {
e.stopEvent();
},
addDropZone: function(e) {
if (!e.browserEvent.dataTransfer || Ext.Array.from(e.browserEvent.dataTransfer.types).indexOf('Files') === -1) {
return;
}
e.stopEvent();
this.addCls('drag-over');
},
removeDropZone: function(e) {
var el = e.getTarget(),
thisEl = this.getEl();
e.stopEvent();
if (el === thisEl.dom) {
this.removeCls('drag-over');
return;
}
while (el !== thisEl.dom && el && el.parentNode) {
el = el.parentNode;
}
if (el !== thisEl.dom) {
this.removeCls('drag-over');
}
},
drop: function(e) {
e.stopEvent();
Ext.Array.forEach(Ext.Array.from(e.browserEvent.dataTransfer.files), function(file) {
store.add({
file: file,
name: file.name,
size: file.size,
status: 'Ready'
});
});
this.removeCls('drag-over');
},
tbar: [{
text: "Upload",
handler: function() {
for (var i = 0; i < store.data.items.length; i++) {
if (!(store.getData().getAt(i).data.status === "Uploaded")) {
store.getData().getAt(i).data.status = "Uploading";
store.getData().getAt(i).commit();
//replace "insert your upload url here" with the real url
postDocument("insert your upload url here", store, i);
}
}
}
}, {
text: "Erase EVERYTHING",
handler: function() {
store.reload();
}
}, {
text: "Erase uploaded files",
handler: function() {
for (var i = 0; i < store.data.items.length; i++) {
var record = store.getData().getAt(i);
if ((record.data.status === "Uploaded")) {
store.remove(record);
i--;
}
}
}
}, {
text: "Erase selected files",
handler: function() {
store.remove(Ext.getCmp('UploadGrid').getSelection());
}
}]
}],
padding: 20
});
},
rendererStatus: function(value, metaData, record, rowIndex, colIndex, store) {
var color = "grey";
if (value === "Ready") {
color = "blue";
} else if (value === "Uploading") {
color = "orange";
} else if (value === "Uploaded") {
color = "green";
} else if (value === "Error") {
color = "red";
}
metaData.tdStyle = 'color:' + color + ";";
return value;
},
postDocument: function(url, store, i) {
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("serverTimeDiff", 0);
xhr.open("POST", url, true);
fd.append('index', i);
fd.append('file', store.getData().getAt(i).data.file);
//xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.setRequestHeader("serverTimeDiff", 0);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//handle the answer, in order to detect any server side error
if (Ext.decode(xhr.responseText).success) {
store.getData().getAt(i).data.status = "Uploaded";
} else {
store.getData().getAt(i).data.status = "Error";
}
store.getData().getAt(i).commit();
} else if (xhr.readyState == 4 && xhr.status == 404) {
store.getData().getAt(i).data.status = "Error";
store.getData().getAt(i).commit();
}
};
// Initiate a multipart/form-data upload
xhr.send(fd);
}
});

For supporting drag & drop of files, you can use the following events:
drop, dragstart, dragenter, dragover, dragleave, dragexit.
A working example: https://fiddle.sencha.com/#fiddle/10v9
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'size', 'file']
});
Ext.widget('container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'grid',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 2
}, {
header: 'Size',
dataIndex: 'size',
flex: 1,
renderer: Ext.util.Format.fileSize
}],
viewConfig: {
emptyText: 'Drop Files Here',
deferEmptyText: false
},
store: store,
listeners: {
drop: {
element: 'el',
fn: 'drop'
},
dragstart: {
element: 'el',
fn: 'addDropZone'
},
dragenter: {
element: 'el',
fn: 'addDropZone'
},
dragover: {
element: 'el',
fn: 'addDropZone'
},
dragleave: {
element: 'el',
fn: 'removeDropZone'
},
dragexit: {
element: 'el',
fn: 'removeDropZone'
},
},
noop: function(e) {
e.stopEvent();
},
addDropZone: function(e) {
if (!e.browserEvent.dataTransfer || Ext.Array.from(e.browserEvent.dataTransfer.types).indexOf('Files') === -1) {
return;
}
e.stopEvent();
this.addCls('drag-over');
},
removeDropZone: function(e) {
var el = e.getTarget(),
thisEl = this.getEl();
e.stopEvent();
if (el === thisEl.dom) {
this.removeCls('drag-over');
return;
}
while (el !== thisEl.dom && el && el.parentNode) {
el = el.parentNode;
}
if (el !== thisEl.dom) {
this.removeCls('drag-over');
}
},
drop: function(e) {
e.stopEvent();
Ext.Array.forEach(Ext.Array.from(e.browserEvent.dataTransfer.files), function(file) {
store.add({
file: file,
name: file.name,
size: file.size
});
console.log(file);
});
this.removeCls('drag-over');
}
}],
padding: 20
});
}
});

I'm using a solution I've found in the sencha forum:
Ext.define('FileDropper', {
extend: 'Ext.plugin.Abstract',
alias: 'plugin.filedropper',
overCls: '',
init: function(c) {
this.target = c;
c.on({
element: 'el',
scope: this,
dragover: this.onDragOver,
dragenter: this.onDragEnter,
dragLeave: this.onDragLeave,
drop: this.onDrop
});
},
onDragOver: function(e) {
e.stopEvent();
},
onDragEnter: function(e) {
this.target.addCls(this.overCls);
e.stopEvent();
},
onDragLeave: function() {
this.target.removeCls(this.overCls);
},
onDrop: function(e) {
var callback = this.callback,
scope = this.scope || this;
e.stopEvent();
this.target.removeCls(this.overCls);
if (callback) {
callback.call(scope, e.browserEvent.dataTransfer.files);
}
}
});
Add the plugin to your view like this:
Ext.define('MyPanel', {
extend: 'Ext.Panel',
// ... your content
plugins: [{
ptype: 'filedroppper'
overCls: 'foo'
callback: function(files) {
// handle your upload
}
}]
});
You just have to handle the dropped files in the callback:
callback: function (files) {
var url = 'example.org'
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
for (var i = 0; i < files.length; i++) {
fd.append('files', files.item(i));
}
// Initiate a multipart/form-data upload
xhr.send(fd);
}
But if you use FormData() ensure you don't have to support old browsers.

Related

Foreach for nested list in Java

I have hero dataset i want to show list with all heroes are durable is true and agile is true from this dataset
{
"hero_code": 1,
"hero_name": "Blood Seeker",
"power": [
{
"skill": "Durable",
"status": true
},
{
"skill": "Agile",
"status": true
}
]
},
{
"hero_code": 2,
"hero_name": "Pudge",
"power": [
{
"skill": "Durable",
"status": true
},
{
"skill": "Agile",
"status": false
}
]
},
{
"hero_code": 3,
"hero_name": "Necrophos",
"power": [
{
"skill": "Durable",
"status": true
},
{
"skill": "Agile",
"status": true
}
]
}
this is what i do to achieve that
List<Hero> filteredList = new ArrayList<>;
data.getHeroList().forEach(hero-> {
hero.getpower().forEach(power-> {
if (power.getSkill().contains("Durable") || power.getSkill().contains("Agile")) {
if (power.getStatus() == true){
filteredList.add(hero);
}
}
});
});
but why my filtered list end up with 6 data instead of 2 ?
could anyone give me some insight ?
Thanks

Here's my attempt. Didn't check if it works.
List<Hero> filteredList = new ArrayList<>;
data.getHeroList().forEach(hero-> {
boolean hasDurable = false;
boolean hasAgile = false;
hero.getpower().forEach(power-> {
if (power.getSkill().contains("Durable") && power.getStatus()) {
hasDurable = true;
}
if (power.getSkill().contains("Agile") && power.getStatus()) {
hasAgile = true;
}
});
if(hasDurable && hasAgile) {
filteredList.add(hero);
}
});

You need to replace or condition with and (|| -> &) as per your question statement

How to access nested json in elasticsearch?

I have following json:
metadata: {
authors: [
],
links: [
{
href: "http://www.latimes.com/opinion/readersreact/la-le-1028-wednesday-meat-cancer-20151028-story.html#navtype=outfit",
value: "Why hot dogs and bacon aren't as dangerous as cigarettes"
},
{
href: "http://www.latimes.com/opinion/readersreact/la-le-1028-wednesday-porter-ranch-lausd-20151028-story.html#navtype=outfit",
value: "LAUSD school in Porter Ranch shows the importance of parent involvement"
},
{
href: "http://www.latimes.com/opinion/readersreact/la-le-1028-wednesday-billboards-20151028-story.html#navtype=outfit",
value: "Maine and Vermont show L.A. what life is like without billboards"
},
{
href: "http://www.latimes.com/opinion/readersreact/la-le-1028-wednesday-broad-beach-20151028-story.html#navtype=outfit",
value: "Malibu beach-front homeowners, meet King Canute"
}
]
},
I would like to search only for metadata.links.value in elasticsearch:
requestBuilder.setQuery(QueryBuilders.matchQuery("metadata.links.value", "Malibu"));
But unfortunately this doesn't work. I get 0 hits when i enter a value.
What am i doing wrong?
Update:
Here is my complete code
public List<ArticleExtraction> search(String searchQuery, SearchProvider searchProvider) {
TransportClient client = searchProvider.getClient();
Map<String, String> query = new HashMap<>();
ArrayList<String> singleQuery = new ArrayList<>();
if (searchQuery.length() > 0 && searchQuery.contains(":")) {
String[] queries = searchQuery.split(",");
for (String q : queries) {
String[] jsonQuery = q.split(":");
query.put(jsonQuery[0], jsonQuery[1]);
}
} else {
String[] queries = searchQuery.split(",");
for (String q : queries) {
singleQuery.add(q);
}
}
SearchRequestBuilder requestBuilder = client.prepareSearch("crawlbot")
.setTypes("item")
.setSize(100);
for (Map.Entry<String, String> e : query.entrySet()) {
requestBuilder.setQuery(QueryBuilders.matchQuery(e.getKey(), e.getValue()));
}
for (String q : singleQuery) {
requestBuilder.setQuery(QueryBuilders.queryStringQuery(q));
}
SearchResponse response = requestBuilder.execute().actionGet();
List<ArticleExtraction> articles = new ArrayList<>();
SearchHit[] hits = response.getHits().getHits();
for (SearchHit hit : hits) {
String sourceAsString = hit.getSourceAsString();
if (sourceAsString != null) {
JsonObject json = new JsonParser().parse(sourceAsString).getAsJsonObject();
if (json.has("article")) {
Gson gson = new Gson();
articles.add(gson.fromJson(json.get("article"), ArticleExtraction.class));
}
}
}
return articles;
Explanation:
The input of the searchQuery could be something like:
metadata.links.value:malibu
Or if it is a singlequery: malibu
I made some code so both queries can get accepted
Mappings (sry if this gets big)
mappings: {
item: {
properties: {
article: {
properties: {
description: {
type: "string"
},
description_html: {
type: "string"
},
entities: {
properties: {
count: {
type: "long"
},
meta: {
type: "object"
},
name: {
type: "string"
},
type: {
type: "string"
}
}
},
favicon_url: {
type: "string"
},
images: {
properties: {
colors: {
properties: {
color: {
type: "long"
}
}
},
entropy: {
type: "double"
},
height: {
type: "long"
},
url: {
type: "string"
},
width: {
type: "long"
}
}
},
keywords: {
properties: {
label: {
type: "string"
},
score: {
type: "double"
}
}
},
language: {
type: "string"
},
metadata: {
properties: {
authors: {
properties: {
name: {
type: "string"
}
}
},
links: {
properties: {
href: {
type: "string"
},
value: {
type: "string"
}
}
},
twitter: {
type: "string"
}
}
},
provider_display: {
type: "string"
},
provider_name: {
type: "string"
},
provider_url: {
type: "string"
},
published: {
type: "string"
},
published_long: {
type: "long"
},
summary: {
type: "string"
},
title: {
type: "string"
},
url: {
type: "string"
}
}
},
id: {
properties: {
_inc: {
type: "long"
},
_machine: {
type: "long"
},
_new: {
type: "boolean"
},
_time: {
type: "long"
}
}
},
job: {
properties: {
api: {
type: "long"
},
crawl_depth: {
type: "long"
},
max_pages: {
type: "long"
},
name: {
type: "string"
},
status: {
type: "long"
},
url: {
type: "string"
},
userid: {
type: "long"
}
}
},
query: {
properties: {
match: {
properties: {
name: {
type: "string"
}
}
}
}
}
}
}
},

metadata is contained within the article root object.
Therefore your query should be constructed as:
QueryBuilders.matchQuery("article.metadata.links.value"‌, "Malibu");

Change status using Ajax in Java

I need to change status of my event in data base.For this I create button with drop down menu with all status that can be. When I push this button and choose some variant it is changing but in my event fields owner, city, address became empty. What is wrong??
function html_element(aData, status) {
var parent_element = $("<a/>",
{
"href" : "#"
}).click(aData, function(e) {
aData.status = status;
e.preventDefault();
$.ajax({
url : 'event-update',
dataType : 'json',
beforeSend : function() {
},
contentType : "application/json",
"type" : "POST",
data : JSON.stringify(aData),
success : function(response) {
$('td:eq(6)',nRow).html(response.status);
}
});
});
return parent_element;
};
var button = $(
"<button/>",
{
text : "Action",
"type" : "button",
"data-toggle" : "dropdown",
"class" : "btn btn-default dropdown-toggle",
});
function form_element(aData) {
var approve = html_element(aData, "APPROVED");
var pending = html_element(aData, "PENDING");
var refuse = html_element(aData, "REFUSED");
approve.html("Approve");
pending.html("Pending");
refuse.html("Refuse");
var final_element = div.append(button);
final_element.append(ul.append(li
.append(approve)
.append(pending)
.append(refuse)));
return final_element;
}
row = $('td:eq(7)', nRow).html(form_element(aData));
function change_request_status(id, element) {
$.ajax({
url : 'response-event',
beforeSend : function() {
console.log('start');
element.style.display = "none";
loader.insertAfter(element);
},
data : {
"status" : status,
"address": address,
"owner" : owner,
cityId : city
},
success : function(response) {
console.log(data);
element.nextSibling.style.display = "none";
if (response == "Request send") {
successRequest.insertAfter(element);
} else {
failRequest.insertAfter(element);
}
},
});
}

EXT JS 5/Spring MVC : How to bind ext js form to java object with spring mvc

I want to bind me ext js form with an object Java.
For now I can just bind each field individually like that :
My Form :
Ext.define('MyApp.view.login.Login', {
extend: 'Ext.window.Window',
alias: 'widget.login',
requires : ['Ext.form.Panel', 'Ext.layout.container.Fit'],
autoShow: true,
height: 200,
width: 400,
layout: 'fit',
iconCls: 'key',
title: "Login",
closeAction: 'hide',
closable: false,
draggable: false,
resizable: false,
items: [
{
xtype: 'form',
frame: false,
bodyPadding: 15,
layout: 'anchor',
defaults: {
anchor: '100%',
labelWidth: 100
},
defaultType: 'textfield',
items: [
{
name: 'user',
fieldLabel: "Login ",
allowBlank: false,
msgTarget: 'under',
emptyText: 'Login',
maxLength: 25
},
{
inputType: 'password',
name: 'password',
fieldLabel: "Password",
emptyText:'Password',
allowBlank: false,
msgTarget: 'under',
maxLength: 15,
enableKeyEvents: true,
id: 'login-password'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
itemId: 'cancel',
text: 'Cancel'
},
{
xtype: 'button',
itemId: 'submit',
formBind: true,
text: "Submit"
}
]
}
]
}
]
});
A part of my submit method :
loginForm.submit({
method : 'POST',
url: '/myapp/login/login.sp',
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
My method of my Java Controller for login :
#RequestMapping(value="login/login", method= RequestMethod.POST)
public void checkConnection(#RequestParam(value="user", required = true) String user, #RequestParam(value="password", required = true) String password) {
logger.info("LOGIN !!!");
}
And I want something like this :
#RequestMapping(value="login/login", method= RequestMethod.POST)
public void checkConnection(#Annotation LoginModel) {
logger.info("LOGIN !!!");
}
And my LoginModel would be like this :
public class LoginModel {
/** User */
private String user;
/** Password */
private String password;
}
regards.

I believe #ModelAttribute is what you need. It tells Spring to retrieve the parameters from the model.
#RequestMapping(value="login/login", method= RequestMethod.POST)
public void checkConnection(#ModelAttribute LoginModel loginModel) {
logger.info("LOGIN !!!");
}

Message alert box in servlet

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String action = request.getParameter("action");
try {
// System.out.println("in mail servlet");
if (action.equals("show")) {
List<EmailSetup> emailSetup_List = emailSetup_lf.findAll();
JSONObject returnJSON = new JSONObject();
JSONArray emailSetup_Array = ListToJSONArray(emailSetup_List);
returnJSON.put("success", true);
returnJSON.put("rows", emailSetup_Array);
// System.out.println(returnJSON.toJSONString());
sendJSONResponse(returnJSON, response);
} else if (action.equals("add")) {
if( emailSetup_lf.count() >= 1 ){
sendJSONResponseSimple("fail", response);
return;
}
// all data is sent to the servelet as strings
// when creating cast to proper DB type
String smtp_host = request.getParameter("SMTP_HOST");
String smtp_user = request.getParameter("SMTP_USER");
String smtp_pwd = request.getParameter("SMTP_PWD");
String smtp_port = request.getParameter("SMTP_PORT");
String smtp_from = request.getParameter("SMTP_FROM");
if ((!smtp_host.equals(""))
&& (!smtp_user.equals(""))
&& (!smtp_pwd.equals(""))
&& (!smtp_port.equals(""))
&& (!smtp_from.equals(""))) {
EmailSetup new_email_setup_record = new EmailSetup();
new_email_setup_record.setSmtpHost(smtp_host);
new_email_setup_record.setSmtpUser(smtp_user);
new_email_setup_record.setSmtpPwd(smtp_pwd);
new_email_setup_record.setSmtpPort(smtp_port);
new_email_setup_record.setSmtpFrom(smtp_from);
emailSetup_lf.create(new_email_setup_record);
// LOG
systemLog("Create (MailServerSevlet)", "Created Mail Server: " + new_email_setup_record.toString(), request);
}
} else if (action.equals("edit")) {
// all data is sent to the servelet as strings
// when creating cast to proper DB type
String e_id = request.getParameter("E_ID");
String smtp_host = request.getParameter("SMTP_HOST");
String smtp_user = request.getParameter("SMTP_USER");
String smtp_pwd = request.getParameter("SMTP_PWD");
String smtp_port = request.getParameter("SMTP_PORT");
String smtp_from = request.getParameter("SMTP_FROM");
if ((!smtp_host.equals(""))
&& (!smtp_user.equals(""))
&& (!smtp_pwd.equals(""))
&& (!smtp_port.equals(""))
&& (!smtp_from.equals(""))) {
EmailSetup email_setup_record = emailSetup_lf.find(new BigDecimal(e_id));
email_setup_record.setSmtpHost(smtp_host);
email_setup_record.setSmtpUser(smtp_user);
email_setup_record.setSmtpPwd(smtp_pwd);
email_setup_record.setSmtpPort(smtp_port);
email_setup_record.setSmtpFrom(smtp_from);
// CALL EDIT!
emailSetup_lf.edit(email_setup_record);
// LOG
systemLog("Update (MailServerSevlet)", "Updated Mail Server: " + email_setup_record.toString(), request);
} // systemLog
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
* #param request servlet request
* #param response servlet response
* #throws ServletException if a servlet-specific error occurs
* #throws IOException if an I/O error occurs
*/
#Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP <code>POST</code> method.
* #param request servlet request
* #param response servlet response
* #throws ServletException if a servlet-specific error occurs
* #throws IOException if an I/O error occurs
*/
#Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
* #return a String containing servlet description
*/
#Override
public String getServletInfo() {
return "Short Description";
}// </editor-fold>
}
I have now tried using a JSON simple response, but it keeps calling the wrong error message
var db_drivers_Store = new Ext.data.JsonStore({
//url: '../DataBaseDriversServelet_show',
url: '../DataBaseDriversServelet?action=show',
root: 'rows',
idProperty: 'ID',
fields: [{
name: 'ID',
type: 'int'
},{
name: 'TYPE',
type: 'string'
},{
name: 'NAME',
type: 'string'
},{
name: 'ADDRESS',
type: 'string'
},{
name: 'PORT',
type: 'int'
}]
});
// ADD
var add_db_driver_Window = new Ext.Window({
title: 'Add DB Driver',
width: 400,
height:200,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
border: true,
closable:false,
modal:true,
shim: false,
frame: true,
// forceLayout: true,
items: add_db_driver_FormPanel,
buttons: [{
text: 'Submit',
handler: function(){
if( add_db_driver_FormPanel.getForm().isValid()){
add_db_driver_FormPanel.getForm().submit({
success: function(){
add_db_driver_Window.hide();
db_drivers_Store.load();
add_db_driver_FormPanel.getForm().reset();
},
failure: function(){}
});
}else{
Ext.MessageBox.alert('Database Drivers', 'Could not Submit. Make sure all fields are valid.');
}
} // submit handler
},{
text: 'Cancel',
handler: function(){
add_db_driver_Window.hide();
add_db_driver_FormPanel.getForm().reset();
} // cancel handler
}]
});
// DBDRIVER - ADD POP UP UI (END)
// DBDRIVER - EDIT POP UP UI (START)
var edit_db_driver_FormPanel = new Ext.FormPanel({
url: '../DataBaseDriversServelet?action=edit',
// url:'../DataBaseDriversServelet_edit',
labelWidth: 125,
frame: true,
bodyStyle:'padding:5px 5px 0',
defaultType: 'textfield',
id: 'edit_db_driver_FormPanel',
items: [
{
fieldLabel: 'Type',
id: 'TYPE_edit_db_driver_FormPanel',
allowBlank: false,
name: 'TYPE',
width:190
},{
fieldLabel: 'Name',
id: 'NAME_edit_db_driver_FormPanel',
allowBlank: false,
name: 'NAME',
width:190
},{
fieldLabel: 'Address',
id: 'ADDRESS_edit_db_driver_FormPanel',
allowBlank: false,
name: 'ADDRESS',
width:190
},new Ext.form.NumberField ({
fieldLabel: 'Port',
id: 'PORT_edit_db_driver_FormPanel',
allowBlank: false,
name: 'PORT',
width:190
})
]
});
var recordToEdit;
var edit_db_driver_Window = new Ext.Window({
title: 'Edit DB Driver',
width: 400,
height:200,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
border: false,
closable:false,
modal:true,
shim: false,
frame: true,
items: edit_db_driver_FormPanel,
buttons: [{
text: 'Submit',
handler: function(){
var db_driver_id = recordToEdit.get("ID");
if(edit_db_driver_FormPanel.getForm().isValid()){
edit_db_driver_FormPanel.getForm().submit({
// url:'../DataBaseDriversServelet_edit',
url: '../DataBaseDriversServelet?action=edit',
waitMsg:'Saving Data...',
params:{
ID: db_driver_id
},
success: function(){
edit_db_driver_Window.hide();
db_drivers_Store.load();
},
failure: function(){}
});
}else{
Ext.MessageBox.alert('Database Drivers', 'Could not Submit. Make sure all fields are valid.');
}
} // submit handler
},{
text: 'Cancel',
handler: function(){
edit_db_driver_Window.hide();
edit_db_driver_FormPanel.getForm().reset();
} // cancel handler
}]
});
// DBDRIVER - EDIT POP UP UI (END)
// DBDRIVER - POP UP UI (END)
var db_driver_btn_panel = [{
id: 'db_driver_add_btn',
text: 'Add',
iconCls: 'adddb',
handler: (function(){
add_db_driver_Window.show();
}) // add handler function
}, {
text: 'Edit',
iconCls: 'edit',
handler: (function(){
var edit_selModel = Ext.getCmp("db_drivers_UPanel").getSelectionModel();
var selRecord;
if(edit_selModel.getSelected()== undefined){
Ext.message.msg('Notice','Select Database Driver first');
}else{
selRecord = edit_selModel.getSelected();
recordToEdit = selRecord;
Ext.getCmp("TYPE_edit_db_driver_FormPanel").setValue(recordToEdit.get("TYPE"));
Ext.getCmp("NAME_edit_db_driver_FormPanel").setValue(recordToEdit.get("NAME"));
Ext.getCmp("ADDRESS_edit_db_driver_FormPanel").setValue(recordToEdit.get("ADDRESS"));
Ext.getCmp("PORT_edit_db_driver_FormPanel").setValue(recordToEdit.get("PORT"));
edit_db_driver_Window.show();
} // end if
}) // edit handler function
},{
text: 'Delete',
iconCls: 'delete',
handler: function() {
//get currently selected record
var rec = Ext.getCmp('db_drivers_UPanel').getSelectionModel().getSelected();
//rec will be undefined if nothing is selected so check for this.
if(rec){
//open delete confirmation box
Ext.MessageBox.confirm('Delete Confirmation', 'Delete Driver?', function(btn)
{//check if the user selected 'yes'
if (btn == 'yes'){
//create ajax request to send delete requesdt to the servlete
Ext.Ajax.request({
//specify servlet url
//url : '../DataBaseDriversServelet_delete' ,
url: '../DataBaseDriversServelet?action=delete',
params : {
//D_ID = driver id, send through as param to the servlet
'D_ID': rec.data.ID
},
//use post
method: 'POST',
//method will run if server returns success message
success: function ( result, request ) {
// Ext.MessageBox.alert('Success','Post Deleted');
Ext.message.msg('Driver - Removed.', 'Driver has successfully been removed!');
//Ext.message.msg('Success','Driver Deleted');
db_drivers_Store.load();
},
//method will run if server returns failure message
failure: function ( result, request) {
Ext.MessageBox.alert('Failure','Driver Deletion Failed');
}
});//ajax request
}//if btn
});//confirm box
}else
{
Ext.message.msg('Notice','Select driver first');
}
} // function
}];
var db_drivers_UPanel = new Ext.Panel({
id: 'databaseDriversUtil-form',
labelAlign: 'left',
bodyStyle:'padding:5px',
frame: true,
boder: true,
width: 450,
title:"Database Drivers",
items:[{
xtype: 'grid',
id: 'db_drivers_UPanel',
tbar: db_driver_btn_panel,
ds: db_drivers_Store, // ds = datastore
cm: db_drivers_ColModel, // cm = column model
autoScroll:true,
height:220
}]
});
return db_drivers_UPanel;
}
// Database Drivers UI (End)
// Database Setup UI (Start)
Ext.Dyno.databaseUtil.databaseSetupUtilPanel = function(){
var db_setup_Store = new Ext.data.JsonStore({
//url: '../DataBaseSetupServelet',
url: '../DataBaseSetupServelet?action=show',
root: 'rows',
idProperty: 'ID',
fields: [{
name: 'ID',
type: 'int'
},{
name: 'TYPE',
type: 'string'
},{
name: 'DRIVERNAME',
type: 'string'
},{
name: 'CONNECTSTART',
type: 'string'
},{
name: 'DEFAULTPORT',
type: 'int'
}]
});
// this displays the data in the gird
db_setup_Store.load();
var db_setup_ColModel = new Ext.grid.ColumnModel([
{
header: "ID",
width: 70,
sortable: true,
locked:false,
hidden: true,
dataIndex: 'ID'
},{
header: "Type",
width: 70,
sortable: true,
dataIndex: 'TYPE'
},{
header: "Driver Name",
width: 150,
sortable: true,
dataIndex: 'DRIVERNAME'
},{
header: "Connect Start",
width: 100,
sortable: true,
dataIndex: 'CONNECTSTART'
},{
header: "Default Port",
width: 80,
sortable: true ,
dataIndex: 'DEFAULTPORT'
}
]);
// DBTYPE - POP UP UI (START)
// DBTYPE - ADD POP UP UI (START)
var add_db_type_FormPanel = new Ext.FormPanel({
//url:'../DataBaseSetupServelet_add',
url: '../DataBaseSetupServelet?action=add',
labelWidth: 125,
frame: true,
bodyStyle:'padding:5px 5px 0',
defaultType: 'textfield',
items: [
{
fieldLabel: 'Type',
name: 'TYPE',
allowBlank: false,
width:190
},{
fieldLabel: 'Driver Name',
name: 'DRIVERNAME',
allowBlank: false,
width:190
},{
fieldLabel: 'Connect Start',
name: 'CONNECTSTART',
allowBlank: false,
width:190
},new Ext.form.NumberField ({
fieldLabel: 'Default Port',
name: 'DEFAULTPORT',
allowBlank: false,
width:190
})
]
});
// ADD
var add_db_type_Window = new Ext.Window({
title: 'Add DB Type',
width: 400,
height:200,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
border: false,
//get currently selected record
var rec = Ext.getCmp('db_setup_UPanel').getSelectionModel().getSelected();
//rec will be undefined if nothing is selected so check for this.
if(rec){
//open delete confirmation box
Ext.MessageBox.confirm('Delete Confirmation', 'Delete Setup?', function(btn)
{//check if the user selected 'yes'
if (btn == 'yes'){
//create ajax request to send delete requesdt to the servlete
Ext.Ajax.request({
//specify servlet url
// url : '../DataBaseSetupServelet_delete' ,
url: '../DataBaseSetupServelet?action=delete',
params : {
//D_ID = driver id, send through as param to the servlet
'ID': rec.data.ID
},
//use post
method: 'POST',
//method will run if server returns success message
success: function ( result, request ) {
//Ext.MessageBox.alert('Success','Post Deleted');
//Ext.message.msg('Success','Setup Deleted');
Ext.message.msg('Setup - Removed.', 'Setup has successfully been removed!');
db_setup_Store.load();
},
//method will run if server returns failure message
failure: function ( result, request) {
Ext.MessageBox.alert('Failure','Setup Deletion Failed');
}
});//ajax request
}//if btn
});//confirm box
}else
{
Ext.message.msg('Notice','Select setup first');
}
} // function
}];
var db_setup_UPanel = new Ext.Panel({
id: 'databaseSetupUtil-form',
labelAlign: 'left',
bodyStyle:'padding:5px',
frame: true,
boder: true,
width: 450,
title:"Database Setup",
items:[{
xtype: 'grid',
id:'db_setup_UPanel',
tbar: db_setup_btn_panel,
ds: db_setup_Store, // ds = datastore
cm: db_setup_ColModel, // cm = column model
autoScroll:true,
height:220
}]
});
return db_setup_UPanel;
}
var cat_config_Store = new Ext.data.JsonStore({
url: '../configureCatogoriesServelet?action=show',
root: 'rows',
idProperty: 'C_ID',
fields: [{
name: 'C_ID',
type: 'int'
},{
name: 'C_NAME',
type: 'string'
},{
name: 'C_DESCRIPTION',
type: 'string'
}]
});
// this displays the data in the gird
cat_config_Store.load();
var categoryGridTable = new Ext.grid.GridPanel({
region:'center',
//columnWidth: 0.70,
layout: 'fit',
ds: cat_config_Store,
//cm: colModel,
columns:[
{
header: "ID",
width: 70,
sortable: true,
locked:false,
hidden: true,
dataIndex: 'C_ID'
}, {
header: "Name",
width: 100,
sortable: true,
dataIndex: 'C_NAME'
}, {
header: "Description",
width: 300,
sortable: true,
dataIndex: 'C_DESCRIPTION'
}
],
frame:true,
height:250,
// width:500,
border:false
});
var cat_config_FormPanel = new Ext.FormPanel({
url: '../configureCatogoriesServelet',
labelWidth: 125,
frame: true,
bodyStyle:'padding:5px 5px 0',
defaultType: 'textfield',
items: [
{
fieldLabel: 'Name',
name: 'C_NAME',
allowBlank: false,
maxLength: 256, // for validation
width:190
},{
fieldLabel: 'Description',
name: 'C_DESCRIPTION',
allowBlank: false,
maxLength: 256, // for validation
width:190
}] // items
}); // cat_config_FormPanel
var cat_config_Window = new Ext.Window({
//title: 'Add Category',
width: 400,
height:200,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
border: false,
closable:false,
modal:true,
shim: false,
frame: true,
items: cat_config_FormPanel,
buttons: [{
text: 'Submit',
handler: function(){
var form = cat_config_FormPanel.getForm();
if(form.isValid()){
form.submit({
url: '../configureCatogoriesServelet',
waitMsg:'Saving Data...',
params:{
action:categoryAddEditAction,
ID:chosenCategoryIdToEdit
},
success: function(){
cat_config_Window.hide();
cat_config_Store.load();
form.reset();
},
failure: function(){}
});
}else{
Ext.MessageBox.alert('Database Drivers', 'Could not Submit. Make sure all fields are valid.');
}
} // submit handler
},{
text: 'Cancel',
handler: function(){
cat_config_Window.hide();
cat_config_FormPanel.getForm().reset();
} // cancel handler
}]
});
var cat_conf_btn_panel = [{
text: 'Add',
iconCls: 'adddb',
handler: (function(){
cat_config_FormPanel.getForm().reset();
categoryAddEditAction = 'add';
cat_config_Window.setTitle('Add Category');
cat_config_Window.show();
}) // add handler function
},{
text: 'Edit',
iconCls: 'edit',
handler: function(){
var selModel = categoryGridTable.getSelectionModel();
var selRecord;
//updatepassword=true;
if(selModel.getSelected()== undefined){
Ext.MessageBox.alert('Notice','Select Catogry first');
}else{
selRecord = selModel.getSelected();
chosenCategoryIdToEdit = selRecord.get("C_ID");
categoryAddEditAction = "edit";
cat_config_Window.setTitle('Edit Category Configuration');
cat_config_Window.show();
cat_config_Window.hide();
cat_config_FormPanel.getForm().findField("C_NAME").setValue(selRecord.get("C_NAME"));
cat_config_FormPanel.getForm().findField("C_DESCRIPTION").setValue(selRecord.get("C_DESCRIPTION"));
cat_config_FormPanel.getForm().loadRecord(selRecord);
cat_config_Window.show();
}
} // edit handler function
},{
text: 'Delete',
iconCls: 'delete',
handler: function() {
var selModel = categoryGridTable.getSelectionModel();
var selRecord;
if(selModel.getSelected()== undefined){
Ext.MessageBox.alert('Notice','Select category first');
}else{
selRecord = selModel.getSelected();
var recordToDelete = selRecord;
var add_app_Window = new Ext.Window({
//title: 'Add Application',
width: 700,
height:250,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
border: false,
closable:false,
modal:true,
shim: false,
frame: true,
items: applicationForm,
buttons: [{
text: 'Submit',
handler: function(){
if( applicationForm.getForm().isValid()){
applicationForm.getForm().submit({
url: '../ApplicationServelet',
waitMsg:'Saving Data...',
params:{
action:schedulerAppAddEditAction,
ID:chosenSchedulerAppIdToEdit
},
success: function(){
add_app_Window.hide();
AppList_Store.load();
applicationForm.getForm().reset();
},
},
fail: function(){
Ext.MessageBox.alert('Email Server', 'Multiple Mail Server is not Allowed.');
},
failure: function(result, request){
var obj = Ext.util.JSON.decode(request.response.responseText);
Ext.MessageBox.alert('Add Application Failed.', obj.reason);
}
});
}else{
Ext.MessageBox.alert('Applications', 'Could not Submit. Make sure all fields are valid.');
}
This is the javascript part which contains all the error messages , which contains all the error messages, the message i want to call if the Fail message, which says that Multiple Mail Server is not allowed

That's not valid HTML or Javascript. You need to remove the script from inside the opening <body> tag and place it inside <script> tags of its own.
out.println ("<html><body><script>alert('Hello World!');</script></body></html>");
You should however avoid printing out HTML from a Servlet and consider redirecting to an error.jsp instead. This would also allow you to collate all the validation errors and display them to the user in one go.

Try this
out.println("<html><body onload=\"alert('Hello World')\"></body></html>");

We Keep Coding

Java is a programming language and computing platform first released by Sun Microsystems in 1995.

Drag and drop file using ExtJS 6 - java

Related

Foreach for nested list in Java

How to access nested json in elasticsearch?

Change status using Ajax in Java

EXT JS 5/Spring MVC : How to bind ext js form to java object with spring mvc

Message alert box in servlet

Categories

Resources