Does ExtJS provide some quick way to check whether a given component is currently visible? I would normally check css properties like display and visible but what when one of parent elements is hidden?
Try Ext.Component.isVisible()
Ext.Component.isVisible()
Will work if element was hidden by ExtJs functionality.
If parent component will be hidden (e.g. by using jquery's toggle method calling) - this will not work. So in this case I have used such check:
var el = $('#real_id'); // Id of the inner element
if($(el).is (':visible') && $(el).parents (':hidden').length === 0) {
// The element is 100% visible
}
You'll ask why do I need jQuery - the answer is simple: some things can be done more quickly with it... :)
Related
I'm using http://accessibilityinsights.io/ to make sure my QML application passes Microsoft requirements for accessibility.
There's only one error that I couldn't resolve.
Qml ComboBoxes don't have the ExpandCollapse pattern.
Code to reproduce:
ComboBox {
model: ["First", "Second", "Third"]
}
Accessibility Insights says "An element of the given ControlType must support the ExpandCollapse pattern. Section 508 502.3.10
And "How to fix":
1. Make sure the element has the appropriate ControlType property for its function.
2. If the current ControlType is correct, modify the element to support the ExpandCollapse pattern.
StackOverflow couldn't help me. Google couldn't help me (I tried looking everywhere...)
So I went to Qt's source code.
I found this: qt-everywhere-src-6.2.1\qtbase\src\plugins\platforms\windows\uiautomation\qwindowsuiamainprovider.cpp
And here's the part that was interesting:
case UIA_ExpandCollapsePatternId:
// Menu items with submenus.
if (accessible->role() == QAccessible::MenuItem
&& accessible->childCount() > 0
&& accessible->child(0)->role() == QAccessible::PopupMenu) {
*pRetVal = new QWindowsUiaExpandCollapseProvider(id());
}
Which means that there must be a MenuItem object (the qml combobox doesn't have that), nor a child that's a PopupMenu.
So I checked, and the ExpandCollapse pattern works fine in a menu (from QWidgets), but not in qml.
I couldn't change the combobox's role (Accessible.MenuItem), it doesn't register for some reason (perhaps because of the c++ backend)
I tried "hacking" this in qml, to see if it could work, with this:
MenuItem
{
text: "test"
Rectangle {
Accessible.role: Accessible.PopupMenu
visible:false // to make the state "collapsed" by default.
}
}
And ... it works. I have the pattern.
But obviously this isn't a combobox (not by name, not for accessibility, and not for functionality).
So here's my question: is there a way to maybe have my custom combobox to have the combobox Accessible.role, while having this structure (Accessible.MenuItem + Accessible.PopupMenu) to make qwindowsuiamainprovider.cpp add the ExpandCollapse pattern?
Or is the only way to find a way to either change qwindowsuiamainprovider.cpp, or override it or something?
I couldn't find any way to change it without recompiling Qt myself with this change (I would also have to check the license if I'm allowed to do it...)
I am using the Jquery UI datetimepicker (http://trentrichardson.com/examples/timepicker/ )
I need to show the seconds slider on the date time picker, dynamically based on the value of a flag.
what is the best way to enable/disable or show/hide the second's slider?
What I am looking for is a way to set "showSecond" option dynamically.
Got it with a little digging, I was able to do it as below.
Add beforeShow method while initiliazing the datetimepicker.
update the showSecond flag inside the beforeShow method.
$('#datepicker')
.datetimepicker({beforeShow: beforeShowFn});
function beforeShowFn(input, dp_inst) {
dp_inst.settings.showSecond = false
}
Not sure if there is a better way.
I'm exploring the markAvailable property of this example.
I would like to add a transition while the ports color change.
So I changed the css as follow:
/* port styling */
.available-magnet{
fill: yellow;
transition: fill 0.5s;
}
.port circle{
transition: fill 0.5s;
}
But I still do not get any transition.
UPDATE
I created an example. It is clear that the problem is inside defaultLink property. In particular, removing the z attribute I get the right transition, but in this way I lost a fundamental property for my need, that is indeed to have all links with the lower z index.
The Example reported in the Update is correct.
In order to maintain each link on the back of other elements (that corresponds to set a z value equals to -1), Simply use the method link.toBack() each time a new link is created. In this way the transitions work.
Use -webkit-transition if you are in Chrome if you are in Mozilla use -moz-transition
Do Raphael sets accept event handler? When I set an event handler on a raphael set, it seems that it is instead assigned on each of the Raphael shapes inside the set and not on the set itself as you can see here if you try to click the set:
http://jsbin.com/aponen/3/edit
I'm not interested in various hacks such as chaining elements inside a set with the set itself via custom attributes or similar approaches.
Thanks
Yes, the event handler is applied to each object individually -- Raphael does not make use of the <g> element of SVG. However, you can fix your issue here with a few keystrokes:
set.push(rect);
set.push(circle);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
//old
this.attr({'fill': 'red'});
//new
set.attr({'fill': 'red'});
});
The biggest difference in the way it works and the way you thought it might work is the meaning of "this" inside the handler. Changing it to "set" will fix that right up.
UPDATE, Jan. 26, 2013
Per comments, you could also attach the set to the children of the set with one line, using Raphael's "data" method:
set.push(rect);
set.push(circle);
set.data('myset', set);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
this.data('myset').attr({'fill': 'red'});
});
I don't believe there is a native way to access the set from children, but I could be missing it.
I'd like a graphical container that I can add and remove my custom widgets to where I can set a sort function that is automatically applied when these operations take place.
Is there a suitable object in Dojo already that I've missed? Or maybe I'm not thinking about the problem correctly?
If not, are there any examples etc. of a minimal working custom container widget out there?
Dont think there is really - how would a standard component's sort functionality know, with which parameters it should weight the order, when containers can contain any widget type?
Using a layout widget extension would be your best option imho. They each have a function to add children, following this prototype:
addChild(/*Object*/ dijit, /*Integer?*/ insertIndex)
The dijit.layout.StackContainer is a good starting point, it inherits from dijit._Container (and dijit.layout._LayoutWidget). So you choose when to call the extension functionality of your override.
dojo.declare("my.Container", [dijit._Container], {
getSortOrder : function(newDijit) {
var newIndex = -1; ??
// something to work with
var currentChildren = this.getChildren();
var currentDescendants = this.getDescendants();
return newIndex;
},
addChild: function(dijit, index) {
// figure out index
arguments[1] = this.getSortOrder(dijit);
this.inherited(arguments);
}
});
But be aware, that layoutwidgets has more to it then choosing order, also positioning like with bordercontainer's region parameter.
Use SitePen's dgrid, then define a List widget with a column of type Editor. Send your custom widget to the Editor's parameter. dgrid's List widget should be able to sort as if it were a grid based on your data, and the Editor column should be able to display anything you want as part of a List's item's content.
If you need anything I'll be around. Luck,