I am new to the extjs.Please help me to remove fakepath issue in filefield.I do not want to get the exact path .Removing "fakepath" string is ok for me. Code runs perfectly but path displays as C:\fakepath....
I created a seperate window inorder to upload a file. In my case Application should have a seperate window as a result of selecting a option from the menu.
Here is crateWindow function of my code :
createWindow: function() {
var desktop = teamApp.getDesktop();
var win = desktop.getWindow(this.windowId + '_win');
if(!win) {
win = desktop.createWindow({
id: this.windowId + '_win',
title: 'Upload a Audio',
iconCls: 'icon-upload-picture',
height:150,
width: 500,
layout: 'fit',
renderTo: Ext.getBody(),
items:
{
xtype: 'panel',
frame:true,
bodyPadding: '10',
items: [{
xtype: 'filefield',
id: 'form-file',
labelWidth: 100,
//emptyText: 'Select an audio file',
fieldLabel: 'Audio File',
name: 'file-path',
fieldWidth: 250,
allowBlank: false,
anchor: '100%',
buttonText: 'Browse'
}],
buttons: [{
text: 'Save',
handler: function(){
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
//url: 'file-upload.php',
waitMsg: 'Uploading your Audio file...',
success: function(fp, o) {
msg('Success', 'Processed file "' + o.result.file + '" on the server');
}
});
}
}
}]
}
})
}
win.show();
return win;
}
As far as I understand you cannot, as per documentation at http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.field.File
Because there is no secure cross-browser way to programmatically set the value of a file input, the standard Field setValue method is not implemented. The getValue method will return a value that is browser-dependent; some have just the file name, some have a full path, some use a fake path.
Update
What you can do is set fieldWidth to zero and add another textfield before the filefield. You can set the value of this textfield as the name of file selected by user by listening to change of file field and parsing the value from last index of \ till last.
Related
I'm trying to reload an Extjs-store, after user has download a PDF.
The process is the following:
User double clicks a cell in GridPanel
Form is created, submitted, and a procedure in the backend creates an PDF and makes some changes on data of GridPanel store
PDF will be downloaded by user
But how to reload the store with the new data in it?
There is no afterRender on form-submit.
I think this should be an easy problem, but I do not have any ideas how to solve it.
This is a snipped I found in my code base (inside a controller):
var form = button.up().up().down('form').getForm();
form.submit({ success : this.onFileUpload, failure: this.onFileUpload, scope: this});
...
onFileUpload: function (form, action){
var data = action.result.data;
...
if (action.result.success){
...
//**your store reload could be here!**
...
} else {
...
}
}
My form response is not responding with a file (just some standard html return), but I guess it should work.
here is a bit of my code:
function makeprintForm(array, setStatusX, grid) {
var filename = 'asd.pdf';
var url_pdf = 'someURL?FileName=' + filename;
var printForm = Ext.create('Ext.form.Panel', ({
url: currentContextPath + encodeURIComponent('http://' + host + ':' + port + url_pdf),
hidden: true,
id: 'printForm',
name: 'printForm',
method: 'post',
standardSubmit: true,
target: '_blank',
items: [{
xtype: 'textfield',
fieldLabel: 'print_id',
name: 'print_id',
value: array
},
{
xtype: 'textfield',
fieldLabel: 'username',
name: 'username',
value: username
},
{
xtype: 'textfield',
fieldLabel: 'language_field',
name: 'language',
value: language
}
]
}));
Ext.getCmp('printForm').getForm().submit({ success : this.reload_grid_after_submit(), scope: document.getElementById(nameSpace + 'formIS')});
}
function reload_grid_after_submit(){
console.log('reload_grid_after_submit');
Ext.getCmp('grid').getStore().proxy.setExtraParam('status', 'NEW');
Ext.getCmp('grid').getStore().load();
}
You can use a form in an alert box. I used a window here. Then onsubmit of the form you can use findRecord to find a record from the store and edit it. For better explanation please find the fiddle here. P.S sorry for the delay I was on a vacation. Please mark it as an answer if it's correct so it helps other people in the future. Or please comment if there is something which needs to be changed. Thanks
Ext.getCmp('myGrid').addListener('rowdblclick', function (a, b, c, d) {
win = new Ext.Window({
width: 300,
height: 150,
draggable: false,
border: false,
modal: true,
resizable: false,
items: [{
xtype: 'textfield',
fieldLabel: 'What is your new name',
id: 'newNameField'
}, {
xtype: 'button',
name: 'sampleButton',
text: 'Change My Name!',
style: 'margin:15px',
width: 150,
handler: function () {
name = Ext.getCmp('myGrid').getStore().getAt(d).data['name'];
console.log(name);
var newName = Ext.getCmp("newNameField").value;
console.log("replacing " + name + " with " + newName + " in the store");
var entry = userStore.findRecord('name', name);
entry.set('name', newName);
win.hide();
}
}]
})
win.show();
})
I'm using an ExtJS (v3.4.0) GridPanel with the RowEditor extension to allow users to add lines of text to a grid. I have also used the checkcolumn extension so users can check certain lines of text for later processing. So far, it looks like this:
However, when editing a row, the problem at hand becomes apparent:
The value underlying the checkcolumn is being displayed in text form along with the actual checkbox. I figured since users can check the checkboxes without editing the row, I would make this column uneditable to fix my issue. However, after modifying my code the true/false value is still being displayed in edit mode, the text value is just not editable anymore.
My code so far:
Ext.QuickTips.init();
var FreeText = Ext.data.Record.create([{
name: 'text',
type: 'string'
}, {
name: 'active',
type: 'bool'
}]);
var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({fields: FreeText}),
sortInfo: {field: 'text', direction: 'ASC'}
});
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});
var freeTextPanel = new Ext.grid.GridPanel({
store: store,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'text',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-add',
text: 'Add',
handler: function(){
var e = new FreeText({
text: "",
active: true
});
editor.stopEditing();
store.insert(0, e);
freeTextPanel.getView().refresh();
freeTextPanel.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-delete',
text: 'Delete',
disabled: true,
handler: function(){
editor.stopEditing();
var s = freeTextPanel.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}, {
xtype: 'tbseparator'
}, {
iconCls: 'icon-excel-import',
//text: 'Import from CSV',
tooltip: 'Import CSV',
handler: function() {
alert( "Excel import here!" );
}
}],
columns: [
{
xtype: 'checkcolumn',
header: 'Active',
dataIndex: 'active',
align: 'center',
width: 50
}, {
id: 'text',
header: 'Free Text',
dataIndex: 'text',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}],
isCellEditable: function(col, row) {
var record = store.getAt(row);
if (record.get('active')) {
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
}
});
var layout = new Ext.Panel({
title: 'Free text entry',
layout: 'border',
layoutConfig: {
columns: 1
},
width:600,
height: 600,
items: [freeTextPanel]
});
layout.render(Ext.getBody());
freeTextPanel.getSelectionModel().on('selectionchange', function(sm){
freeTextPanel.removeBtn.setDisabled(sm.getCount() < 1);
});
Is there an easy way to simply get rid of the true/false text when editing a row?
Just in case, below are my RowEditor.js and CheckColumn.js files:
RowEditor.js
http://trac.geoext.org/browser/ext/3.4.0/examples/ux/RowEditor.js?rev=2740
CheckColumn.js
http://trac.geoext.org/browser/ext/3.4.0/examples/ux/CheckColumn.js?rev=2740
Turns out the solution to my problem was rather simple.
In the startEditing method of the RowEditor.js file I added the following code. I checked implicitly on the name of my item instead of for the checkbox type, in case I still need this functionality for other checkboxes later on:
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
if( cm.getDataIndex(i) == 'active' ) {
val = "";
}
f = fields[i];
f.setValue(val);
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
I am opening a view using the following code
var reader = Ext.create('Ext.view.ReaderWindow', {});
reader.show();
Inside the ReaderWindow view on clicking an a tag element,i am opening the same view (using the code above) again but with different content.
Once i close the ReaderWindow which i opened second. I could not able to see the ReaderWindow which i opened first.
My question is how to use the same view twice. In other words how to open the same view from the view itself.
Ext.define('Ext.view.ReaderWindow', {
extend: 'Ext.window.Window',
alias: 'widget.reader',
id: 0,
file_path: '',
file_title: '',
file_type: '',
id: 'reader',
itemId: 'reader',
maxHeight: 800,
maxWidth: 900,
minHeight: 300,
minWidth: 500,
layout: {
type: 'anchor'
},
title: 'File Reader',
modal: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
anchor: '100% 100%',
id: 'reader_form',
itemId: 'reader_form',
maxHeight: 800,
maxWidth: 900,
minHeight: 300,
minWidth: 500,
autoScroll: true,
bodyPadding: 10,
items: [
{
xtype: 'displayfield',
anchor: '100%',
id: 'file_contents',
itemId: 'file_contents',
maxWidth: 900,
minWidth: 50,
hideLabel: true,
name: 'file_contents'
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
anchor: '100% 5%',
dock: 'bottom',
id: 'reader_toolbar',
itemId: 'reader_toolbar',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
handler: function(button, event) {
me.destroy();
},
id: 'close_btn',
itemId: 'close_btn',
text: 'Close',
tooltip: 'Close the file reader window.'
}
]
}
],
listeners: {
beforerender: {
fn: me.reader_windowBeforeRender,
scope: me
}
}
});
me.callParent(arguments);
},
reader_windowBeforeRender: function(component, eOpts) {
this.setTitle(this.file_title + ' for ID ' + this.id);
this.setFormTitle(this.file_path);
Ext.model.FileReaderModel.load(this.id, {
params: {
'file': this.file_path,
'file_type': this.file_type
},
success: function(file_reader) {
var contents_field = Ext.ComponentQuery.query('[name=file_contents]')[0];
var contents = file_reader.get('file_contents');
var pattern = /(\/.*?\.\S*)/gi;
contents = contents.replace(pattern, "<a href='#' class='samplefile'>$1</a>");
contents_field.setValue('<pre>' + contents + '</pre>');
Ext.select('.samplefile').on('click', function() {
var sample_file_path = this.innerHTML;
var Id = this.id;
var reader = Ext.create('Ext.view.ReaderWindow', {
id: Id,
file_path: sample_file_path,
file_title: 'Sample File',
file_type: 'output'
});
reader.show();
});
},
failure: function(file_reader, response) {
}
});
},
setFormTitle: function(file_path) {
var form_panel = Ext.ComponentQuery.query('#reader_form');
form_panel[0].setTitle('File is: ' + file_path);
}
});
One big problem I see is that you are giving some of your components a non-unique id property. When an id is specified, ExtJS uses it as the ID of the underlying DOM element instead of generating a unique one. This is almost certainly not what you want on a reusable component given that IDs need to be unique within the DOM.
Even if you are generating a unique id when you construct the top-level Window object, its child components (reader_form, file_contents, etc) are not getting a unique id.
In other words, when your second window is shown, you now have multiple DOM elements with the same ID and that breaks the DOM. In my ExtJS application, I've yet to find a valid use case for overriding the id property, but that doesn't mean there isn't one. It would most likely be for global scaffolding elements or something where your application guarantees only one instance of a particular component will ever be instantiated.
You can use itemId because that's an ExtJS construct that doesn't get translated into the DOM. It gives you similar features to having an ID on a DOM element, except that it behaves more intuitively in the context of the ExtJS component hierarchy and selector APIs.
My recommendation is to remove the id property from your components and let ExtJS generate unique ones for you and leverage itemId only where you absolutely must have a known identifier on your component.
I am new to Extjs. I am trying to open a log file in new browser window when i click on the button in grid panel in Extjs 4.
I am able to download that file. But I don't want to download it, I want that it should get opened in new browser window when I click on that button.
I am doing this:
{
xtype: 'gridpanel',
id: 'logResultGrid',
margin: '40 0 10 20',
width: 439,
title: 'Logs Result:',
store: 'LogsStore',
viewConfig: {
id: 'logsGrid'
},
columns: [{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var directoryName = Ext.getCmp('logsJobName').getValue();
return '' + value + '';
},
width: 297,
dataIndex: 'fileName',
text: 'Log Name'
}, {
xtype: 'actioncolumn',
width: 116,
items: [{
handler: function(view, rowIndex, colIndex, item, e) {
var my_record = view.getSelectionModel().getLastSelected();
var directoryName = Ext.getCmp('logsJobName').getValue();
var rec = Ext.StoreMgr.lookup("LogsStore").getAt(rowIndex);
var my_url = 'http://localhost:40889/Snowy/fileDownload/download.htm?reportName=' + rec.data.fileName + '&directoryName=' + directoryName;
// new Ext.Window({
// width: 500,
// height: 500,
// html: '<iframe width="300" height="300" src="' + my_url + '"</iframe>'
// }).show();
window.open(my_url, "_blank");
//});
},
icon: 'resources/images/Open-Folder-Info-icon.png'
}]
}],
selModel: Ext.create('Ext.selection.CheckboxModel', {
})
}
By doing the above , I can download that file.I am using renderer to download that file.To open that file in new browser window I am using handler. I am using java as my backend.
Please correct me if I am doing something wrong in this. I am struggling since past two days.
Thanks in advance.
You should just be able to use plain Javascript to achieve this:
{
xtype: 'button',
text: 'Open Log',
handler: function() {
window.open('myLog.txt');
}
}
whether to download the file or to open in a new window is a behavior that is determined by the user.
If you want to force viewing of a pdf, you can use the pdf viewer plugin.
I want to popup a window to interact with people who want to upload a file to server. I want to render a file input form in the new window, but I can't make it run by doing follows:
var win = new Ext.Window();
var fp = new Ext.FormPanel({
renderTo: win,//I just guess that I can render this to the window I created...
fileUpload: true,
width: 500,
frame: true,
title: 'File Upload Form',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Name'
},{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'photo-path',
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
}
}],
buttons: [{
text: 'Save',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
url: 'file-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o){
msg('Success', 'Processed file "'+o.result.file+'" on the server');
}
});
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
win.show();
As per the Ext JS documentation about the renderTo() method:
"Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items."
So what you need to do is:
Create the formPanel without the renderTo option
Create your window and specify the formPanel as an item of the window.
var win = new Ext.Window({
//You can specify other properties like height, width etc here as well
items: [fp]
});
You can refer to a working fiddle on this link:
http://jsfiddle.net/prashant_11235/2tgAQ/