Related
I try to display PDF stream in separate window and this stream is from database BLOB field. My code is the following:
Ext.define('MyApp.view.ViewPDF', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
requires: [
'Ext.toolbar.Toolbar',
'Ext.button.Button'
],
config: {
title: '',
source: ''
},
itemId: 'SHOW_PDF',
closable: false,
resizable: true,
modal: true,
onClose: function (clsbtn) {
clsbtn.up('window').destroy();
},
initComponent: function () {
var my = this;
Ext.apply(my, {
items: [
{
xtype: 'panel',
layout: 'fit',
width: 640,
height: 780,
items: [
{
items: {
xtype: 'component',
align: 'stretch',
autoEl: {
tag: 'iframe',
loadMask: 'Creating report...please wait!',
style: 'height: 100%; width: 100%; border: none',
src: 'data:application/pdf;base64,' + tutaj.getSource()
}
}
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
height: 30,
items: [
'->',
{
xtype: 'button',
baseCls: 'x-btn-default-large',
cls: 'cap-btn',
handler: my.onClose,
width: 55,
margin: '0, 10, 0, 0',
style: 'text-align: center',
text: 'Close'
}
]
}
]
});
my.callParent();
my.title = my.getTitle();
}
});
and it's working only via FireFox browser. In Chrome I can see empty window. So two questions (can't answer myself):
how to correct above to display this PDF stream in other browsers
how to display text in mask because loadMask in code above can't
work; just display text starting with window open and finishing when PDF is displayed
Be so kind as to prompt me what's wrong in this code.
I have created a FIDDLE using filefield, BLOB and FileReader. I have tested in chrome and Fire Fox. I hope this FIDDLE will help you or guid you to solve your problem.
CODE SNIPPET
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
height: window.innerHeight,
title: 'Iframe Example for PDF',
bodyPadding: 10,
items: [{
xtype: 'fileuploadfield',
buttonOnly: true,
buttonText: 'Choose PDF and show via BLOB',
listeners: {
afterrender: function (cmp) {
cmp.fileInputEl.set({
accept: '.pdf'
});
},
change: function (f) {
var file = document.getElementById(f.fileInputEl.id).files[0];
this.up('form').doSetPDF(file);
}
}
}, {
xtype: 'fileuploadfield',
buttonOnly: true,
buttonText: 'Choose PDF and show via BASE64 ',
listeners: {
afterrender: function (cmp) {
cmp.fileInputEl.set({
accept: '.pdf'
});
},
change: function (f) {
var file = document.getElementById(f.fileInputEl.id).files[0];
this.up('form').doSetViaBase64(file);
}
}
}, {
xtype: 'box',
autoEl: {
tag: 'iframe',
loadMask: 'Creating report...please wait!',
width: '100%',
height: '100%'
}
}],
//Show pdf file using BLOB and createObjectURL
doSetPDF: function (file) {
if (file) {
var form = this,
blob, file;
if (Ext.isIE) {
this.doSetViaBase64(file)
} else {
blob = new Blob([file], {
type: 'application/pdf'
}),
file = window.URL.createObjectURL(blob);
form.getEl().query('iframe')[0].src = file;
}
}
},
//Show pdf file using BASE64
doSetViaBase64: function (file) {
var form = this,
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
form.getEl().query('iframe')[0].src = this.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
});
Rally Lookback API:
I need to query using the Rally Lookback API in a custom HTML App inside Rally.
I dont know how to call the Lookback API, in the overall HTML.
Could anyone please send me a sample App HTML ?
Lookback API works with App SDK 2.
Rally App SDK 2.0 RC1 documentation on Lookback API and a link to Lookback API manual are available here:
This app builds a grid of defects fixed between certain dates. You may directly modify the default query after you deploy the app in Rally.
<!DOCTYPE html>
<html>
<head>
<title>Find fixed defects within certain dates</title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
xtype: 'panel',
layout: 'anchor',
border: true,
fieldDefaults: {
labelWidth: 40
},
defaultType: 'textfield',
bodyPadding: 5,
items: [
{
fieldLabel: 'Query',
itemId: 'queryField',
anchor:'100%',
width: 700,
height: 100,
xtype: 'textarea',
value: '{\n'+
' "State":"Fixed",\n'+
'"_PreviousValues.State":{$gte:"Submitted"},\n'+
'"_ValidFrom":{$gte:"2013-06-01TZ",$lt:"2013-07-01TZ"}\n'+
'}'
},
{
fieldLabel: 'Fields',
itemId: 'fieldsField',
anchor: '100%',
width: 700,
value: "ObjectID, _ValidFrom, Name, State, Resolution"
},
{
fieldLabel: 'Sort',
itemId: 'sortField',
anchor: '100%',
width: 700,
value: "{'ObjectID' : -1, '_ValidFrom': 1}"
},
{
fieldLabel: 'Page Size',
itemId: 'pageSizeField',
anchor: '100%',
width: 700,
value: '10'
},
{
fieldLabel: 'Hydrate',
itemId: 'hydrate',
anchor: '100%',
width: 700,
value: "State, Resolution"
},
],
buttons: [
{
xtype: 'rallybutton',
text: 'Search',
itemId: 'searchButton'
}
]
},
{
xtype: 'panel',
itemId: 'gridHolder',
layout: 'fit',
height: 400
}
],
launch: function() {
var button = this.down('#searchButton');
button.on('click', this.searchClicked, this);
},
searchClicked: function(){
var queryField = this.down('#queryField');
var query = queryField.getValue();
var selectedFields = this.down('#fieldsField').getValue();
if(selectedFields){
if(selectedFields === 'true'){
selectedFields = true;
}
else{
selectedFields = selectedFields.split(', ');
}
}
var sort = this.down('#sortField').getValue();
var pageSize = this.down('#pageSizeField').getValue();
var parsedPageSize = parseInt(pageSize, 10);
// don't allow empty or 0 pagesize
pageSize = (parsedPageSize) ? parsedPageSize : 10;
var callback = Ext.bind(this.processSnapshots, this);
this.doSearch(query, selectedFields, sort, pageSize, callback);
},
createSortMap: function(csvFields){
var fields = csvFields.split(', ');
var sortMap = {};
for(var field in fields){
if(fields.hasOwnProperty(field)){
sortMap[field] = 1;
}
}
return sortMap;
},
doSearch: function(query, fields, sort, pageSize, callback){
var transformStore = Ext.create('Rally.data.lookback.SnapshotStore', {
context: {
workspace: this.context.getWorkspace(),
project: this.context.getProject()
},
fetch: fields,
find: query,
autoLoad: true,
hydrate: ["State","Resolution"],
listeners: {
scope: this,
load: this.processSnapshots
}
});
},
processSnapshots: function(store, records){
var snapshotGrid = Ext.create('Rally.ui.grid.Grid', {
title: 'Snapshots',
store: store,
columnCfgs: [
{
text: 'ObjectID',
dataIndex: 'ObjectID'
},
{
text: 'Name',
dataIndex: 'Name'
},
{
text: 'Project',
dataIndex: 'Project'
},
{
text: '_ValidFrom',
dataIndex: '_ValidFrom'
},
{
text: '_ValidTo',
dataIndex: '_ValidTo'
},
{
text: 'State',
dataIndex: 'State'
},
{
text: 'Resolution',
dataIndex: 'Resolution'
},
],
height: 400
});
var gridHolder = this.down('#gridHolder');
gridHolder.removeAll(true);
gridHolder.add(snapshotGrid);
}
});
Rally.launchApp('CustomApp', {
name: 'lbapi'
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
I have a quite a complicated layout for my application, using borders, vbox's and hbox's which all seem to fit quite well except for one annoyance. The bottom of the grid in the southern region is not behaving. I want the grid to take up the height of the panel when the browser is above minHeight/maximized but at the moment it look like this:
And when the browser is shrunk (but not below min size) it looks like this and I am unable to get to the bottom of the grid scrollbar :(
You can see the scrollbar cut of (probable min height on the viewport/grid issue) but not sure how to fix this can someone spot what I need to do resolve these two issues? Code below:
<script type="text/javascript" src="../app.js"></script>
<!-- script to warn users when leaving page -->
<?php
$db = Zend_Registry::get('db');
$result = $db->query("select ERROR_ID, ERROR_DESCRIPTION, EMAIL_CONTENT, to_char(\"TIMESTAMP\", 'MM/DD/YYYY HH24:MI:SS') as TIMESTAMP, READ from PI_EMAIL_ERROR where \"TIMESTAMP\" = ( select max(\"TIMESTAMP\") from PI_EMAIL_ERROR ) and READ = 0 and rownum = 1")->FetchAll();
?>
<script type="text/javascript">
var container = Ext.create('Ext.container.Viewport',{
id: 'mainWindow',
minWidth: 800,
minHeight: 640,
layout:'fit',
listeners: {
afterrender: function() {
this.setSize(this.getWidth(), this.getHeight());
},
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
},
defaults: {
//collapsible: true, //Add this to true later maybe impliment a lock sam
//when viewport scrolled up, background shows a login.
split: true,
rezisable: false
},
items:[{
layout: 'border',
//height: 640,
//minHeight: 640,
items: [
{
//This panel holds the file menu strip and the show combo
border: false,
region: 'north',
height: 92,
bodyStyle:'background: #DFE8F6;',
/******Toolbar*******/
tbar: [
/****File Button****/
{
xtype: 'button',
text: window.samlanguage.file,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.refreshlist,
action: 'refreshGrid',
icon: '../assets/images/refresh.png',
handler: function(btn){
}
},{
text: window.samlanguage.settings,
icon: '../assets/images/settings.png',
action: 'spawnSettings',
handler: function(Btn){
}
},{
text: window.samlanguage.compose,
icon: '../assets/images/mail--plus.png',
action: 'spawnEmail',
handler: function(Btn){
Ext.create('APP.view.core.forms.Emailform').show();
}
},{
text: window.samlanguage.logout,
action: 'logout',
icon: '../assets/images/exit.png',
handler: function(){
}
}
]
},
/****Help Button****/
{
xtype: 'button',
text: window.samlanguage.help,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.contents,
icon: '../assets/images/contents.png',
action: 'spawnContents',
handler: function(btn){
}
},{
text: window.samlanguage.license,
icon: '../assets/images/licence.png',
handler: function(btn){
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"<b>Retrieving</b> licensing information..."});
myMask.show();
Ext.Ajax.request({
url: '../License/read',
method: 'post',
//params: values,
success: function(response){
myMask.hide();
var numusers = Ext.decode(response.responseText);
Ext.create('APP.view.core.forms.License', {numusers: numusers.numusers}).show();
}
});
}
},{
text: window.samlanguage.about,
icon: '../assets/images/about.png',
//action: 'spawnAbout',
handler: function(btn){
Ext.Msg.show({
title:'About us',
buttons: Ext.Msg.OK,
icon: 'perceptiveLogo'
});
}
}
]
}
],
items: [{
//Comboform with userlist
xtype: 'Comboform',
bodyStyle:'background: #DFE8F6;',
border: false
}]
}//End north region (header) region
,{
region:'center',
type: 'vbox',
align : 'stretch',
items: [
{
//Add the userlist grid
title: 'Currently showing all users',
//id: 'usergridList',
height: 290,
minHeight: 290,
border: false,
xtype: 'Allusers'
},
{
//Add the allprograms grid
title: 'Program Access Permissions',
border: false,
height: 380,
minHeight: 380,
//height: 'auto',
xtype: 'Allprograms'
}
]
} //End center (body) region
,{
region:'east',
type: 'vbox',
align : 'stretch',
split: true,
//collapsible: true,
width: 240,
minWidth: 240,
maxWidth: 240,
//title: 'User Actions',
listeners: {
/*collapse: function() {
this.setTitle("User management");
},
expand: function() {
this.setTitle("User Actions");
},
click: function() {
return false;
},*/
afterrender: function(){
this.splitter.disable();
}
},
//height: 300
items :[
{
title: 'User Actions',
border: false,
height: 168,
xtype: 'Useractionsform'
},
{
title: 'View Audit',
border: false,
height: 122,
xtype: 'Auditform'
},
{
title: 'Program Access',
border: false,
height: 380,
minHeight: 340,
xtype: 'Programactionsform'
}
]
} //End of east region
,{
region: 'south',
height: 20,
bodyStyle:'background: #DFE8F6;',
border: false
}
]
}]
}).show();
});
</script>
Syntax highlighted link:
http://paste.laravel.com/kPr
Thank you kindly
Nathan
I'm referring to lines 87-97 of the syntax highlighted link you posted.
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
This is the resize handler for the viewport, so every time the browser is resized, this funciton will explicitly set the grid height. Not sure what the purpose of this code is but it looks like it could be the issue. Generally you shouldn't need code like this - everything should fit together if you have the layouts set up right, and then you can use minHeight/maxHeight for the grid if you want. What happens if you just take this code out?
I think you need to remove the resize event handler completely. It looks like you're trying to create a 'vbox' layout on your center panel, but you're using 'type: vbox'. Try using this:
layout: {
type: 'vbox'
align : 'stretch',
pack : 'start',
}
This was taken from the ExtJS examples (http://docs.sencha.com/ext-js/4-2/extjs-build/examples/layout-browser/layout-browser.html). Then you can just add a 'flex' to your child containers instead of a minheight.
How can I use this to show by a div:
Html
<div class='clickable'>Tap me</div>
JS code (tap is connected to the div element above)
tap : function(e) {
overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(e.getTarget());
}
However this is a nightmare, I'll get these errors with e.getTarget() or e.target, it does work with .show() but its positioning is then wrong. What is the correct way to do this?
Uncaught TypeError: Object #<HTMLTableCellElement> has no method 'getPageBox'
You probably want to use event delegation on your HTML div tag. So you can give your div tag an id:
<div class='clickable' id='myId'>Tap me</div>
listeners : {
tap: {
fn: function() {},
element: 'element',
delegate: '#myId'
}
}
You can hack it by overlaying an invisible Ext.Button over your html div! You'll just have to add a painted function to render the new button...
tpl: '<div class='clickable'>Tap me</div>'
.......
listeners: {
painted : function(){
var clickable = Ext.DomQuery.select('.pageClass .clickable')[0];
var invisibleButton = new Ext.Button({
text: 'whatever',
renderTo: clickable,
cls: 'something',
width: '100%',
// set styles as transparent bg, no border etc...
handler: function(){
var overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(this);
}
});
}
}
Tested and working.
You need to do it like this:
tap : function(e) {
var overlay = Ext.create('Ext.Panel', {
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(e.getTarget());
}
That is to say, do not add to viewport ... create the panel instead.
I want to add panel to one of tabs of tabPanel, I use border layout for panel but when i add panel to tab it can't fill it's parent body.
panel code:
var viewport = Ext.create('Ext.panel.Panel', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true,
anchor:'100%'
},
id:'viewPort',
width:600,
height:600,
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:{
type:'vbox',
align:'stretch'
},
items: [show,treePanel,propGrid]
},tabs]
});
tab code that is parent of panel and when user click on it panel loaded to it dynamically:
var mainTabs = Ext.create('Ext.tab.Panel', {
layout: 'anchor',
id:'mtabs',
defaults: {
split: true,
anchor: '100%'
},
items: [{
title: 'Layout Window',
closeAction: 'hide',
layout: {
type: 'border',
padding: 5
},
//anchor: '100%',
width:600,
height:600,
listeners: {
activate:function (tab) {
}
},
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:'vbox',
items: [historyTreePanel,propGrid]
},tabs]
},{
title: 'History',
//xtype:'panel',
width:2000,
height:1024,
html: 'Please Wait...',
id:'history-tab',
layout:'fit',
layout: 'hbox',
default: {
anchor:'100%'
},
//iconCls: 'favorites',
//cls: 'card1',
listeners: {
activate:function (tab) {
if(!flag){
flag = true;
$.getScript("/FleetManagement/js/history/fleethistory.js", function(data, textStatus, jqxhr) {
Ext.getCmp('history-tab').add(viewport);
});
}
}
}
}],
renderTo : Ext.getBody()
});
});
in the above code tab with id:'history-tab' is my mentioned tab.How can i fix this problem?
It seems your code missing some of the components. Your tab should have correct layout. Sample code. jsfiddle example here . Hope this helps
Ext.onReady(function() { var resultsPanel = Ext.create('Ext.Panel',{
frame:false,
border:false,
collapsible:false,
title:'tab main',
layout:'border',
items:[{
region: 'center',
id:'centerPanel',
title:'center',
xtype:'panel',
layout:'fit',
border: true,
items:[{id:'grid',xtype:'panel'}]
},
{
region: 'west',
id:'westPanel',
title:'facets',
xtype:'panel',
width:'15%',
collapseMode: 'mini',
collapsible:true,
autoScroll: true,
border: false,
baseCls:'x-plain',
split: true ,
items:[{id:'facet',xtype:'panel'}]
}
]
}); var subtab = { xtype:'tabpanel',
title:'moretabs',
activeTab: 0,//tabActive,
closable:true,
border:false,
id:'idd',
items: [{border:false,layout: 'fit',cls: 'inner-tab-custom', autoShow:true, id:'sub1-',title: 'nested1',items:[resultsPanel]}] };
var tabPanel = Ext.create('Ext.tab.Panel', {
layout:'fit',
height:200,
msgDisplay: 'block',
//deferredRender:false,
border:false,
items: [subtab]
}).render(Ext.getBody());
});