I have a panel in Sencha touch which shows some htm file.
Ext.define('Project.view.eula.EulaPanel',{
extend:'Ext.Panel',
requires: ['Ext.Ajax','Ext.Panel'],
xtype:'eulaPanel',
id:'eulaPanel',
config:
{
scrollable:true,
padding:10,
listeners: {
activate: 'onActivate'
},
// Create a new configuration called `url` so we can specify the URL
url: 'resources/eula/EULA.htm',
items:[
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'button',
text:'Accept',
action:'eulaAcceptBtn',
},
{
xtype:'button',
text:'Decline',
action:'eulaDeclineBtn',
},
]
}
]
},
onActivate: function(eulaPanel, container) {
Ext.Ajax.request({
url: this.getUrl(),
method: "GET",
success: function(response, request) {
eulaPanel.setHtml(response.responseText);
},
failure: function(response, request) {
eulaPanel.setHtml("failed -- response: " + response.responseText);
}
});
}
});
This panel is the first panel that gets displayed when the app is opened. But it cannot be scrolled. If you navigate to any other page or reopen the app again the panel becomes scrollable. Please let me know if anyone knows the fix.
Just try setting scrollable config in Panel as follows instead of true
scrollable : {
direction : 'vertical'
}
Related
I want to make a selection in an iframe at the editor and transferring the selection to the element where it will be displayed at the saved page. How do I get the data from the iFrame back to the registered block ?
How do I store these data ?
My current not working code:
blocks.registerBlockType('XXX/XX-block', {
stringToUpdate: {
type: 'string',
},
edit: function(props) {
return (el(components.FocusableIframe, {
src: "https:///....my-iframe.php"
},
}
}),
save: function(props) {
return (el('div', {
className: 'stringToUpdate'
}, 'stringToUpdate'))
}
I have been trying to run e2e test cases for a React app using Nightwatch.js + Saucelabs, but is facing the below error while .click() method executes.
Error:
An error occurred while running .click() command on : {"status":-1,"state":"","value":"{\"value\": {\"stacktrace\": \"Backtrace:\n\tOrdinal0 [0x00E07DF3+1474035]\n\tOrdinal0 [0x00D807D1+919505]\n\tOrdinal0 [0x00D1CB43+510787]\n\tOrdinal0 [0x00CCDB60+187232]\n\tOrdinal0 [0x00CCD9B5+186805]\n\tOrdinal0 [0x00CA1BAB+7083]\n\tOrdinal0 [0x00CA2126+8486]\n\tOrdinal0 [0x00CA2F00+12032]\n\tGetHandleVerifier [0x00F6231C+1249612]\n\tGetHandleVerifier [0x00EB1575+525221]\n\tGetHandleVerifier [0x00EB1310+524608]\n\tOrdinal0 [0x00E15D28+1531176]\n\tGetHandleVerifier [0x00EB1D4A+527226]\n\tOrdinal0 [0x00D975F6+1013238]\n\tOrdinal0 [0x00D9746F+1012847]\n\tOrdinal0 [0x00CA1A16+6678]\n\tOrdinal0 [0x00CA174A+5962]\n\tGetHandleVerifier [0x0120992C+4032348]\n\tBaseThreadInitThunk [0x774438F4+36]\n\tRtlUnicodeStringToInteger [0x77B35E13+595]\n\tRtlUnicodeStringToInteger [0x77B35DDE+542]\n\", \"message\": \"invalid argument: missing command parameters\", \"error\": \"invalid argument\"}}","errorStatus":-1,"error":"An unknown error has occurred.","httpStatusCode":400}
Below is the page object:
module.exports = {
url: function () {
return this.api.launchUrl
},
elements: {
app: { selector: 'div[id="app"]' },
login_usernameInput: { selector: 'input[id="user_id"]' },
login_passwordInput: { selector: 'input[id="password"]' },
login_submitButton: { selector: 'button[id="submit"]' }
},
commands: [
{
login () {
return this
.waitForElementPresent('span[id=welcomeToMyApp]')
.setValue('#login_usernameInput', process.env.APP_USERNAME)
.setValue('#login_passwordInput', process.env.APP_PASSWORD)
.click('#login_submitButton')
.waitForElementPresent('#app')
}
}
]
}
Test code:
module.exports = {
beforeEach: (browser, done) => {
browser.page.loginPage()
.navigate()
.login()
done()
},
'Test - DQM Page': function (browser) {
const dqmPage = browser.page.dqmPage()
dqmPage
.navigate()
.waitForElementVisible('body')
.click('#nextCountryTab')
.assert.visible('#nextCountry')
.end()
},
afterEach: (browser, done) => {
browser.custom().end()
setTimeout(function () {
done()
}, 200)
}
}
All the other steps, before click() in the login() method works perfectly fine. Even the setValue() functions are executed pretty well.
Please note, the submit button is pretty much visible and clickable.
I fixed this by specifying to use the previous version of Chrome (which right now is 74).
"desiredCapabilities": {
... clipped out my other capabilities for brevity ...
"version": "latest-1"
}
I then changed it to specifically say version 74. Both of these work but I don't want Chrome to upgrade to 76 and then tests start failing again if we haven't finished adopting whatever the real fix is.
"desiredCapabilities": {
... again - clipped for brevity ...
"browserName": "chrome",
"version": "74.0"
}
What SauceLabs says should work is the following. It doesn't work for me. I got this from their blog post at https://wiki.saucelabs.com/pages/viewpage.action?pageId=88801611
"desiredCapabilities": {
... clipped other configs again ...
"goog:chromeOptions": {"w3c": false}
}
I was able to fix this issue by updating to the newest version of Nightwatch. But the update broke other things. Here is some documentation on what might break after the update.
https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0
I use GMAP3 plugin to render driving direction. And would like to add a clear button so it can be clear but I haven't been able to find the right syntax in GMAP3. Here is the my js code, modified from the sample in gmap3.net. I have markers plotted already and latlng are retreived from plotted markers instead of from clicks position on the map.
function removePath() {
$(mapID).gmap3({
action: 'clear',
name: 'directionRenderer'
// tag: 'path' // works too with tag instead of name
});
function updatePath() {
$(mapID).gmap3({
action: 'getRoute',
options: {
origin: m1.getPosition(),
destination: m2.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) return;
$(mapID).gmap3({
action: 'setDirections',
directions:results,
});
}
});
};
function updateDirection(mm) { // Directions between m1 and m2
var mmID = $(mm).prop('id');
...
if (mmID == 'clearDirection') {
...
removePath();
return;
};
...
if (m1 && m2) { updatePath(); };
};
function initmap() {
$(mapID).gmap3(
{
action: 'init',
options: defaultMapOptions
},
// add direction renderer to configure options (else, automatically created with default options)
{ action: 'addDirectionsRenderer',
preserveViewport: true,
markerOptions: { visible: false },
options: {draggable:true},
tag: 'path'
},
// add a direction panel
{ action: 'setDirectionsPanel',
id: 'directions'
}
);
};
A is in place in HTML documents as directions panel. It has a a wrapper which is hidden when the route is cleared by using jquery css property change. The wrapper div's display property is changed back to 'block' whenever value is assigned to either m1 or m2.
<body>
...
<div id="direction_container" class="shadowSE">
....
<div id="directions"></div>
....
</div>
</body>
Its absolutely working fine.
$map.gmap3({ action: 'clear', name: 'directionRenderer' });
*Instructions-
If you later draw the route then you must write below code otherwise directions not display.
$map.gmap3({ action: 'addDirectionsRenderer', preserveViewport: true,
markerOptions: { visible: false} },
{ action: 'setDirectionsPanel', id: 'directions' });
Thanks...
Use this:
$(mapID).gmap3({action:"clear", name:"directionRenderer"});
The chosen answer above didn't work for me. I'm unsure if it's version related, but the solution I'm using is more simple:
$(your-selector).gmap3({clear: {}});
Afterwards, you can draw a new route without reconnecting the directions rendered with the map.
I am building an application and I am trying to keep it object oriented. The issue is that the alert box doesn't appear when the button is clicked. I believe it is an issue with the scope of the button. It could also be related to the way i am building my app. It is based off of an example provided by Sencha. I have searched, and tried many things, but I haven't come up with a solution. Here is my code:
Ext.require([
'Ext.grid.*',
'Ext.panel.*',
'Ext.msg.*'
]);
Ext.Loader.onReady(function() {
Ext.define('App.SimplePanel', {
extend: 'Ext.Panel',
alias: 'widget.SimplePanel',
width: 100,
height: 50,
initComponent: function() {
this.buttons = [{
text: 'Trigger Alert',
scope: this,
hander: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];
this.callParent();
}
});
}, false);
Ext.onReady(function() {
// create an instance of the app
var simplePanel = new App.SimplePanel({
renderTo: document.body,
});
});
The issue is property should be called handler not hander
this.buttons = [{
text: 'Trigger Alert',
scope: this,
handler: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];
I have found many references on how to create a 'loading' message or mask when loading data in to a grid in Ext JS 4 via a data store / proxy (I am using direct type).
So I had added this in my controller at one point (because I was NOT getting a loading message previously) :
init: function() {
var store = this.getEncountersStore();
store.on({
beforeload: function(store,operation,eopts) {
Ext.getBody().mask('Loading...');
},
load: function(store,records,success,operation,eopts) {
Ext.getBody().unmask();
}
});
}
That seems to work for me in my MVC application, however, next I added a task manager timer to automatically refresh the grid data every 10 seconds:
this.runningTask = Ext.TaskManager.start ({
run: this.loadEncounterData,
interval: 10000,
scope: this
});
loadEncounterData: function() {
var store = this.getEncountersStore();
store.load({
params: {
},
callback: function(r,options,success) {
if(success == true)
...
} //callback
}); //store.load
I noticed that there were now TWO 'loading' mask messages on the screen!
So, I removed my 'store.on' code block above from my controller init, and now I have only one message.
So where does the other message come from?
Is it part of a Grid?:
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
...
I found a page that seems to asking the same question, though I was not able to figure out how to get it to work, or how to do it according to ExtJS 4 / MVC.
loadMask is not a config in Grid panel.
You can add as a config in gridpanel
viewConfig : {
loadMask: false
}
The loadMask is part of the gridView.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.View-cfg-loadMask
GridPanel components all have a gridView component that defines various things to do with the table view in the panel.
To prevent a loadMask on a grid, you set config for loadMask to false, IE:
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
loadMask : false,
...
You could change your load function to just load the store:
loadEncounterData: function() {
var store = this.getEncountersStore();
store.load();
...
Then you could use the following approach to automatically handle the loadMask whenever the grid store loads.
Using Ext.util.DelayedTask is handy to prevent the loadMask from appearing if the load takes less than 500ms.
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
...
initComponent: function() {
var me = this;
me._mask = new Ext.LoadMask(me, {msg: 'Loading...'});
me._maskd = new Ext.util.DelayedTask(function() {
me._mask.show();
});
me.store = Ext.create('Ext.data.Store', {
...
listeners: {
beforeload: function() {
me._maskd.delay(500);
...
},
load: function() {
me._maskd.cancel();
me._mask.hide();
...
}
}
});
...