I'm using a panel with border layout in which west region contains the tree and center region contains the panel which is extending from a panel with column layout. The tree is loading data from json (draggable). Items is adding to the panel at the center region when the user drops the node form tree. But for adding the itms in panel i'm using panel.add method which is always adding at the last position. But i want to add it wherever the user dropped it.
Tried with panel.add(droppeditem).showAt(e.getXY())
But it's giving the error as
Uncaught TypeError: Cannot call method 'translatePoints' of undefined.
Can anybody help me to achieve this
Regards
URL
I had the same error with a context menu on a tree panel. When I added the context menu view to the refs inside my controller with an xtype and an autoCreate set to true it fixed the problem. It is almost like the object (context menu) was not getting instantiated.
Example:
var contextMenu = this.getPortletMenuContext();
contextMenu.showAt(event.getXY());
I was getting the same error above until I added:
{ ref: 'portletMenuContext', selector: 'portletmenucontext', xtype: 'portletmenucontext', autoCreate: true }
To my refs inside my controller.
Related
I have this statement inside my QML item:
Rectangle {
// ...
anchors.right: someItemID.right
// ...
}
I'm receiving this warning for my Rectangle item:
QML Rectangle: Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.
How can I use Layout.alignment to resolve the above warning? How can I pass another item ID to Layout.alignment? Is it possibe?
A layout manages the positions and sizes of all of its child items. Using anchors inside child items is not allowed as it could override these rules. You can only influence those properties provided by the layout in the Layout object attached to its children, which is hinted at in the warning message. Layout.alignment controls how the item is aligned within the cell created for it by the layout. You can therefore align an item to the edges of its adjacent cells, but you can't directly anchor to their items by ID.
If you need more precise control, you should position the items outside the layout using position and/or anchor properties.
We have a dijit.Tree that indicates a node type by using an icon. The icon is a unique indicator that tells the person this node is a "book" or a "DVD" or a "magazine" for example.
dijit renders the icon as a background image in CSS which we know screen readers do not see.
I tried overriding the getTooltip method to provide a tooltip saying "book" or "DVD". It successfully adds the "title" attribute to the "dijitTreeRow". If I mouse over the node, I see the text. This is not ever focused on when the user moves down to get from one node to the next.
When navigating the tree, the up and down arrows traverse the nodes. The span with the visible text is focused on and that string is read. You can see the dotted line focus as well as hear this with JAWS in the most basic of examples: https://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html
What I have not been able to figure out is how to create an indicator that the screen reader will pick up on that will read "Book" alongside "The Great Gatsby".
Does anyone have any tips on how they made this dijit widget accessible for the screen reader when the images are an indicator that should be heard by the blind user?
The tree supports HTML labels, via setting the labelType property on the model you give it.
Assuming you don't want to change the store data (or override the getLabel method), you can reimplement dijit/Tree.getLabel and produce the HTML label, and wrap it with a span with an aria-label.
(code lifted from the dijit.Tree reference).
var myModel = new ObjectStoreModel({
store: myStore,
labelType: "html", // Hack to tell the tree node to render as HTML
query: {id: 'world'}
});
var tree = new Tree({
model: myModel,
getLabel: function(item) {
var label = this.model.getLabel(item);
// dojo.string
return dstring.substitute("<span aria-label='dvd ${0}'>${0}</span>", [label]);
}
});
If your data might contain HTML-ish characters that you don't want to render, escape the characters in getLabel too.
Using ST 2.1 and MVC I am trying to call another view. Shouldn't I have a view and a controller for each panel? If needed of course. I think a static about page will not need a controller.
So my layout would be.
app
controller
Main.js
Contact.js
view
Main.js
Contact.js
About.js
resources
css
images
app.js
index.html
Here is my overall project structure.
My app.js calls Main.js. This is my main view and controller. My Main view extends Container. On the Main view I have created a titlebar with left and right buttons and a title. Then I created a panel that holds my main buttons. Then I created a toolbar at the bottom that just has an image.
I want my Main container to change the panel in the middle but keep the top and bottom bars. Each of my views is a panel with various things on them. I can get the overall screen to change but it takes my titlebar and toolbar with it.
I hope this is enough info. Thanks, Donnie
If you want to change just the panel you have to put that panel as item into parent panel. When you want to change this panel with other panel or anything else just get reference of parent panel and remove existing content before adding new panel.
var p = Ext.getCmp("myPanel");
var pp = Ext.getCmp("parentPanel");
var newPanel = Ext.create('Ext.panel', {html : "some content"});
pp.remove(p, true);
pp.add(newPanel);
PS - I haven't tested this code, its just guideline.
I've created a dijit.TooltipDialog and everything works as it should. However, if another dialog is produced from within the tooltip dialog it shows up behind the tooltip dialog instead of on top of it. I checked the zIndex on the 2 dialogs and the tooltip dialog is 1000 and the other dialog is 950.
I've tried setting the zIndex on the respective container node and the tooltip dialog's "domNode" both with no luck. So does anyone know how to set the zIndex on the tooltip dialog?
as you will find if you inspect the dom after creating a programmatic tooltip - the tooltip is placed in an overlay container beneath <body>.
As mentioned, seek alternative methods for this.. But the answer is as follows; For you to successfully set a z-index you must find the correct node - which is not the domNode since the dialog has a 'layer' of its own via the dijit.popup design.
Here's the fiddle for it: http://jsfiddle.net/rQHSP/
In short, this is what you could do.
myDialog.onShow = function() {
node = this.domNode
// loop upwards untill we hit a wall or nodes class mathes popup
while (node
&& (!node.className || !node.className.match("dijitTooltipDialogPopup")))
node = node.parentNode
console.log(dojo.style(node, "zIndex")
}
Following mschr's answer I couldn't find the underlayAttrs property of dijit.TooltipDialog. But that did lead me to finding _popupWrapper which is the wrapper node of the entire popup. This node had a zIndex of 1000. The below code corrected the issue:
var dij = dijit.byId(dojo.query("[id*='_TooltipDialog_']")[0].id);
dij.onShow = function() {
dojo.style(dij._popupWrapper,"zIndex",900);
}
I would like to use an actionsheet but am unclear where to place it. I have tried adding it to a button event function but it doesn't show (the modal screen does however). I get a message about ActionSheet#show showing a component that currently doesn't have any container. Please use Ext.Viewport.add() to add this component to the viewport. Not sure how to do that - using Ext.Viewport.add() doesn't work for me - i may be because of my layout which is:
I have a viewport controller/view which is a card layout. When I click a button I have a function in the viewport controller that loads a new controller/view card in the viewport. The actionsheet is in one of these cards. The app is to big to post so hopefully it makes sense.
I have tried adding the actionsheet in my view items array but do not know how to make it show - making a reference to the xtype actionsheet doesn't return an object with a show() method it seems.
Edit: after more experiments it seems the issue is that I am placing it inside of a card - the card layout container has a relative position and the actionsheet absolute - somehow this is causing the actionsheet to go off screen. Setting card container to absolute fixes it but now I have problems with navbar positions. Suggestions?
So a bit stuck...
This is what you need to do to show your action sheet :
var actionSheet = Ext.create('Ext.ActionSheet', {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
});
Ext.Viewport.add(actionSheet);
actionSheet.show();