PDA

View Full Version : show pdf dynamically in a panel in extjs3



Kalleinz
7 Dec 2016, 4:31 AM
I would like to display a pdf in a panel in extjs3.4, which was clicked on in the same panel in a grid. Here is what works, if it is hardcoded. The following workflow is a db-query, which has the records of the pdf as a result.

var PDFStore = new Ext.data.Store({
url: '/isp/FormProxyServlet?connector=getEvirDocumentList',
autoLoad: false,
remoteSort: true,
reader: new Ext.data.XmlReader({
totalProperty: "@count"
,record: "Row"
,id: "doc_name"
}, [
{name: 'doc_name'},
{name: 'doc_fileType'},
{name: 'doc_id'}
]
)
});

This is hardcoded. Here the record, which was clicked in the grid,
should be loaded. It is one of the records, which result from the db
query above:

PDFStore.load({
params: {
'messageId': 'Evir_XsEWT_20161024000000_xzy',
'doc_id': '13'
}
});

With src the variable for the pdf is passed:

xtype: 'box',
height: 500,
width: 500,
autoEl: {
tag: 'iframe',
id: 'samplePDF',
name: 'samplePDF',
style: 'height: 50%; width: 50%',
src: '/isp/FormProxyServlet?connector=PuM-AJ-055-loadEvirDocument?documentID=13'










I would like to display a pdf in a panel in extjs3.4, which was clicked on in the same panel in a grid. Here is what works, if it is hardcoded. The following workflow is a db-query, which has the records of the pdf as a result.
var PDFStore = new Ext.data.Store({
url: '/isp/FormProxyServlet?connector=getEvirDocumentList',
autoLoad: false,
remoteSort: true,
reader: new Ext.data.XmlReader({
totalProperty: "@count"
,record: "Row"
,id: "doc_name"
}, [
{name: 'doc_name'},
{name: 'doc_fileType'},
{name: 'doc_id'}
]
)
});
// This is hardcoded. Here the record, which was clicked in the grid, should be loaded. It is one of the records, which result from the db query above.
PDFStore.load({
params: {
'messageId': 'Evir_XsEWT_20161024000000_xzy',
'doc_id': '13'
}
});
// With src the variable for the pdf is passed.
xtype: 'box',
height: 500,
width: 500,
autoEl: {
tag: 'iframe',
id: 'samplePDF',
name: 'samplePDF',
style: 'height: 50%; width: 50%',
src: '/isp/FormProxyServlet?connector=PuM-AJ-055-loadEvirDocument?documentID=13' // here the documentID from the clicked record of the grid should be passed.
//src: entry

I already tried:







kleinesGrid.on('rowdblclick', function(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); // Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
var data = record.get(fieldName);
});


PDFStore.load({
params: {
//'messageId': 'AVOR_XsEWT_20161024000000_xzy',
//'messageId': 'record.messageId',
//'doc_id': '13'
'doc_id': record.doc_id
}
});

But I obtain: "Uncaught ReferenceError: record is not defined(…)".

Any help is appreciated.

Gary Schlosberg
7 Dec 2016, 6:38 AM
So it seems like the issue is with this line where the record is defined.


var record = grid.getStore().getAt(rowIndex); // Get the Record


If your getStore() call is working, perhaps the getAt() call is not returning the record or perhaps the rowIndex is incorrect for some reason.

Kalleinz
7 Dec 2016, 6:44 AM
Yes, but the syntax is directly from the sencha documentation.
Is there a mistake in the call?

Gary Schlosberg
7 Dec 2016, 9:04 AM
Not that I can see. I was just trying to debug a bit to try to get to the root of the issue. The getAt() method returns undefined if a record is not found at the index. Can you confirm that the rowIndex variable is getting set to the value you are expecting?

Kalleinz
8 Dec 2016, 12:57 AM
I tried to see the content of the variable with "console.log(record);", but there isn't a corresponding entry neither in Opera nor in Firefox Firebug.
If I doubleclick a row in the grid, I obtain ext-all.js:18 Uncaught TypeError: Cannot read property 'dataIndex' of undefined(…).
Tried to see the variable content with console.log, but no entry, too.

Gary Schlosberg
8 Dec 2016, 3:56 PM
And you put that debug statement right after the line I posted before?

Kalleinz
13 Dec 2016, 12:04 AM
Not then, but now.
I don't see the rowIndex-variable. Here is what I receive:


S

afterCommit:()
afterEdit:()
afterReject:()
beginEdit:()
cancelEdit:()
clearError:()
commit:(a)
constructor:()
copy:(a)
data:Object
dirty:false
editing:false
endEdit:()
error:null
fields:Ext.util.MixedCollection
get:(a)
getChanges:()
hasError:()
id:"input_ech0039.xml"
isModified:(a)
isValid:()
join:(a)
markDirty:()
modified:null
node:row
override:(O)
phantom:false
reject:(b)
set:(a,c)
store:constructor
superclass:()
supr:()
__proto__:Ext.data.Record


The "id" contains the correct file name I clicked on.
The second debug entry is "Uncaught TypeError: Cannot read property 'dataIndex' of undefined(…)"


I managed to receive the document_id as "id" instead, what would probably work, if I could pass that variable to the src.
Here is what I tried:
src: '/isp/FormProxyServlet?connector=PuM-AJ-055-loadAvorDocument?documentID="record.id"'
I tried also
src: '/isp/FormProxyServlet?connector=PuM-AJ-055-loadAvorDocument?documentID='record.id
But this does not work. The clicked document will not show up in the panel, even after "formPanel.doLayout();"

Gary Schlosberg
13 Dec 2016, 3:34 PM
So the ID for your PDF file is 'input_ech0039.xml'? Does your server show that it received the proper request for the file?

Kalleinz
14 Dec 2016, 12:13 AM
No, the id is an integer, now.

The request is: 'http://10.122.17.214:8008/isp/FormProxyServlet?connector=PuM-AJ-055-loadAvorDocument?documentID=' + record.id.
It does not seem to reach the server (checked via tcpdump).

If I hardcode the id at the end "..documentID=14" it does.

How do I pass the "id" to "src"? "record.id" and "id" does not work.

I need the "id" from the output of console.log(record);

Gary Schlosberg
14 Dec 2016, 8:27 AM
The value of record.id is 'input_ech0039.xml'. It seems like your data is not correct since you want record.id to be 14. Where in your data record are you storing the integer value needed?

Kalleinz
15 Dec 2016, 12:12 AM
The value of record.id is 'input_ech0039.xml'. It seems like your data is not correct since you want record.id to be 14. Where in your data record are you storing the integer value needed?






afterCommit:()
afterEdit:()
afterReject:()
beginEdit:()
cancelEdit:()
clearError:()
commit:(a)
constructor:()
copy:(a)
data:Object
dirty:false
editing:false
endEdit:()
error:null
fields:Ext.util.MixedCollection
get:(a)
getChanges:()
hasError:()
id:"14"
isModified:(a)
isValid:()
join:(a)
markDirty:()
modified:null
node:row
override:(O)
phantom:false
reject:(b)
set:(a,c)
store:constructor
superclass:()
supr:()
__proto__:Ext.data.Record



As I mentioned, I changed the id to be the integer document_id.

Gary Schlosberg
15 Dec 2016, 3:50 PM
Wait, have you ended the scope of the 'record' variable before you get to where you need the variable?

Kalleinz
19 Dec 2016, 1:30 AM
Yes, that is the crucial point now.
I have:
var kleinesGrid = new Ext.grid.GridPanel({
store: PDFStore
,cm: fileColumnModel
,frame: true
,height: 100
,width: 500
,margin: 2
,align: 'left'
,iconCls: 'icon-grid'
,loadMask: true
,enableColumnHide : false
,collapsible: false
,animCollapse: false
});

kleinesGrid.on('rowdblclick', function(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); // Get the Record
console.log(record);
//var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
//console.log(fieldName);
//var data = record.get(fieldName);
});

and

var formPanel = new Ext.Panel({
frame:true,
renderTo: 'formPanel',
scrollable: 'true',
title:'',
id: 'mainPanel',
height: 600,
width: 1500,
layout: 'form',
items: [{
//some code
,{

xtype:'panel'
,height: 100
,width: 500
,items: [
kleinesGrid
]}
,{
xtype: 'box',
height: 500,
width: 500,
autoEl: {
tag: 'iframe',
id: 'samplePDF',
name: 'samplePDF',
style: 'height: 50%; width: 50%',
src: '/isp/FormProxyServlet?connector=PuM-AJ-055-loadAvorDocument?documentID=' + record.id
//src: entry
//Ext.getCmp('samplePDF').reload
} //some brackets here
);
formPanel.doLayout();
});

The src-variable does not know anything about record.id.

How can I define the record.id from kleinesGrid.on as a global variable? Or expand the scope, so that src sees it?

Gary Schlosberg
20 Dec 2016, 8:54 AM
Can you load the PDF from the rowdblclick event where you do have the record.id defined?

Kalleinz
21 Dec 2016, 2:04 AM
Thanks, it worked.

The solution is:
kleinesGrid.on('rowdblclick', function(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); // Get the Record
console.log(record);
document.getElementById('samplePDF').src = '/isp/FormProxyServlet?connector=PuM-AJ-055-loadAvorDocument?documentID=' + record.id;
});

The src-String in the iframe-section of the "var formPanel = new Ext.Panel({" can then be commented.

Gary Schlosberg
21 Dec 2016, 2:00 PM
Glad to hear it. And thanks for sharing your solution with the community.