Using ExtJS 4.2.3, I have FORM with list of attachments. When I click on one of attachment's name it starts to download. Instead of download I need to get dialogue with ability to open or save the file on click.
Example of code:
<script type="text/javascript" language="javascript">
Ext.onReady(function () {
var trGuid = Ext.Object.fromQueryString(location.search).trGUID;
Ext.define("File_model", {
extend: "Ext.data.Model",
fields: [
{ name: 'document_GUID', type: 'string' },
{ name: 'attachment_fileName', type: 'string' },
]
}); // end Model
Ext.create('Ext.data.Store', {
storeId: 'FileStore',
model: "File_model",
proxy: {
type: 'jsonp',
url: 'http://test/AttachmenttoHTML/List',
extraParams: { trGUID: trGuid },
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
}); // end Store
FileGrid = new Ext.grid.Panel({
renderTo: "EXT-CONTENT",
width: 750,
height: 500,
listeners: {
cellclick: function (table, td, cellIndex, record, tr, rowIndex, e) {
var url = 'http://test/Attachment/Get?document_GUID=' + record.get("document_GUID");
console.log(url);
window.location = url;
}
},
columns: {
defaults: { filter: true },
items: [
{ text: 'Name', dataIndex: 'attachment_fileName', width: 748, cellWrap: true }
]
},
store: Ext.data.StoreManager.lookup('FileStore')
}); // end TaskGrid
}); // end onReady
</script>
In your cellclick function, you need to call a function like this :
function openDialogue(url) {
Ext.MessageBox.show({
title:'Export',
msg: 'Souhaitez vous télécharger le document?',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: showResult,
animateTarget: 'mb4',
icon: Ext.MessageBox.QUESTION
});
}
You can find more avout message box (http://docs.sencha.com/extjs/4.0.7/#!/example/message-box/msg-box.html).
The function showResult will redirect to the url like you did before.
Otherwise you can use the window.open to have de save dialog.
Hope it helps !
Related
I am trying to use multiselector from EXTJS 6.5.2
This is the code that I am using to create multiselector with the values that I need
{
xtype: 'multiselector',
title: 'I caktohet:',
name: 'Caktohen[]',
bind: '{userfullname.value}',
fieldName: 'userfullname',
viewConfig: {
deferEmptyText: false,
emptyText: 'Askush i zgjedhur'
},
search: {
field: 'userfullname',
model: 'InTenders.model.UserModel',
store: {
type: 'users',
sorters: 'userfullname',
// proxy: {
// type: 'rest',
// limitParam: null,
// url: 'api/User'
// }
}
}
}
When I call form = win.down('form') records I can get all values except the multiselector values, they show like this on console.
Anyone can help me or guide me how to get the values?
Thank you.
//Code that I'm trying to get multiselector items and save them
saveTenderForm: function (button, e, eOpts) {
var userMultiSelector = Ext.getCmp('AssignedUsers'); //save assigned users
var selectedUsers = userMultiSelector.getStore().getData(); //get store and put them in array
var me = this,
win = button.up('window'),
form = win.down('form'),
// formApplyUpload = this.getFormApplyUpload(),
// var ko = win.items.items[0].items.items[0].value;
recordtenderUsers = Ext.create('InTenders.model.TenderSaveModel');
// recordtenderUsers = form.getRecord();
// record = form.getRecord(),
values = form.getValues();
// appFile = this.getApplicationFile(),
// callbacks;
recordtenderUsers.set(values);
recordtenderUsers.set('tenderUsers',selectedUsers.items);
// // me.showMask();
// if (form.isValid()) {
recordtenderUsers.save({
success: function (recordtenderUsers, operation) {
win.close();
me.hideMask();
},
failure: function (recordtenderUsers, operation) {
me.hideMask();
}
});
You can get value using multiselector.down('grid') this will return you the grid. And grid have method getSelection().
In this FIDDLE, I have created a demo. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'form',
renderTo: Ext.getBody(),
items: [{
xtype: 'multiselector',
title: 'Multi selector example',
fieldName: 'text',
viewConfig: {
deferEmptyText: false,
emptyText: 'No value selected'
},
search: {
field: 'text',
store: {
fields: [{
name: 'text',
type: 'string'
}],
data: [{
text: 'ABC'
}, {
text: 'ABC 1'
}, {
text: 'ABC 2 '
}, {
text: 'ABC 3'
}, {
text: 'ABC 4'
}]
}
}
}, {
xtype: 'button',
text: 'Get Value',
margin:15,
handler: function (btn) {
var multiselector = btn.up('form').down('multiselector');
if (multiselector.down('grid')) {
multiselector.down('grid').getSelection().forEach(rec => {
console.log(rec.get('text'));
});
}
}
}]
});
}
});
I have main page with a tab control:
Ext.define("Test.index.TabsController", {
extend: "Ext.app.ViewController",
alias: "controller.tabs-controller",
onTabChange: function (panel, newItem, oldItem) {
if (!newItem.html && newItem.loader) {
newItem.loader.load();
}
}
});
Ext.define("Test.index.Tabs", {
extend: "Ext.tab.Panel",
controller: "tabs-controller",
listeners: { tabchange: "onTabChange" },
items: [
{
title: "Static Tab",
html: "This is static tab",
}, {
title: "Ajax Tab",
loader: {
loadMask: true,
removeAll: true,
url: 'views/ajax.html',
contentType: "html",
scripts: true,
renderer: function (loader, response, request) {
loader.getTarget().update(response.responseText, request.scripts === true);
return true;
}
}
}
]
});
Ext.create("Test.index.Tabs", {
renderTo: Ext.get("tabs")
});
<div id="tabs"></div>
And a separate resource (I tried both static html file and ASP.MET MVC partial view) containing a grid populated from external rest (ASP.NET Web API) web service:
Ext.define("Test.models.Test", {
extend: "Ext.data.Model",
fields: ["name", "updateDate"]
});
var userStore = Ext.create("Ext.data.Store", {
model: "Test.models.Test",
autoLoad: true,
autoSync: true,
proxy: {
type: "rest",
url: "http://localhost/api/test",
reader: {
type: "json"
}
},
});
Ext.create("Ext.grid.Panel", {
renderTo: Ext.get("container"),
store: userStore,
columns: [
{
text: "ID", dataIndex: "id"
}, {
text: "Name", dataIndex: "name"
}
]
});
<div id="container"></div>
It works but not properly:
when I select second tab nothing happens
I select first tab back
then select second tab again, now grid is visible
How can I force rerendering right after update?
Thanks to #Luiguis, I found where to call updateLayout():
renderer: function (loader, response, request) {
var callback = function () {
loader.getTarget().updateLayout();
};
loader.getTarget().update(response.responseText,
request.scripts === true,
callback);
return true;
}
To display a PDF document with my Ext JS 4 application I use the following code (GET request):
Ext.create('Ext.window.Window', {
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
src: 'getDocument.do?id=' + myDocumentId
}
}
}).show();
Now I would like to display a PDF and it needs a complex JSON object sent by POST request to be generated.I try to send an 'ajax request' with my JSON parameter 'myJsonParameter' and display the result. Is it possible to display the request.responceText (which contains binary data of my PDF) in the window ?
Ext.Ajax.request({
url: 'getDocument.do',
jsonData: myJsonParameter,
binary: true,
success: function(response, options){
Ext.create("Ext.window.Window", {
items: {
xtype: 'component',
html: '<embed width=100% height=100%' +
' type="application/pdf"' +
' src="data:application/pdf;' +
response.responseText +
'"></embed>'
}
}).show();
}
});
I try this too; but the render display special characters and not a PDF document:
Ext.create("Ext.window.Window", {
items: {
xtype: 'component',
loader: {
url: 'getDocument.do',
autoLoad: true,
ajaxOptions: {
binary: true,
jsonData: myJsonParam,
headers: "application/pdf"
}
}
}
}).show();
Remark: I don't know if it's a good approach; any help will be very welcome.
Thanks in advance!
Best solution for the moment it's an iframe which received POST parameter (but I can't find a way to send {toto: 'abc'} in JSON format).
Ext.create('Ext.window.Window', {
items: [{
xtype: 'component',
autoEl: {tag: 'iframe', name: 'myIframe'}
},{
xtype: 'form', hidden: true,
listeners: {
afterrender: function(form){
form.getForm().doAction('standardsubmit',{
target : 'myIframe', method : 'POST',
params: {toto: 'abc'},
url : '../myPath/getDocument.do'
});
}
}
}]
}).show();
var that = this;
Ext.Ajax.request({
url: '<app url>',
timeout: 120000, // optional
scope : that,
params: {
investor_id:investor_id,
scenario_id:scenario_id,
prog_id:prog_id,
action: 'po',
operation: 'generate'
},
failure: function(response) {
//handle failure condition
},
success: function(response){
var responseObj = Ext.JSON.decode(response.responseText);
var isSuccess = responseObj.success;
var errorMsg = responseObj.errorMsg;
var url = responseObj.url;
if( isSuccess=="false" ) {
//handle failure condition
} else {
//url
var popUp = Ext.create('Ext.window.Window', {
//header:false,
height: 800,
modal:true,
width: 1024,
layout:'anchor',
anchor:"100% 100%",
title:'Proposal Output',
maximizable: true,
minimizable: true
});
popUp.add({html: '<iframe height="730", width="1000" src="'+ url +'"></iframe>'});
popUp.add({
xtype: 'button',
width: '80',
cls: 'close-button',
handler: function(){
var win = Ext.WindowManager.getActive();
if (win) {
win.close();
}
}
});
popUp.show();
}
}
});
We used below code to generate, please try.
I am using ListFilter plugin to filter results on a Grid panel. The column definition is.
{
header: 'Provider',
filter: {
type: 'list',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
MyApp.store.Provider is created as
Ext.create('Ext.data.Store', {
storeId: 'MyApp.store.Provider',
autoDestroy: true,
autoLoad: {start: 0, limit: 50},
autoSync: true,
model: 'MyApp.model.Provider',
pageSize: 50,
proxy: {
type: 'ajax',
api: {
create: 'proxy/provider/create',
read: 'proxy/provider/read',
update: 'proxy/provider/update',
destroy: 'proxy/provider/destroy'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'total'
},
writer: {
allowSingle: false,
type: 'json',
writeAllFields: false,
root: 'data'
}
}
});
And lastly model MyApp.model.Provider is defined as
Ext.define('MyApp.model.Provider', {
extend: 'Ext.data.Model',
fields: [
{ name: 'provider_id', type: 'int'},
'name',
{ name: 'create_time', type: 'date', dateFormat: appDateFormat },
{ name: 'status', type: 'int'}
],
idProperty: 'provider_id',
displayProperty: 'name' // A custom property used for dynamically use the property to display
})
Now this code does not show any sub-menu in the filter menu. It just shows loading. See the image.
Update
I have solved it using following filter config. This actually populates options config manually. So no store is used here.
{
type: 'list',
labelField: 'name',
options: (function () {
var opts = [];
fS.load(function (records, operation, success) {
for (var i = 0; i < records.length; i++) {
var ar = {
id: records[i].get('provider_id'),
name: records[i].get('name')
};
opts.push(ar);
}
});
return opts;
})(),
single: true
}
It seems 'id' is hard-coded. id: records[i].get('provider_id'), does not look good. Though it works.
But I am still looking for a proper way to do it.
Note: The expected behavior can be found on ExtJS 4.1.1. See this jsfiddle. I have reproduced it. But this very same thing does not work on ExtJS 4.0.7
I didn't tried this myself but you need to set the ID manually with the idField property [new to ExtJS4.1.3] which is per default set to id. So I guess this will work:
{
header: 'Provider',
filter: {
type: 'list',
idField: 'provider_id',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
Update
OK, I looked at the source and I can now tell you that this is the answer. So will have to either live with your workarround until 4.2 is out or you can apply the following changes to your Ext.ux.grid.menu.ListMenu to make it run:
add the idField with a default value.
look within the constructor for this lines
case 'object': options.push([value.id, value[this.labelField]]); break;
// some more lines
fields: ['id', this.labelField],
and replace it with
case 'object': options.push([value[me.idField], value[me.labelField]]); break;
// some more lines
fields: [me.idField, me.labelField],
and within the onLoad function look for
itemValue = records[i].get('id');
and replace it with
itemValue = records[i].get(me.idField);
and that pretty much is it.
I'm using ExtJS3 and I have a Ext.grid.GridPanel where each row has a checkbox on the left. At the top there are two buttons: 'refresh' and 'submit'. I want to be able to select multiple rows and submit all of them in one click of the submit button. As it is right now when I select multiple rows and hit submit it will submit the first one, then remove that item from the grid, and I have to hit submit again (the formerly checked rows are still checked).
How do I change the following code to make the submit button send all of the rows at one time?
var dataStore = new Ext.data.SimpleStore({ fields: [
{name: 'node'},
{name: 'ip'},
{name: 'groups'}
]});
var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();
var dataGrid = new Ext.grid.GridPanel ({
renderTo: document.body,
clickstoEdit: 2,
selModel : checkBoxSelMod,
xtype: 'grid',
layout: 'fit',
sm: new Ext.grid.CheckboxSelectionModel(),
tbar: [
{
text: 'Refresh',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_refresh.png',
cls: 'x-btn-text-icon',
handler: function() {
window.location = '$nroot/index.php/imaging/index';},
scope: this,
},
{
text: 'Submit Machine(s)',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = dataGrid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()) {
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+sel.data.node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: sel.data.node,
mgmtip: sel.data.ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}
}
}
],
store: dataStore,
columns: [
checkBoxSelMod,
{ id: 'node', header: "Node", width: 150, sortable: true, dataIndex: 'node'},
{ id: 'ip', header: "IP", width: 120, sortable: false, dataIndex: 'ip'},
{ id: 'groups', header: "Groups", width: 100, sortable: true, dataIndex: 'groups'},
],
stripeRows: true,
autoExpandColumn: 'node',
listeners: {
render: function(){ this.store.loadData(dataList); }
}
})});
When I change the code from getSelected to getSelections it returns this on page load:
item type is invalid for AcceptItem action
I can't find any examples that show multi-select with submit for GridPanels. Is there one I can reference?
EDIT, based on the solutions below I've modified the code to work as follows:
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
Ext.each(sels, function(sel) {
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
node: sel.get('node'),
mgmtip: sel.get('ip')
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
})
}
}
});
}
}
The most simple approach is to loop through the selected records and ask a question for each record.
var sels = sm.getSelections();
Ext.each(sels, function(sel) {
var node = sel.get('node'),
ip = sel.get('ip');
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: node,
mgmtip: ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
});
However, this may not be nice for the user to get a prompt for every row selected in the DataGrid. But if your service ('$nroot/index.php/imaging/image/') support posting several items you can ask the user one time and post all of them. I.e.
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
nodes: nodes,
mgmtips: ips
},
success: function(resp,opt) {
Ext.each(sels, function() { dataGrid.getStore().remove(this) });
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}