I am new to dojo . I see this term like dijit . What is the difference between it and dojo?
I am sure it would help you if you read Dojo Documentation part on Dijit. The first sentence says:
Dijit is a widget system layered on top of dojo.
Dijit is a system built on top of Dojo that allows you to easily reuse/use reprogrammed widgets. Below is some example code that provides you a view of the relationship within the code:
<script type="text/javascript">
dojo.require("dijit.Dialog");
</script>
<div data-dojo-type="dijit.Dialog" title="Hello Dijit!" id="someId"></div>
So here Dojo is loading Dijit's Dialog box and will apply the Dialog box to the element of "someId".
Related
This is related to Typo3 with the bootstrap theme only please.
I'd like to have ALL elements of the accordion closed at page startup. Currently the top element is open like here
In do understand that it's only related to the in in the class of this statement
<div id="panel-425-0" class="panel-collapse collapse in">
but changing this in the source would have side effects to other locations which I'like to avoid.
So I'm looking for a solution to do the closure with CSS or javascript.
Any guidance welcome.
Here try this
So basically you get element by its Id and re-set its class attribute without the 'in' class.
<script>
document.getElementById('panel-425-0').setAttribute('class','panel-collapse collapse');
</script>
Just for completenes, my own reminder and to whom it might help the full TS to be put into the setup section of a template
# get some javascript into
# for hiding the first accordion element
page.jsFooterInline.20 = TEXT
page.jsFooterInline.20.value = document.getElementById('accordion-....').setAttribute('class','panel-collapse collapse');
I have Domino 9.0.1 and dojo 1.9.4
Can i use HorizontalRangeSlider?
When i trying require this control, load empty javasript file.
Example:
<xp:this.resources>
<xp:dojoModule name="dojox/form/HorizontalRangeSlider"></xp:dojoModule>
</xp:this.resources>
<div id="hrSlider" dojoType="dojox.form.HorizontalRangeSlider"></div>
Yes, but just declaring a div with the dojoType isn't sufficient.
See the Dojo documentation if you want to do it manually. You'll either need declarative code to set the properties according to what you want, or programmatic code.
Alternatively, use the Dojo Horizontal Slider control, as documented in XPages Extension Library book. The book also highlights why the control was added - to allow a single component on the page which comprised all the properties required by the slider's various HTML elements.
I am new to Extjs. I am using Extjs 4 in my project. When the ext-all.js is loaded it automatically adds classes to the <body> tag. and all my other css styles are changed with extjs styles. I found in the documentaion that to set Ext.scopeResetCSS property to true, so I add like below.
Ext.onReady(function(){
new Ext.Component({
scopeResetCSS: true
});
});
but it doesn't change any thing. I still have the same problem.
Is there any way to stop extjs from automatically adding css classes to the tags? Please help..
This is my code to generate a multi line message box.
<link rel="stylesheet" type="text/css" href="components/com_jobs/js/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="components/com_jobs/js/extjs/ext-all.js"></script>
<!-- extjs message box code -->
<script type="text/javascript">
Ext.require([
'Ext.window.MessageBox'
]);
function removeBid(bidid){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
//fn: showResultText
});
}
</script>
Am I doing anything wrong??? I want extjs to style only its own components. But now extjs styles are effects my whole page.. Please help.
Thanks.
The scopeResetCSS property is part of Ext.buildSettings, which is used at the beginning of the Ext JS initialization sequence. If you want to change it, you have to edit ext-all.js or change the settings in the Sencha JS Builder (which I'm assuming you're not using).
Open ext-all.js in your favorite text editor (one that can handle larger files, preferably) and search for "scopeResetCSS" near the beginning of the file, and you'll find it easy enough.
If you are using ExtJS 4.0.2a, then set the scopeResetCSS BEFORE the include.
However, I just switched to ExtJS 4.0.7 and the issue is back. :(
I asked a similar question for ExtJS 4.2.1 before coming across this one. The solution I adopted was to modify the DOM once ExtJS was loaded, and add a listener for the DOMNodeInserted event to watch for and handle the automatic creation of ExtJS components like pick lists. If you are interested you can find my answer here: https://stackoverflow.com/a/29934347/857209
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
});
I've started using the HTML5 data- attributes in my application, but when this is applied to an element that is a dijit widget, it disappears.
<button dojoType="dijit.form.Button" data-id="5">Number 5</button>
Is dojo actually parsing this and keeping it somewhere? Or is it just removed completely because dojo isn't HTML5 compliant?
By applying the answer to this question, I was also able to keep the custom data- attributes on the surrounding element.