Sencha touch application loading mask - javascript

I have a sencha touch application, but want to apply a loading mask to the entire app while the page is loading. (i.e. while the Javascript files etc are loading)
In ExtJS, I used to have a full sized div with a loading image, then as the first action of the "onReady" I used to fade that div out then remove it. Unfortunately, fadeOut() doesnt seem to be available in SenchaTouch
My app definition is as follows:
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Hello World'
});
}
});
Any pointers would be appretiated

You can make use of the Ext.LoadMask class. There is an example:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
When you finish loading some Ajax requests or doing your task and to remove the mask, you can:
myMask.hide();

Hey you can also try this below code while doing ajax request and loading data
var mask = new Ext.LoadMask(Ext.getBody(), {msg:"wait msg..."});
Ext.Ajax.on('beforerequest', function(){
mask.show();
});
Ext.Ajax.on('requestcomplete', function(){
mask.hide();
});
Ext.Ajax.on('requestexception', function(){
});

Here is how I go about it:
Ext.getBody().mask().addCls('black-background');
.black-background {
opacity: 1;
background: black;
}

Related

Scripts not loading after loading new page using AJAX (Barba.js)

I'm exploring the option of using AJAX to give elegant page transitions.
I've tried two methods, the first being a manually coded option taken from this page (https://codyhouse.co/gem/animated-page-transition) and the second option using Barba.js (http://barbajs.org).
With both options the scripts on the website work when the first page is loaded, but when a link is clicked and a different page is loaded via AJAX, none of the scripts work.
Originally I had my scripts loaded into the end of each page using an embedded html file (I'm using ExpressionEngine). After reading a number of posts on this site I thought it might help to put the scripts into their own JS file so that this is cached and each page can then use these scripts but this didn't work either.
Is there a way to tell AJAX or Barba.js to run the scripts each time it changes the page?
Here's my code to start Barba:
<script type="text/javascript">
$(document).ready(function () {
// START BARBA.JS
Barba.Pjax.start();
// BARBA.JS PAGE TRANSITIONS
Barba.Pjax.start();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
* This function is automatically called as soon the Transition starts
* this.newContainerLoading is a Promise for the loading of the new container
* (Barba.js also comes with an handy Promise polyfill!)
*/
// As soon the loading is finished and the old page is faded out, let's fade the new page
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
/**
* this.oldContainer is the HTMLElement of the old Container
*/
return $(this.oldContainer).animate({ opacity: 0 }).promise();
},
fadeIn: function() {
/**
* this.newContainer is the HTMLElement of the new Container
* At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
* Please note, newContainer is available just after newContainerLoading is resolved!
*/
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility : 'visible',
opacity : 0
});
$el.animate({ opacity: 1 }, 400, function() {
/**
* Do not forget to call .done() as soon your transition is finished!
* .done() will automatically remove from the DOM the old Container
*/
_this.done();
});
}
});
/**
* Next step, you have to tell Barba to use the new Transition
*/
Barba.Pjax.getTransition = function() {
/**
* Here you can use your own logic!
* For example you can use different Transition based on the current page or link...
*/
return FadeTransition;
};
});
</script>
And here's the script that I'm trying to get to work:
// DROPDOWN MENU
$(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").addClass("arrow");
});
Thanks in advance,
Tom
I don't meet barba.js, but in jquery when we use $(function{...}); is like use $(document).ready(function(){...}); It's launched when document is ready. Probably is not launched when your animation ends. I'm not sure, but you can try creating different views, and write your custom javascript code inside onEnter callback method:
view:
<div class="barba-container" data-namespace="homepage">
javscript:
var Homepage = Barba.BaseView.extend({
namespace: 'homepage',
onEnter: function() {
// The new Container is ready and attached to the DOM.
YOUR JS !!!!
},
onEnterCompleted: function() {
// The Transition has just finished.
},
onLeave: function() {
// A new Transition toward a new page has just started.
},
onLeaveCompleted: function() {
// The Container has just been removed from the DOM.
}
});
// Don't forget to init the view!
Homepage.init();
http://barbajs.org/views.html
you question is quit unclear,
basically ajax is used to render loaded page, if your page is already loaded then
just add this script to your root web page, and check if it is working or not after ajax call.

about Extjs afterLayout

I added a listener in the code like:
listen: {
afterLayout: function(){
doSomething...
}
}
the function is to render the html tags. But it does not work when the page loaded. I need to force rendering the page like change the size of browser will it work. I wanna know why. "afterLayout" should work automatically after the page loaded right? Or do I miss something?
You are using a wrong config. Instead of listen: { use listeners: {
Here is an example for you: https://fiddle.sencha.com/#fiddle/16gu
Ext.application({
name : 'afterRender Test',
launch : function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
listeners: {
afterRender: function() {
this.update('<div style="width:300px; background-color:red; padding:10px;">Added via afterRender listener</div>');
}
}
});
}
});
I think the event your searching is afterrender.
Afterlayout only fires when the window size change and not on the load.
afterrender event match after the layout of the interested component is loaded.
so you should try with this:
listen: {
afterrender: function(){
doSomething...
}
}
If you must call the same function in all the cases call it on afterrender and on afterlayout
I think your problem can solve viewport.
wrap your application in this component. viewport will listen to window size change and automatically re size it's child elements (your application)

Load jQuery after ExtJS

Disclaimer: ExtJS - intermediate level;
jQuery - beginner
I've looked for a solution for this but had not found anything yet.
I have both ExtJS and jQuery in one file and I want to be able to execute the jQuery right after the ExtJS is done building a page (is this even possible).
Example:
function renderPage(){
// ExtJS goes here
}
How do I call jQuery after renderPage() is completed?
I tried the following:
$(document).ready(function() {
$("tr").css("background-color", "yellow");
});
$(document).ready(function(renderPage) {
$("tr").css("background-color", "yellow");
});
function renderPage(){
// ExtJS goes here
// ...
$("tr").css("background-color", "yellow");
}
but it doesn't work. I assume it is because the ExtJS is not done rendering the page when jQuery is getting called and it is not finding anything to select.
Additional information:
I know my jQuery works and is connected to the library because I was able to select HTML elements that are rendered before any script ExtJS or jQuery script is run and modify their style.
Thanks!
Ext components fire an afterrender event that you can hook into, but you have to be careful here because it can fire more than once if you render more than once (which is easy to do accidentally). This is an example of a simple app that fires afterrender once for a panel.
Ext.application({
name : 'Fiddle',
launch : function() {
var panel = Ext.create('Ext.Panel',{
renderTo:Ext.getBody(),
title:'myPanel',
items: [
Ext.create('Ext.Button', {
text: 'Click me!!!!',
handler: function() {
alert('You clicked the button!');
}
}),
{
xtype:'toolbar',
items: [{text:'Button 1'}, {text:'Button 2'}],
listeners: {
afterrender: function () {
Ext.Msg.alert('Fiddle', 'done with ext rendering, do jQuery stuff');
}
}
}
]
});
}
});
sencha fiddle: https://fiddle.sencha.com/#fiddle/eqg
I would recommend not mixing these two libraries without a really good reason - Ext has virtually the same DOM helper functionality as jQuery - if you are just changing a class something like Ext.dom.Element.addCls might be more appropriate (http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.dom.Element)

jQuery Mobile; twentytwenty plugin will only show up when the browser window is resized

I'm not sure why this is happening, as I've followed the directions on Zurb's website. It doesn't matter what size the window is upon opening the page with TwentyTwenty, it will only show the slider once the page has been resized. The plugin works flawlessly aside from that. I have a feeling there's some way to adjust the following to make it load without resizing the window...
$(window).load(function() {
$(".twentytwenty-container").twentytwenty();
});
Maybe? Much appreciated.
It's a little bug, but fixed by add code.
Add this to jquery.twentytwenty.js file:
$(window).load(function() {
$(window).trigger("resize.twentytwenty");
});
$.fn.twentytwenty = function(options) {
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
// >>>>> HERE ADD CODE <<<<<<
return this.each(function() {
//.......
source: https://github.com/zurb/twentytwenty/pull/69/commits/471a824bf5ab233797d0de689a5be105347c81e2
I've sat on this same issue for a long time. I was using the class to .twentytwenty-container in the code. When I switched it to an id (here, #container-id), the issue seemed to go away.
$(window).load(function(){
$("#container-id").twentytwenty({
default_offset_pct: 0.5, // How much of the before image is visible when the page loads
orientation: 'horizontal' // Orientation of the before and after images ('horizontal' or 'vertical')
});
});
Does this work for anyone else?

Which is proper listener to use doLayout function?

I am working in EXTJs, Please check below example:
var containerForm=Ext.widget('panel',{
width: 1100,
border: false,
frame: true,
"layout":"fit",
title: 'Add User',
hidden:true,
listeners:{
'afterrender': function(panelObj,eOpts )
{
panelObj.doLayout();
}
}
});
Html of above panel is updating via ajax response as shown in the following code:
formObj.update(jsonResp.html,true,function(){
containerForm.doLayout();containerForm.focus();
});
containerForm is auto height panel, because this panel is used for multiple pupose,
When "formObj.update" populating this panel content, it's content loading properly but
If ajax response "jsonResp.html" has any image, that time doLayout() function is not helping to align panel height properly,
i added doLayout function at 2 places but callback function is not helping me in above case:
when i call doLayout function after 2 seconds then only it's work correctly:
formObj.update(jsonResp.html,true,function(){
setTimeout('containerForm.doLayout(); containerForm.focus();', 2000);
});
Which is proper listener to use doLayout function?
You could take a look at the Mutation Events but these are not cross browser compatible. If they were, you could try:
formObj.on('DOMSubtreeModified', function(){containerForm.doLayout();}, this);
You really just need to make sure your formObj.update() is complete. That is why your timeout is helping. If you want to make sure the innerHtml is set, just check it yourself.
If you look at the Source for Ext.dom.Element.update(), it is just using dom.innerHtml to update the html. In your update callback, you could check to see if the innerHtml is there before calling doLayout(). Some simple example code I threw together quick.
var doLayoutIfComplete = function(){
if(document.getElementById('formObjId').innerHTML == jsonResp.html){
containerForm.doLayout();
}
else{
doLayoutWhenComplete.delay(500); //Check again in 500ms
}
}
var doLayoutWhenComplete = new Ext.util.DelayedTask(function(){
doLayoutIfComplete();
});
formObj.update(jsonResp.html,true,function(){
doLayoutWhenComplete.delay(500);
});

Categories

Resources