Develop Reference

ExtJS 4 - How to upload a file using a menu item

I want to add a menu item File Upload button that takes in data from a CSV file and parses it out. I have a form as a menu item in a menu.js file that is supposed to call a method in the main controller.
However I get the following errorlistener.fireFn is undefined error, telling me that the onAttachmentsAddClick function is not defined.
How do I call a function after a file's been submitted?
Code from menu
...
}, {
xtype: 'form',
itemId: 'item_formAdd',
border: false,
items: [{
buttonText: 'File Upload',
xtype: 'fileuploadfield',
name: 'excelFile',
buttonOnly: true,
hideLabel: true,
allowBlank: false,
clearOnSubmit: false,
listeners: {
'change': 'onAttachmentsAddClick'
},
tooltip: 'Upload Excel Template'
}]
}]
Code from Controller
...
onAttachmentsAddClick: function (button) {
alert('onAttachmentsAddClick');
},
...

You should use a method called submit on form after submit the file to upload.
form.submit({
url: 'http://example.xyz/csv-upload.php',
waitMsg: 'Uploading your csv...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});

Why is my Bootstrap-Editable with Bootstrap-tables not working?

I am creating a table which needs editable fields..
This jquery element is appended to the page:
var container = $('#up-modal .modal-body');
var table = $('<table></table>');
table.attr('id','up-table');
table.attr('style','width:auto;');
table.attr('data-toggle', 'table');
table.attr('data-search', 'true');
table.attr('data-maintain-selected', 'true');
table.attr('data-pagination','true');
table.attr('data-page-size',3);
container.append(table);
following this, the bootstrap table function is called
$("#up-table").bootstrapTable({
columns:[
{
field: 'id',
title: 'ID',
align: 'center'
},
{
field: 'Permission',
title: 'Permission',
searchable: true
},
{
field: 'Extended',
name: 'Extended',
title: 'Properties',
editable:{
type: 'text',
pk: 1,
title: 'Modify Properties',
name: 'Extended',
validate: function(value){
value = $.trim(value);
try{
JSON.parse(value);
}catch(e){
return 'Invalid json provided for properties';
}
}
}
},
{
field: 'Access',
title: 'Access',
checkbox:true
}
],
data: tableData
});
The table is drawn correctly, but the fields are not editable. I can call $('.editable').editable(options) after the table is built and that works fine, but that stops working when pagination is involved.
I am using this example as a reference https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html
oh, and I should mention the proper scripts and css files are locally hosted and being included correctly in my html.
Library quick links:
https://vitalets.github.io/bootstrap-editable/
http://bootstrap-table.wenzhixin.net.cn/

Woops. As it turns out, there are compatibility issues with x-editable, bootstrap 3 and bootstrap-tables.
To fix this all I had to do was include the bootstrap-editable-tables extension
https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable

Use ExtJS 6 'filefield' to get full path (no fakepath) to upload shapefile on OpenLayers 3

I'm building an application which use this javascript plugin to upload a ZIP file and convert the shapefile in it to GeoJSON, so that it can be added to a map.
My application use ExtJS 6.0 and I can't seem to find how to use the "filefield" button to give the path of the zipped file to the plugin. The problem is that the filefield gives only a fakepath (I think it's for some kind of user-protection). Therefore, I can't use the path given by my form as input for the plugin (I'm getting a 404 error because it use C:\fakepath\file.zip as input). If I give manually the path, everything works fine....
Here's the code of my function:
var getShp = function getShp(){
Ext.create('Ext.window.Window', {
title: 'Upload new ESRI shapefile',
width: 400,
items: {
xtype: 'form',
id: 'urlFormId',
items: [{
xtype: 'filefield',
name: 'shp',
fieldLabel: 'Shapefile (*.shp)',
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select shapefile...'
}],
buttons: [{
text: 'Add layer',
handler: function() {
var form = Ext.getCmp('urlFormId').getForm();
var shpUrl = form.findField('shp').getValue();
var vectorSource = new ol.source.Vector();
loadshp({
url: shpUrl,
encoding: 'UTF-9',
EPSG: '4326'
}, function(data) {
shpUp = new ol.layer.Vector({
name: 'Test world',
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(data)
})
})
olMap.addLayer(shpUp);
});
}
}]
}
}).show();
}

ExtJs HtmlEditor image upload?

I am using ExtJs4.2.1 as the frontend and asp.net mvc 4 as the backend. My customer has the following requirements:
They wanna copy bunch of stuff from a document(like .docx file etc.) directly into the extjs's htmleditor. So, there will inevitably be mixtures of rich texts and images inside the editor, which is a problem because the html editor of extjs can not upload picture directly. So, I wonder if there is an solution for this? I googled a lot, and some of the answers will involve to add a extra button for the editor and pop up an add File panel to let the customer insert image. I think it is little bit tricky. Could I filter out the picture in the editor and directly upload it without popping up another selection panel? Anyway, is there a more elegant way to do things like this?
Any help relating this topic will be really appreciated.

Although I have not tried this you could use TinyMCE which has a plugin that claims to do this http://www.tinymce.com/wiki.php/Plugin:paste
There is an ExtJS component for TinyMCE https://www.sencha.com/forum/showthread.php?198699-Ext.ux.form.TinyMCETextArea-a-text-area-with-integrated-TinyMCE-WYSIWYG-Editor.

ExtJs HtmlEditor image upload
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'Test panel',
renderTo: Ext.getBody(),
items: [{
xtype: 'htmleditor',
itemId: 'txtBody',
fieldLabel: 'Body',
enableFormat: false,
enableFont: false,
enableFontSize: false,
enableColors: false,
allowBlank: false,
listeners: {
render: function(editor) {
editor.getToolbar().add({
xtype: 'button',
text: 'fileIUpload',
handler: function() {
new Ext.Window({
title: 'Image Upload',
closable: true,
itemId: 'wndImageUpload',
height: 120,
width: 300,
items: [{
xtype: 'form',
itemId: 'frmFileUpload',
fileUpload: true,
items: [{
xtype: 'fileuploadfield',
fieldLabel: 'Select Image',
name: 'Upload',
itemId: 'imgFileUploadField',
labelWidth: '90',
margin: '20 0 0 0'
},
{
xtype: 'button',
text: 'Submit',
scope: this,
margin: '15 0 0 200',
//handler: function (config) {
// var ns = config.ns;
// var form = ns.frmFileUpload.getForm();
// form.submit({
// url: 'Admin/UploadEmailTemplateImage',
// success: function (fp, result) {
// var imagePath = '/Upload/EmailTemplateImage/' + result.result.data);
// var imageHeight = result.result.imageHeight;
// var imageWidth = result.result.imageWidth;
// var html = '<img src="' + imagePath + '" Height= "' + imageHeight + '" Width= "' + imageWidth + '"/>';
// ns.txtBody.setValue(html);
// ns.wndImageUpload.hide();
// },
// failure: function (fp, result) {
// Ext.Msg.alert(t('Error'), result.result.message);
// }
// });
//}
},
]
}]
}).show();
}
});
}
}
}
]
}).show();
});

Change the editor to Ext.ux.form.TinyMCETextArea.
While creating the component, initialize the tinyMCEConfig parameter of the editor with a config object having paste_data_images: true

sending textfield data to servlet in ExtJS

I want send a text field data to a servlet page. I dont know the process. I give the code for textbox and a button below.
Ext.onReady(function(){
var movie_form = new Ext.FormPanel({
renderTo: document.body,
frame: true,
title: 'Personal Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Firstname',
name: 'firstname',
allowBlank: false
},{
xtype:'button',
text:'save'
}]
});
});
This is the code ofr a textbox and a button. when i click the button the data of the field will go to a servlet page. But I cant do that. Please any one help me. the name of the servlet page is url_servlet

in your service method (get or post )
you can get your data field values by the attribute "name".
String firstname = reg.getParameter("firstname");

For handling the data in the backend check #The Suresh Atta's answer.
I found some errata in your code:
1) Construct an Ext component with the Ext.create function.
2) Use Ext.getBody() to get the document body.
3) Put your fields in the items config and buttons in the buttons config (Not always the best practice).
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Personal Information Form',
width: 250,
url: 'url_servlet',// The form will submit an AJAX request to this URL when submitted
items: [{
xtype: 'textfield',
fieldLabel: 'Firstname',
name: 'firstname',
allowBlank: false
}],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Console.log('Success', action.result.msg);
},
failure: function(form, action) {
Console.log('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
I hope this helps you a bit ;)