i am trying to build an app with extjs 4 and draw2d touch library. the app has a two column panel. how can i drag a draw2d shape from one column and drop it in the other? Any help plis
thanks
draw2d touch use the jquery-ui dragdrop stuff. You must add a css class "draw2d_droppable" to your div
to indicate that the node is dragable. You can introspec thte example "buildin_commandstack" from draw2d.
<div id="navigation" class="">
<div data-shape="draw2d.shape.node.Start" class="palette_node_element draw2d_droppable">Start</div>
<div data-shape="draw2d.shape.node.End" class="palette_node_element draw2d_droppable">End</div>
<div data-shape="draw2d.shape.node.Between" class="palette_node_element draw2d_droppable">Between</div>
</div>
Regards
Related
Based on the starter kit I have created a new app. I would like to link the different pages to a set of icons in the app-toolbar.
I got it working with:
<a href="/main-stream">
<paper-icon-button icon="icons:view-stream"></paper-icon-button>
</a>
But I think I am missing something here. Is there a better way?
in your app-Component you have a variable called page. This variable indicates the current view that is shown. To modify its value you can use the iron-selector like in the demo app.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
<a name="view2" href="[[rootPath]]view2">View Two</a>
<a name="view3" href="[[rootPath]]view3">View Three</a>
</iron-selector>
Copied from:https://github.com/PolymerElements/polymer-starter-kit/blob/master/src/my-app.html
Trying to use equalizer plug, but id doesn't work, and no errors. It`s look like http://goo.gl/OvKy1g. Here is a page http://goo.gl/INMqUL. Do i need include some css for it.
You can use the Foundation Equalize plugin along with Twitter Bootstrap, but you need to do a couple of things to make it work.
DEMO
First, your principle issue is that foundation.js is looking for the corresponding foundation.css. Since you're using Twitter Bootstrap as your base styles, you probably don't want to have to deal with all of the potential style conflicts or having your users download another large css file. Really all that is needed is a reference to the Foundation version and namespace, so just add the following to your css:
meta.foundation-version {
font-family: "/5.4.5/";
}
meta.foundation-data-attribute-namespace {
font-family: false;
}
The second issue is with your markup. You have the data-equalizer-watch attribute applied to the containing .col-sm-4 element, but you have your border on the child element with the class latest-news-item. So change your markup to be:
<div class="row" data-equalizer>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
</div>
As you can see in the demo, I was able to get your test page to work with these changes, but I was also able to dramatically reduce the foundation.js file size by using the Custom option on the Foundation Download page and just building a js version with the equalize plugin only. The minified version was 31K. If you're not planning to use any of the other foundation plugins, you might consider using a custom file.
That said, for folks that are looking for an alternative lighter-weight approach, it might be just as easy to write your own jQuery such as by adding a class to the row you want to equalize (I called it 'equalize') and then add:
var row=$('.equalize');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
Wrap it in a function and you can call it on resize as well if that is important to you.
I'd like to create a dijit fieldset which starts up collapsed.
The documentation ( http://bill.dojotoolkit.org/api/1.9/dijit/Fieldset ) of dijit fieldset says there's only an argument called toggleable. But that's not what I want.
Is there realy no way to start it collapsed like
<div id="myFieldset" data-dojo-type="dijit/Fieldset" data-dojo-props="collapsed:true">
<legend>myLegend</legend>
<div id="aTextBox" name="aTextBox" data-dojo-type="dijit/form/TextBox"></div>
</div>
You need to set the dojo fieldset value of open equal to false like so
<div id="myFieldset2" data-dojo-type="dijit/Fieldset" data-dojo-props="open:false">
<legend>myLegend</legend>
<div id="aTextBox2" name="aTextBox" data-dojo-type="dijit/form/TextBox"></div>
Here is an example of your code and the new version which uses the open property
http://jsfiddle.net/kagant15/5rvwe1c0/
I can easily show a loading message while the activate method is doing its thing like so:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
However if I then update my ActiveVm property with a different viewmodel, the splash content does not show. I understand that the splash content is only designed to show on 'initial' load, but what options do I have for displaying such a message when transitioning from one viewmodel to another?
Note that this composition does not participate in routing...
Update: Related durandal issue here which might be of value to future visitors: https://github.com/BlueSpire/Durandal/issues/414
This begs for a comment of 'what have you tried?' but given that I could see the benefit of this for future users I wanted to throw in my $0.02 -
The splash displays on your screen until Durandal loads up the application and replaces the div with id="applicationHost" 's content with the shell view and the subsequent views that are loaded. If you wanted to make this a re-usable component one thing that you could do is to take that Html.Partial view that is being loaded and create your own view inside of your app folder in your Durandal project.
For example you would create a new HTML view inside of your app folder -
splashpage.html
<div class="splash">
<div class="message">
My app
</div>
<i class="icon-spinner icon-2x icon-spin active"></i>
</div>
And then compose it from your shell -
<div data-bind="if: showSplash">
<!-- ko compose: 'splashpage.html' -->
<!-- /ko -->
</div>
And in your view model you would toggle the observable showSplash whenever you want to show / hide it -
var showSplash = ko.observable(false);
var shell = {
showSplash: showSplash
};
return shell;
And you could call that from your activate methods inside your other view models like this -
define(['shell'], function (shell) {
function activate() {
shell.showSplash(true);
// do something
shell.showSplash(false);
}
});
This sounds to me like a scenario where a custom transition may be useful. When the composition mechanism switches nodes in and out of the DOM, it can use a transition.
This page, under Additional Settings>Transition (about halfway down) describes a custom transition: http://durandaljs.com/documentation/Using-Composition/
I am using OneUI which is basically just an extension of the dojo didjit widgets.
I need to put a widget inside a widget.
I am using a div with data-dojo-type="dojo.store.Memory".
I am then setting various elements of this using data-dojo-props.
So for example I have some spans and links set within the data-dojo-props.
These are work and display fine.
I am now trying to add a div which itself is a widget. So I've added the div and within this div I am setting the data-dojo-type as a HoverHelpToolTip and setting some other elements such as an onmouseover and some data-dojo-props.
Essentially what should happen is that a hover help tooltip should pop up on mouse over - but it isn't working at all.
So I suppose my question here is how do I correctly nest one widget within another?
Thanks
Sample Code
I am declaring it as follows...
<div data-dojo-id="store1819454249457680384" data-dojo-type="dojo.store.Memory" id="store1819454249457680384" data-dojo-props="data:[{"Name":"<!--o3nv--> ","id":1,"gender":"Female","ActionColumn":"<span class=\"actions\" ><a href=\"...\" onclick=\"...\" title=\"Click here to edit this item\" >Edit<\/a><span class=\"linksDivider\" > | <\/span><a href=\"#\" onclick=\"...\" title=\"Click here to delete this item\" >Delete<\/a><\/span>","Person.firstName":"werrwewre",
<!-- This is the start of the code in question -->
"HelpColumn":"<div class=\"hiddenHelpDialog\" data-dojo- props=\"forceFocus:true,connectId:['helpAnchor_rowHelp10309939']\" data-dojo- type=\"idx\/oneui\/HoverHelpTooltip\" id=\"rowHelp10309939\" style=\"text-align: left; position:relative; display:none\" widgetid=\"rowHelp10309939\" ><div class=\"helpDivDialog\" ><p class=\"helpFieldHeadingDialog\" >\u00a0<\/p><p class=\"helpDescriptionTextDialog\" >BLAH BLAH BLAH BLAH<\/p><\/div><\/div><a class=\"openHelpLink openHelpLinkDisplayField\" id=\"helpAnchor_rowHelp10309939\" onmouseover=\"idx.oneui.HoverHelpTooltip.defaultPosition=['above']\" ><\/a>"}]" ><!-- comment--></div>
It produces the following HTML which works correctly apart from the HoverHelpTip not appearing. The onmouseover is firing. Its alsmot like the widget isn't registered with dojo?!?!
<div widgetid="rowHelp1248193624" style="text-align: left; position:relative; display:none" id="rowHelp1248193624" data-dojo-type="idx/oneui/HoverHelpTooltip" data-dojo-props="forceFocus:true,connectId:'helpAnchor_rowHelp1248193624'" class="hiddenHelpDialog"> <div class="helpDivDialog">
<p class="helpFieldHeadingDialog"> </p>
<p class="helpDescriptionTextDialog">BLAH BLAH BLAH BLAH</p></div></div>
<a class="openHelpLink openHelpLinkDisplayField" id="helpAnchor_rowHelp1248193624" onmouseover="idx.oneui.HoverHelpTooltip.defaultPosition=['above'];">
<span class="hidden"> </span></a>
I fixed this by calling parser.instantiate(node) on the DOM Node when dojo is ready.
I dont know why but for some reason the widget was not being picked up/parsed.
I check dijit.registry and there was no mention of it and a lookup using dijit.byid returned undefined.
Explicitly instantiating the node worked however.
Anyone got any idea why????