Any Body Know how to add canvas tag in sencha
html: <canvas width='500' id='canvas' height='100'/>,
but i dont know where to define canvas and how to call it in sencha
You can just define an Ext.Component in your Viewport, or whatever panel you are working with and set the html property to be <canvas../> Then whenever you need to reference it you can either get it by id (unrecommended) or by getting the reference to the component and accessing its el.dom
A developer had a blog post on it here:
http://j-query.blogspot.com/2011/02/sencha-touch-ipad-signature-javascript.html
Related
I have a dashboard built using dojo dijits. One of the dijit is dojo calendar widget.
In this dashboard I am embedding an iframe to it. I want to change the value of the calendar widget from within the iframe.
The issue is since it is not just about changing the text value in the input box of calendar dijit it is also about calling the on change event. So I am using the following
dijit.byId('dijit_form_DateTextBox_1').set('value', datFrom);
This way the value gets updated as well as the change event is fired.
Now since I want to do this from within the iframe I need to get reference to calendar dijit in parent HTML page.
If this is a simple Javascript I would have used following to get to that DOM Element and change the value.
const targetNode = $('#'+divId, window.parent.document)[0];
But since this is dojo so I am unable to get this as a dijit object. Is there a way to get dijit from Parent page
Since the dataTextBox is inside iframe, it's in different scope, and looks like you are not using dojo in AMD pattern.
What you could do is get the object from iFrame's contentWidow and call byID() like any other function, example
var _dijit = document.getElementById("iframeId").contentWindow.dijit;
var dateTextBox = _dijit.byId('dijit_form_DateTextBox_1');
dateTextBox.set('value', datFrom);
or better is, you just call a global reference your own function rather than taking reference of dijit.
I've created a simple blazor app that has a slider on top. There is a javascript self executing function that adds some inline css to this slider so it makes its' height the same as window.height.
I'm adding this javascript file in _Host.cshtml, before closing the body tag.
My issue is that this inline styling isn't applied. I've debugged the javascript code and it gets the correct height, the element on which I want to add the styling is found, the element.css('height', myHeight) is being called with the correct value, but in the end there is no style attribute on that element. I've also tried, after the component has been rendered, to remove the script tag from the page and add it again, hoping that it will re-run and then change the height, but no success there as well.
I've created a .NET Core WebApp using that same slider and everything works as expected (I have the style attribute on my element). In this second app I add the script before closing the body tag, in _Layout.cshtml.
Seems preety much the same as the blazor app, but for some reason, on that one doesn't work.
Do you guys have any idea why?
EDIT:
I've found something interesting. In the beginning, the page is loaded correctly, but the component is being reloaded after the app connects to the we socket Information: WebSocket connected to wss://localhost:44361/_blazor?id=cepYgPnJYddq2bHSywwwYw.. This is when I lose the inline styles.
So how can I stop it from reloading? I guess this is the question.
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)
I need to display content in a lightbox along with recaptcha.This was very easy except that recaptcha can be used only one per page.So, that threw the hidden div option away. Now, iam trying to render the content via js.erb using jquery's html() method. Rest of the content is rendered correctly.But, i'm having trouble rendering recaptcha.Is there a way to render recaptcha via jQuery html() method? I am using Ambethia reCaptcha.
Found a solution. I used a single Div(main lightbox container).Within that div, i added another div which wrapped <%=recaptcha_tags%>.This inner div was placed using absolute positioning.For the rest of the content, i used jquery's append() function instead of html() function.
I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});