I am using Extjs for my application. Which event/listener is fired when extjs completely loads the application (images and everything)?
I tried following but none of these worked:
body or window onload (body tag is empty)
viewport render listener
What I am doing currently: When I start the application it displays "loading" mask. Then an ajax request is fired and when it is completed, "loading" mask is removed. Following might give some idea:
Ext.onReady(function(){
Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
Ext.ux.mask.show(); // Show the mask
// All components are loaded eg. viewport, tabpanel, button etc...
ajax_request(); // Somewhere between the code ajax request is called
// All components are loaded eg. viewport, tabpanel, button etc...
function ajax_request() {
// Other processing
Ext.ux.mask.hide(); // Hide the mask
}
});
The problem is the ajax request is taking much time now so i want to change the working something as follows:
Ext.onReady(function(){
Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
Ext.ux.mask.show(); // Show the mask
// All components are loaded eg. viewport, tabpanel, button etc...
ajax_request(); // Somewhere between the code ajax request is called
// All components are loaded eg. viewport, tabpanel, button etc...
function ajax_request() {
// Other processing
//Ext.ux.mask.hide(); // Hide the mask - removed
}
// I want to call this when everything is loaded on the page
function everything_loaded() {
Ext.ux.mask.hide(); // Hide the mask
}
});
Any idea on this? Thanks a lot for help.
What ExtJs version are you referring to? 3.x or 4.x?
If 4.x, consider using/following the MVC Application Architecture guidelines. In that case, you want to override Ext.application.launch as described in MVC Application Architecture or Ext.app.Application
If 3.x, I guess Ext.onReady() is the best they have.
UPDATE
Based on your updated question, this is what you are looking for -
Ext.onReady(function(){
Ext.Ajax.on('beforerequest', showSpinner, this);
Ext.Ajax.on('requestcomplete', hideSpinner, this);
Ext.Ajax.on('requestexception', hideSpinner, this);
...
}); //end of onReady
showSpinner = function(){
//setup and show mask
}
hideSpinner = function(){
//hide mask
}
Reference - Ext.Ajax
base on your update.... i got conclusion that you are using Ext version 3.x.x
When I start the application it displays "loading" mask. Then an ajax request is fired and when it is completed, "loading" mask is removed
how did you call the ajax ?? why don't you hide the mask in ajax callback ?
Ext.Ajax.request({
url : "blabla",
method : "GET",
callback : function(){
Ext.ux.mask.hide();
}
});
or, mybe you want to try this one (this is what i used to show preload)
Try the afterlayout event and specify a method to execute when it's trigered
Thanks to amol and Warung Nasi 49. Although I couldn't find the best way, I manage to get almost expected result:
Ext.onReady(function(){
Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
Ext.ux.mask.show(); // Show the mask
// All components are loaded eg. viewport, tabpanel, button etc...
setTimeout(function(){
Ext.ux.mask.hide();
}, 2000);
});
Related
I'm using the autocomplete editor of HOT, but needed to have my own template of the option-list. I've been able to accomplish that, by removing the default display and replacing it with my own while doing a lazy load of its content. But I need to perform specific tasks on each of the options being clicked.
The issue is that I cannot find a way to have my <a ng-click='doSomething()'> or <a onclick = 'doSomething()'> tags to find my "doSomething" function.
I've tried the extend prototype of the autocomplete instance, have put my function out there on my controller to no avail. Is there any way I can insert a delegate function inside this editor that could be triggered from inside my custom-made template? (Using angularjs, HOT version 0.34)
Dropdown options cannot interpret HTML instead of Headers.
To perform action when an option is selected you can use Handsontable callback : AfterChange or BeforeChange
Here you can find all HOT callbacks https://docs.handsontable.com/0.34.0/tutorial-using-callbacks.html
This JSFiddle can help you http://jsfiddle.net/fsvakoLa/
beforeChange: function(source, changes){
console.log(source, changes)
},
afterChange: function(source, changes){
console.log(source, changes);
if(!source) return;
if(source[0][1] == 0){//if ocurs on col 0
let newsource = optionsWBS[source[0][3]];
cols[1] = {
type : 'dropdown',
source: newsource,
strict: false
};
hot.updateSettings({columns: cols});
hot.render();
};
}
Thanks, I actually needed actions specific to each area being clicked. What I did to make it work was this: while inserting the items for the list, I created the element and bound it to the function right away: liElement = document.createElement('li') .... liElement.onclick = doSomething(){} .... got it working this way ..
When the user clicks this camera icon the get a snapshot of the page in a modal. If they click repeatedly it will make multiple snapshots before the modal has loaded and essentially blocked the camera icon.
Is there a way that I can say if a snapshot modal has just been created do not create another one?
events: {
'click .snapshot-camera' : 'clickCamera'
}
clickCamera: (event) ->
event.preventDefault()
#snapshot = new ******.Models.Snapshot({ user_id: ******.State.get('signInUser').id })
You can use underscore's debounce method which prevents double submissions.
// prevent double-click
$('button.my-button').on('click', _.debounce(function() {
console.log('clicked');
/* .. code to handle form submition .. */
}, 500, true);
Have a look into the below article
http://jules.boussekeyt.org/2012/backbonejs-tips-tricks.html
I want to render some Ext components into the output of an XTemplate. We want to have the flexibility of using an XTemplate to render the HTML but retain the styling, behaviour, and handlers of using Ext components rather than plain old HTML elements.
I am currently successfully doing this with an Ext.Button. In the template I am writing a placeholder div like so:
<div id="paceholder-1"></div>
After I have called apply() on the template I then create a new Ext component and render it in like so:
this._replacePlaceholders.defer(1, this, [html, 'placeholder-1', collection]);
The _replacePlaceholders function looks like this:
_replacePlaceholders: function(html, id, collection) {
var emailField = new Ext.form.TextField({
emptyText: 'Email address',
hideLabel: true
});
var downloadButton = new Ext.Button({
text: 'Download as...',
icon: 'images/down.png',
scope: this,
menu: this._createDownloadOptionsMenu(collection) // Create Menu for this Button (works fine)
});
var form = new Ext.form.FormPanel({
items: [emailField, downloadButton]
});
downloadButton.render(html, id);
}
This works and renders the button into the html correctly. The button menu behaves as expected.
But if I change the last line of replacePlaceholders to emailField.render(html, id); or form.render(html, id); I get a javascript error.
TypeError: ct is null
ct.dom.insertBefore(this.el.dom, position);
ext-all-debug.js (line 10978)
I'm a bit confused because from what I can tell from the docs the render() method called is going to be the same one (from Ext.Component). But I've had a bit of a play around and can't seem to track down what is happening here.
So is there any good reason why these components behave differently from Ext.Button? and is it possible to render an Ext.form.TextField or an Ext.form.FormPanel or anything that will let me use an Ext text field in mt XTemplate html?
NB. I am using ExtJS 3.3.1 and don't have the opportunity to upgrade the version. I believe ExtJS 4 has functionality which would make doing what I doing much easier.
Thanks!
Solution is quite simple - use form.render(id) instead of form.render(html, id).
See [api][1] if you have doubts.
The reason why button is rendering properly is that it has weird onRender implementation, different from Component.
onRender : function(ct, position){
[...]
if(position){
btn = this.template.insertBefore(position, targs, true);
}else{
btn = this.template.append(ct, targs, true);
}
[...]
}
As you can see in code above, if you provide position (which is basically second argument provided to render) it doen't use ct (which is first argument passed to render).
In normal component onRender method looks like this:
onRender : function(ct, position){
[...]
if(this.el){
this.el = Ext.get(this.el);
if(this.allowDomMove !== false){
ct.dom.insertBefore(this.el.dom, position);
if (div) {
Ext.removeNode(div);
div = null;
}
}
}
}
In code above, you can see, that ct is called always, despite the position is not null.
The bottom line is that rendering of button works by accident.
Using Wijmo Open ComponentOne's Dropdown, I tried to place it in a registration form that displays when a button is clicked. This form is inside a jquery modal window.
The problem is that it is not displayed like a wijdropdown inside the form.
I supposed that since is was hidden, then it wasn't part of the DOM and so I added a method in the callback of the function that displayed the modal window; when the modal window finishes displaying, then call the .wijdropdown() on the element. However, it didn't work.
In conclusion: the select tag is not being wijdropdowned...
¿Any recommendations?
Script
$(function() {
// show overlay
$('#product-slideshow-overlay-trigger').live('click', function() {
var $registerOverlay = $('#product-slideshow-overlay');
//left position
var positionLeft = ($(window).width() - $registerOverlay.width())/2;
$registerOverlay.css({'left':positionLeft});
//show mask
$('#mask').fadeIn();
$registerOverlay.slideDown(function()
{
console.log("Started");
/**Add WijmoDropdown***/
$('#estado').wijdropdown(function()
{
console.log("Did the wijdropdown");
});
console.log("Ended");
});
return false
});
}); // end document ready function
Refresh the wijdropdown when the dropdown is not hidden:
$('.wijmo_drp').wijdropdown("refresh");
or
Find the wijmo component and check if it's visible or not (styled or not).
And trigger the visiblity changed event when you display the modal window.
if($('.wijmo-wijobserver-visibility').is(':visible'))
{
$('.wijmo-wijobserver-visibility').trigger("wijmovisibilitychanged");
}
I have an (Ext JS) tab panel where the hidden tabs aren't loaded at all upon initial instantiation, (the only thing I set is the title).
Upon 'activation' of a tab I want to call a method , which then instanstiates a new FormPanel/GridPanel and put this content into the tab.
Can someone point me to a code example or give me tips on how to do this??
Thanks so much!
Just build a new panel and add it to the activated tab. Then call doLayout().
listeners: {
activate: function(panel) {
var formPanel = ....
panel.add(formPanel);
panel.doLayout();
}
}