I am able to mask() then unmask() a chart before and after it's rendered with : chart.mask() then chart.unmask().
But I want to add a loading message while it's masked, how can I do it? I'm using Extjs 4.1 with MVC.
Ext.Component (from which chart inherits) and Ext.dom.Element both have a mask method. But Ext.dom.Element's one accepts a msg argument.
That means you can achieve what you want with this kind of code:
chart.el.mask('My message');
Now there are a couple more things to take into account.
The most important is to ensure that the element is defined before calling its mask method. In effect, due to possible load delays or render deferrings, it might happen that some events or methods are called on components that have been destroyed or not yet rendered.
The second thing is that with this method, you won't have the loading CSS class by default. You can pass it as the second argument to mask if you want it; the class is 'x-mask-loading'.
With all that, the code should rather look like this:
var maskEl = chart.getMaskTarget() // this one's marked as private... maybe we shouldn't use it
|| chart.getEl();
if (maskEl) {
maskEl.mask("Loading...", Ext.baseCSSPrefix + 'mask-loading');
}
Unmask similarly. The check that the element still exists will be even more important there, because the chance that the component has been destroyed (e.g. window or tab closed) before the load is done is even greater.
Related
I am facing an issue with my controllers refs and the returned object being invalid. And by invalid it returning me an object that says it has not been rendered even though i am in the process of using it.
In my controller I have a ref defined as the following.
refs : [ {
ref : 'selectDeltaView',
selector : '[itemId=selectDeltaView]'
}]
and later in my controller I access this view using the created accessor
this.getSelectDeltaView()
What is strange is that the first time this view is presented, inside of an Ext.Window it works just fine. However, on the second launch the view I get back is not rendered.
this.getSeletDeltaView().rendered === false
Reading the documentation over at Sencha it seems that this simply passes my selector to the Ext.ComponentQuery.query function. However, if I call Ext.ComponentQuery.query('[itemId=selectDeltaView]') I get an array with a single element of which rendered is true.
Am i missing something? Why is my controllers reference returning me invalid data.
Update
Some additional details not mentioned in the original post. My initial assumption was that my view was not being destroyed. However, I have log statements in my ondestory and beforedestory events and can confirm that on closing the window my view is being destroyed.
What is the most confusing is that if refs simply use Ext.ComponentQuery.query, why does Ext.ComponentQuery.query only return one view when the window is re-opened and it returns the correct view. I understand from the question below that refs will catch the view, but that view no longer exist.. or shouldn't.. If the view is destroyed, can I force the controller to clear its catch?
The controllers reference is cached after the first evaluation.
What happens is this:
You open your view a first time.
getSeletDeltaView() finds that view, and stores a reference to it in the reference lookup cache.
You close the view, but you do not destroy it completely.
You open the view a second time, but it is a different instance.
getSeletDeltaView() finds the first view, that is no longer rendered, but still exists, because it was not destroyed. You cannot use this reference, because it point to the wrong view.
Solution:
Make sure to destroy() your view, when you hide it. You can also use autoDestroy as a property. Usually, autoDestroy is true by default.
I have a table of rows where are dynamically added, but for some reason the on() event doesn't seem to fire when I change the value of a select.
For simplicity, I wrote the following jsFiddle. This is a VERY simplistic example of what I am doing. I do have to note that I was unable to verify if the jsFiddle failed the same way in IE7 because jsFiddle does not seem to work in IE7 at all.
The basics of my code are this...
First, the page loads with 1 or more of these rows, which represent a complex "subform" to be posted to Spring MVC. The subform has a group of 5 SELECT tags that have an event handler attached at the top TABLE as such:
$('#parentTable').on('change', 'div.additional div[class^="additional"] select', function() {
// ...enable/disable siblings according to value
}
At the bottom of the table is an Add button. When the user clicks it, I take the last visible row, clone it, use regex to fix the index on the name/id, and set all the fields blank and disables except one field, which is used to do a lookup. This all has the appearance of working.
The user enters a value in the lookup field, clicks Lookup, which performs an AJAX call, filling in the subform then calling the change on the selects to set their default state like so:
$subTable.find(':input:not(:button)').change();
This fires the above on() as expected. However, if I physically click on the resulting SELECTs and change their values the on() event handler is not called.
I have verified that the resulting cloned table row looks/smells/feels correct, at least from using IE8's Developer Tools (I have IE8 in IE7 compatibility mode for testing, because IE7 has VERY limited testing and the problem seems to be present there too). When I run this in Chrome it works perfectly fine, however I am aware the clone is technically working differently.
Any help would be appreciated.
Update
I tried swapping the selector to drop the class attr as suggested below:
$('#parentTable').on('change', 'div.additional div select', function() {
// ...enable/disable siblings according to value
}
And I tried all caps like the referenced post:
$('#parentTable').on('change', 'div.additional div[class^="ADDITIONAL"] select', function() {
// ...enable/disable siblings according to value
}
The first worked the same way, the second did nothing at all (disabled all on() change handling).
Will continue to play with this until I get it working. There has to be something simple going wrong here.
Update 2
I tried adding a class to all the `SELECT`s, and added the following two:
$('select.addedClass').on('change', function() {
alert("Select change:" + $(this).val());
});
$('#parentTable').on('change', 'select.addedClass', function() {
alert("Select change 2:" + $(this).val());
});
Here is the process I performed:
Reloaded page, both alerts fire for the single row there
Added a row
Performed AJAX lookup, which calls $addedTable.find(':input:not(:button)').change(); as described above, both events fire
Change the value of one of the selects, neither alert fires.
I would expect the first to fail, since the event listener is connected directly to the SELECT and not a higher level parent, but the second one fails the same way. So, in the Developer Tools, I tried to run the following:
$('#order.itemList1.additionalLine1').change()
Which is the ID of one of the selects I added, and still nothing fired. It's as if the event handler is ignoring all added SELECTs.
To make sure the select was working on the on(), I did this in the console after I added the new row:
$('#parentTable').find('div.additional div[class^="additional"] select').each(function() {
alert($(this).attr('name') + '(' + $(this).prop('id') + ')' + ' : ' + $(this).val());
});
Update 3
I ended up putting in a horrible hack that, for IE7 only, drops and re-adds the change handler directly on the SELECTs. It's ugly, but I have to support IE7, so...
I am leaving this open to see if anyone has a better solution, or might know why it's not working.
The problem isn't the change event, or the delegation on select elements.
It's the attribute selector:
div[class^="additional"]
IE7 and below don't do attribute selectors.
I've done a bit of searching and a few people seem to think this can be solved using case-specific syntax.
(Follow on questions from Placeholder Hidden)
I'd like my form to validate existing data when it is loaded. I can't seem to get that to happen
I jQuery.each of my controls and call focus() and blur(), is there a better way than this? I tried to call ctrl.checkValidity(), but it wasn't always defined yet. When it was, it still didn't mark the controls.
I seem to have a timing issue too, while the focus and blur() fire, the UI does not update. It's as if the Webshims are not fully loaded yet, even though this fires in the $.webshims.ready event.
I also tried to call $('#form').submit(), but this doesn't fire the events as I expected. The only way I could make that happen was to include an input type='submit'. How can I pragmatically case a form validation like clicking a submit button would?
Here's a jsFiddle that demonstrates the problem. When the form loads, I want the invalid email to be marked as such. If you click the add button it will be marked then, but not when initially loaded. Why?
Focus and blur in the control will cause it to be marked.
BUT, clicking ADD will too (which runs the same method that ran when it was loaded). Why does it work the 2nd time, but not when initially loaded?
updateValidation : function () {
this.$el.find('[placeholder]').each(function (index, ctrl) {
var $ctrl = $(ctrl);
if( $ctrl.val() !== "" && (ctrl.checkValidity && !ctrl.checkValidity()) ) {
// alert('Do validity check!');
$ctrl.focus();
$ctrl.blur();
}
});
}
I see this in FF 17.0.5. The problem is worse in IE9, sometimes taking 2 or 3 clicks of ADD before the fields show in error. However, I get errors on some of the js files I've liked 'due to mime type mismatch'.
This has to do with the fact, that you are trying to reuse the .user-error class, which is a "shim" for the CSS4 :user-error and shouldn't be triggered from script. The user-error scripts are loaded after onload or as soon as a user seems to interact with an invalid from.
From my point of view, you shouldn't use user-error and instead create your own class. You can simply check for validity using the ':invalid' selector:
$(this)[ $(this).is(':invalid') ? 'addClass' : 'removeClass']('invalid-value');
Simply write a function with similar code and bind them to events like change, input and so on and call it on start.
In case you still want to use user-error, you could do the following, but I would not recommend:
$.webshims.polyfill('forms');
//force webshims to load form-validation module as soon as possible
$.webshims.loader.loadList(['form-validation']);
//wait until form-validation is loaded
$.webshims.ready('DOM form-validation', function(){
$('input:invalid')
.filter(function(){
return !!$(this).val();
})
.trigger('refreshvalidityui')
;
});
I have requirement to show custom pop up warning message when user changes any value (text box/LOV) on page and close tab/cancel button by mistake.
Option I tried are:
a) Within application we are using a complex task flow/RegionModel for 7 different scenario's. Also requirement is to display custom message - Hence could not use approach "unsaveddatawarning"
http://www.oracle.com/technetwork/developer-tools/adf/unsaveddatawarning-100139.html
b) Second option I tried was to have custom region controller:
CustomRegionController implements RegionController
Inside validateRegion(RegionContext regionContext) thought to find if page data is dirty
AdfFacesContext.getCurrentInstance().getDirtyPageHandler().isDataDirty();
or
DCBindingContainer dcBindings = (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
DCDataControl cDataControl = dcBindings.getDataControl();
boolean dirtyFlag = cDataControl.isTransactionModified();
In both scenario it always gives true (seems due to common set of VO/View Link application module always gets dirty when data is being rendered on page load).
Last option I am left with is to invoke valueChangeListener for each element (textbaox, LOV, Check box). I do not like this option at all. Please suggest if there can be better way to handle this scenario.
Why is using a value change listener a problem? Have each input component call the same VCL method in the backing bean. If necessary you can get the component id from the vcl event object.
I am using Jquery plugin http://timeago.yarp.com/ for showing time.
Issue is timeago will not take effect for dynamically generated items.
$(document).ready(function() {
$(".timeago").timeago(); // works perfectly fine for the items which are loaded on page load
//$(".timeago").live(timeago()); // gives me an error ie timeago is not defined
//$(".timeago").live($(".timeago").timeago()); // gives me an error too much recursion.
jQuery.timeago.settings.allowFuture = true;
});
From some google search I got to know something ie:
Using live is the same as using bind, except that it is limited only to the events click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
Now how can do it cause I dont have any click event? How can I bind this?
.live() and .bind() assign callbacks to event. In your case, you don't have an event to assign the function to and so it fails.
You can, in theory, assign your callback to a custom event. You will however have to manually trigger the event (using .trigger()) whenever your item is generated. For example:
$("abbr.timeago").live("timeago", function() {
$(this).timeago();
});
// ... and in the bit that generates your item
$new_item.trigger("timeago")
Demo: http://jsfiddle.net/ZjuW4/9
Of course, using .live() in this situation is purely academic and does not really serve a good purpose.
If you do have access to the code that's generating the items, you can simply chain in the call to .timeago() as the items are generated, i.e. http://jsfiddle.net/ZjuW4/3/
take a look in this topic
here was discussed how to put timeago on dynamically loaded items
for example the results of an ajax request.
Activate timeago on newly added elements only
PS: allowFuture does not have anything to do with putting timeago on newly created items on your page. it just allows dates in the future (f.e. "in 3 days", "next week")