I've read many posts about this but still settimeout doesn't work. I suspect it's because of the "this" in the code, and probably because of local/global variable scope. How can I set correctly settimeout to close after 3 seconds the ext.window?, thanks, pls help
action = new Ext.Action({
handler: function(){
if (this.pressed){
if (!this.panelWin){
this.panelWin = new Ext.Window({
border: false,
resizable: false,
draggable: false,
closable: false,
layout: 'fit',
autoWidth: true,
autoHeight: true,
items: [newPanel],
listeners:{
show: function() {
setTimeout("this.panelWin.destroy()", 3000);
}
}
});
}
this.panelWin.show();
}
else
{
this.panelWin.hide();
}
}
});
Try this:
this.panelWin = new Ext.Window({
border: false,
resizable: false,
draggable: false,
closable: false,
layout: 'fit',
autoWidth: true,
autoHeight: true,
items: [newPanel],
listeners:{
show: function() {
var self = this;
setTimeout(function() {
self.destroy()
},3000);
},
scope: this
}
});
with setTimeout and this you need something like this:
var self = this;
setTimeout(function () { self.panelWin.destroy(); }, 3000);
Other than setTimeout(), you can use Ext.TaskMgr or Ext.util.TaskRunner to execute task after specific inteval of time. Use Start and Stop methods according to your need.
Ext.util.TaskRunner
Ext.TaskMgr
Related
I would appreciate it if someone could combine the two scripts found below. I would like to be able to combine the smooth collapsing functionality of the first script with the single-tab-expanding-at-a-time functionality from the second script. I couldn't add the the code completely so please refer to the link if needed.
I would really appreciate this!
Script 1: (complete -http://jsfiddle.net/HcJJZ/3/)
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('.mytabs').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
selected: -1
});
Script 2: (complete - http://jsfiddle.net/fb0z3ezd/4/)
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);
Try this:
Here is JSFIDDLE: enter link description here
$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
var el = $(this),
mode = $.effects.setMode(el, o.mode || "show");
el.animate({
height: mode,
opacity: mode
}, {
queue: false,
complete: done
});
};
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "fade",
pauseOnHover: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "fade",
slideshow: false,
pauseOnHover: true,
useCSS: false,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
var inactiveOpts = {
active: false,
show: {
effect: 'blind'
}
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
tabsOpts = {
collapsible: true,
beforeActivate: function (evt, ui) {
$tabs.not(this).tabs("option", inactiveOpts)
},
activate: function (evt, ui) {
$(currTab).tabs('option', {
show: false
});
}
}
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);
});
});
Hope it helps
I have the following carousel code [fiddle] that returns a different number of items to display based on screen size.
$(function() {
var mini = 1000;
var big = 1280;
if (window.screen.availWidth < mini) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
}
else {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });
}
});
I want to add a .resize function to it so the number of items will also change on window resize. I followed this example but couldn't get it to work. Would anyone please tell me how to add the resize function to my example?
My failed attempt (demo):
function screen_resize() {
var h = parseInt(window.innerHeight);
var w = parseInt(window.innerWidth);
if (w <= 800) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
}
else {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });
}
}
// if window resize call responsive function
$(window).resize(function(e) {
screen_resize();
});
// call responsive function on default :)
$(document).ready(function(e) {
screen_resize();
});
You can write it like this:
window.onresize = screen_resize;
Edit: Your carousel looks good if you call screen_resize once, but breaks if you call it more than once. screen_resize is called in your code though and works as programmed.
I want to show message box when user click (X) button of ext window, and on 'ok' button of message box window will close. I wrote the code but it closes window first than show message box. Here is the code:
var assignReportFlag = 0;
var assignReportLoader = function(title,url){
var panel = new Ext.FormPanel({
id: 'arptLoader',
height: 485,
border: false,
layout: 'fit',
autoScroll: true,
method:'GET',
waitMsg: 'Retrieving form data',
waitTitle: 'Loading...',
autoLoad: {url: url,scripts: true}
});
var cqok = new Ext.Button({
text:'OK',
id:'1',
handler: function(){
if(assignReportFlag == 1){
assignReportFlag = 0;
Ext.MessageBox.alert('Status', 'Changes has been saved successfully',showResult);
}else{
assignReportWindow.close();
}
}
});
var assignReportWindow = new Ext.Window({
layout:'fit',
title: title,
height:Ext.getBody().getViewSize().height - 60,
width:Ext.getBody().getViewSize().width-20,
closable: true,
modal:true,
resizable: false,
autoScroll:true,
plain: true,
border: false,
items: [panel],
buttons: [cqok],
listeners:{
beforeclose:function(){
if(assignReportFlag == 1){
assignReportFlag = 0;
Ext.MessageBox.alert('Status', 'Changes has been saved successfully',showResult);
}else{
assignReportWindow.destroy();
}
}
}
});
function showResult(btn){
assignReportWindow.destroy();
};
assignReportWindow.show();
};
Thanks
In your beforeclose listener return false to stop the close event being fired.
This works fine for me.Have a look
http://jsfiddle.net/DrjTS/266/
var cqok = new Ext.Button({
text:'OK',
id:'1',
handler: function(){
Ext.MessageBox.alert('Status', 'Changes has been saved successfully',showResult);
}
});
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
renderTo: Ext.getBody(),
items:[
{
xtype:'button',
text:'SUBMIT',
handler:function(thisobj)
{
Ext.create('Ext.window.Window', {
id:'W',
height: 200,
width: 400,
layout: 'fit',
buttons: [cqok],
listeners:{
beforeclose:function(){
Ext.MessageBox.alert('Status', 'Changes has been saved');
}
}
}).show();
}
}
]
});
function showResult(btn){
Ext.getCmp('W').destroy();
};
I am using the code below and decided I want a close button instead of the timeout.
How can I replace the timeout with a close button with the code below?
<script type="text/javascript">
$(document).ready(function() {
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
open: function() {
// close the dialog 10 secs after it's opened
setTimeout(function() {
$(this).dialog("close");
}, 10000);
}
});
$(".notavailable").bind("click", function() {
$("#info_box").dialog("open");
});
});
</script>
You just need to add a buttons property to the Object the dialog is created with, something like:
$("#info_box").dialog({
autoOpen: false,
modal: true,
width: 400,
zIndex: 9999999,
resizable: false,
buttons: [
{
text: "Close",
click: function () {
$(this).dialog("close");
}
}
]
});
I am using the following code to open a modal box when a button is clicked. Works fine in all browsers but IE7 where I get an error.
This is the code. Have I done something wrong???
<script type="text/javascript">
$(document).ready(function(){
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 550,
width: 550,
draggable: true,
resizeable: true,
title: "Invite a friend",
};
$("#invitebox").dialog(dialogOpts); //end dialog
$('#invitebutton').click(
function() {
$("#invitebox").load("widgets/invite_a_friend/index.php", [], function(){
$("#invitebox").dialog("open");
}
);
return false;
}
);
});
</script>
Remove the , at the end after title:
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 550,
width: 550,
draggable: true,
resizeable: true,
title: "Invite a friend", // <-- REMOVE THIS COMMA
};
Also the .load() function takes an object and not array as second argument:
$("#invitebox").load("widgets/invite_a_friend/index.php", { }, function() {
$("#invitebox").dialog("open");
});
Here is the problem, the comma at the end:
title: "Invite a friend",
};
JSLint can tell you whether your code is correct.