I'm getting to grips with ExtJs 4 and having an issue showing a modal window upon a double click event on a grid.
A listener defined on grid component:
"listeners": {
"itemdblclick": function() {
var win =Ext.getCmp('myCmp');
win.myWindow.show();
}
}
previously defined property of myCmp to be a window component:
(I've used the parent container object myCmp as I'm code generating the javascript to build the ExtJs config)
myCmp.myWindow = Ext.create('Ext.window.Window',{
"layout": "fit",
"items": [
....
],
"title": "Hello Window",
"width": "300",
"height": "300",
"id": "myWindow"
});
The logic works well, I double click the grid, the window object is present (myCmp.myWindow) but when i call show() the window is displayed very small (6px x 6px).
if I change the handler to :
Ext.create('Ext.window.Window',{
"layout": "fit",
"items": [
....
],
"title": "Hello Window",
"width": "300",
"height": "300",
"id": "myWindow"
}).show();
It works ok. obviously this is creating a new window instance.
Any ideas? am I doing this right?
Thanks in advance
sam
Why do you refer to "myCmp" when you can directly refer to your window?
var win = Ext.getCmp('myWindow');
win.show();
This should work. Also, Why do you instantiate a window else where and then use it? Wouldn't it be better to create a instance when you need it and destroy it after use?
Also, you should configure the window correctly. The width and height are numeric fields and not string. Refer to api documentation and examples to see how to configure the objects properly. you should use the following window:
Ext.create('Ext.window.Window',{
layout: 'fit',
items: [
....
],
title: 'Hello Window',
width: 300,
height: 300,
id: 'myWindow'
}).show();
Related
I'm interested in automatically setting the height of a panel to the height of the viewport in Ext js.
Using listeners this is easy to do, but it seems to be a perfect use of Ext js variable binding. I can't seem to get it to work, however.
In my main view my bind config is, bind: {height: 'viewportHeight'}. In the view model, I have data: { viewportHeight: Ext.getViewportHeight()}. I extend this view model with the view model for my panel class, and have bind: {height: 'viewportHeight'} in the view.
I thought this was how bindings work in Ext js, but viewportHeight is set at the initial viewport height, and then never updated. Resizing the window does not resize the panel.
What am I missing with variable binding in Ext js?
You do not need to use binding. ExtJs has layouts for these purposes:
Ext.create('Ext.container.Viewport', {
//layout: 'fit',
layout: {
type: 'hbox',
align : 'stretch'
},
items: [{
xtype: 'panel',
title: "Sample Panel",
html: "Content HTML",
width: 200,
margin: 5
}, {
xtype: 'panel',
title: "Another Panel",
html: "Content HTML",
width: 400,
margin: 5
}]
});
Here is an example of the AmSerialChart, in which you can use the scroll button to scroll the window over the data. When you reach the end (or beginning) and continue scrolling, the window will remain the same width.
Here is another example, using the AmStockChart. The window is zoomed in using a slightly different method: zoomToIndexes does not exist for stockCharts, thus the "zoom" method is used.
var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
"categoryAxesSettings": {
minPeriod: "fff",
},
"chartScrollbarSettings": {
graph: "g1",
usePeriod: "fff",
},
"dataSets": [
{
mouseWheelZoomEnabled: false,
categoryField: "date",
dataProvider: chartData,
fieldMappings: [
{
fromField: "gg1",
toField: "gg1"
}, {
fromField: "gg2",
toField: "gg2"
}
],
}
],
"mouseWheelScrollEnabled": true,
"panels": [
{
stockGraphs: [
{
id: "g1",
valueField: "gg1",
type: "step",
}
],
}, {
stockGraphs: [
{
valueField: "gg2",
type: "step",
}
],
}
],
"type": "stock",
});
When you scroll to the left in the StockChart, the window will reduce in size!
So far, I have not been able to identify a reason why the SerialChart does not reduce the size, while the StockChart does. I did find a post on SO that says to set mouseWheelZoomEnabled to false, however this option is for the SerialChart, not the StockChart.
I guess it is possible to add a listner to the scroll event, and prevent the window from reducing in size when it collides with the left or right side, however... I assume there is a better reason.
My question: How to prevent the window from reducing in size in the AmStockChart?
You have to set minSelectedTime in the panelsSettings to achieve the same behavior in a stock chart. Note that this will also prevent the scrollbar from zooming to a smaller time frame when dragging the sliders directly:
var chart = AmCharts.makeChart("chartdiv", {
panelsSettings: {
mouseWheelZoomEnabled: false,
minSelectedTime: 4.32e+9,
mouseWheelScrollEnabled: true
},
// ...
});
Demo
That title is kind of garbled and this is probably a duplicate but I've been digging a while. This must be really simple. The accepted answer on this question didn't work for me: How to declare and use the name of a function from a json object?
The task: I am trying to externalize the set-up data for a Vis.js timeline into a JSON file . The data set was no problem nor are all of the options except for the function references, "orderByID" and "visTemplate". Those are functions I defined which exist within the script where I am working with the JSON data.
When I try to use the JSON without attempting to convert it, Vis.js complains. When I tried the answer from the question above with the code below, I get the errors show in the image.
This is in Electron and the script is being loaded through a script tag in the index.html.
I await the one-line answer to this simple issue which have spent so much time describing. 😉
console.log(' timelineOptions.order', timelineOptions.order);
console.log(' timelineOptions.template', timelineOptions.template);
console.log('this', this);
console.log('window', window);
timelineOptions.order = window[timelineOptions.orderByID];
timelineOptions.template = window[timelineOptions.visTemplate];
"timelineOptions": {
"order": "orderByID",
"selectable": true,
"zoomable": false,
"width": "100%",
"height": "90%",
"minHeight": 700,
"format": {
"minorLabels": {
"hour": "HH\\h"
}
},
"margin": {
"axis": 20,
"item": 20
},
"start": "2016-12-30",
"end": "2017-01-4",
"template": "visTemplate",
"showCurrentTime": false,
"dataAttributes": "all",
"timeAxis": { "scale": "day", "step": 1 },
"orientation": {
"axis": "top",
"item": "top"
}
}
Not sure if you've setup the right reference on the window object but shouldn't your code read:
timelineOptions.order = window[timelineOptions.order];
You've referenced the string value orderByID instead of the property name you used to set the object up.
I am working on amCharts Donut chart.
Following is the script for creating the chart.
JS
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"pullOutDuration":0.5,
"pullOutRadius": "5",
"theme": "light",
"dataProvider": [ {
"title": "Aaa",
"value": 10,
}, {
"title": "Bbb",
"value": 10,
},{
"title":"Ccc",
"value":10,
},{
"title":"Ddd",
"value":10,
},{
"title":"Eee",
"value":10,
}],
"titleField": "title",
"valueField": "value",
"labelRadius": 50,
"radius": "35%",
"innerRadius": "85%",
"labelText": "[[title]]",
"export": {
"enabled": true
},
"baseColor":"#7a4436",
"pullOutOnlyOne":true,
"startEffect":"easeOutSine",
"pullOutEffect":"easeOutSine",
"showBalloon":false,
"listeners": [{
"event": "clickSlice",
"method": function(e) {
var dp = e.dataItem.dataContext;
alert(dp.title + ':'+dp.value)
e.chart.validateData();
}
}]
});
I am able to give click event listener for each slice of the chart.
But I would like to add a click event for label of each slice. So here in my example click event for the labels Aaa, Bbb, etc..
Edit
or how to give an anchor tag to these Labels??
Here is the working fiddle demo
Normally the listener for clickSlice is only attached to the wedge and the little tick to the label, but not to the label itself.
You can do this manually though, using this code piece:
chart.addListener("init", function() {
var d = chart.chartData;
for (var i = 0; i < d.length; i++) {
d[i].label.node.style.pointerEvents = "auto";
chart.addEventListeners(d[i].labelSet, d[i]);
}
});
As the labels have the pointer-events style assigned to none automatically, you have to change this back, so the mouse-events can be registered. Then you can add a listener manually to the svg element using a method provided by the chart.
You have to do this after the chart was initialized. However if you want to remain the e.chart.validateData() call in your handler, you have to listen on a different event (like drawn).
If the purpose of e.chart.validateData() was to stop a slice to be pulled out, the better way to do this would be using pullOutRadius: 0
Here's a demo.
Updated simple answer for v4:
const yAxisLabel = mySeries.bullets.push(new am4charts.LabelBullet());
yAxisLabel.label.interactionsEnabled = false;
I am trying to scrape a table from an aspx site using casperjs (a wrapper on phantomjs). One of the table items I need is a link which opens a new page and downloads the PDF. The contents of the TD tag are:
<input type="image" src="images/document.png" alt="View Document" onclick="javascript:__doPostBack('ctl00$mbody$tcManageDocs$tpViewDocs$gv_formData','View$1');return false;">
Once clicked, I have determined that it opens a new window to download the file. Using wireshark, I have captured (relevant parts of) the response to the __doPostBack POST request:
<script type="text/javascript">
//<![CDATA[
window.open('documents/path/to/document.pdf', 'popup_window', 'width=1024,height=768,left=10,top=10,resizable=yes,scrollbars=1,menubar=yes,toolbar=yes');popup_window.print();//]]>
</script>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
However, when executing the link:
this.click('#mbody_tcManageDocs_tpViewDocs_gv_formData > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > input:nth-child(1)');
I get a Page Error: ReferenceError: Can't find variable: popup_window error when I try to run this.
Is there any way I can capture the window using javascript?
Do I need to capture it in the page context or from the phantomjs/casperjs context?
The relevant data I want to capture is the url only (being 'documents/path/to/document.pdf') as a text stream: I would rather not actually perform the download to reduce the bandwidth/server demand and script execution time.
Being this is my first scraping attempt and I'm trying to learn javascript at the same time, I am stumped as how to proceed: even some direction as to what to try would be helpful.
EDIT: I have captured the events as commented by Artjom: I don't get any notifications for the resource messages, but in popup.loaded I get the following:
popup.loaded
{
"objectName": "WebPage",
"title": "",
"frameTitle": "",
"content": "<html><head></head><body></body></html>",
"frameContent": "<html><head></head><body></body></html>",
"url": "about:blank",
"frameUrl": "about:blank",
"loading": false,
"loadingProgress": 100,
"canGoBack": false,
"canGoForward": false,
"plainText": "",
"framePlainText": "",
"libraryPath": "/usr/share/casperjs/bin",
"offlineStoragePath": "/home/rob/.qws/share/data/Ofi Labs/PhantomJS",
"offlineStorageQuota": 5242880,
"viewportSize": {
"height": 300,
"width": 400
},
"paperSize": {},
"clipRect": {
"height": 0,
"left": 0,
"top": 0,
"width": 0
},
"scrollPosition": {
"left": 0,
"top": 0
},
"navigationLocked": false,
"customHeaders": {},
"zoomFactor": 1,
"cookies": [],
"windowName": "popup_window",
"pages": [],
"pagesWindowName": [],
"ownsPages": true,
"framesName": [],
"frameName": "popup_window",
"framesCount": 0,
"focusedFrameName": "popup_window"
}
Is there something in the casperjs/phantomjs that is failing? I am starting to suspect that the error above is one of the main issues. When I wait for the popup for a while, casperjs times out and I get no further resource events.