I have a simple scenario where a panel needs a masked loading indicator over it while its loading the content. I have the mask working fine using the following code but the loading indicator appears at the top when calling it the first time. When calling it after the panel is shown, ie. on a button event, the mask appears correctly in the center of the panel. Any ideas?
var pnl = new Ext.Panel({
title: 'test',
width: 500,
height: 500,
renderTo: 'controls',
listeners: {
render: function(comp) {
comp.load();
}
},
load: function() {
this.el.mask('loading...', 'loadingMask');
}
});
It appears the mask is applied to the panel before the html has been rendered completely. A simple solution was to delay the mask shortly before applying it.
render: function(comp) {
setTimeout(function() { comp.loadPermissions(); }, 100);
}
Just call this.el.mask() from 'render' listener too. Also check this.rendered property before calling the mask in this.load method.
Related
I am creating model dialog using ExtJS. Below is the Code for it,
var win;
Ext.application({
name : 'Fiddle',
launch : function() {
var button = Ext.get('copy_button');
button.on('click', function(){
win = Ext.create('Ext.window.Window', {
title: 'Copy Existing',
height: 400,
width: 500,
layout: 'fit',
modal: true,
loader: {
url: '<%= request.getContextPath() %>/demo/copy.action',
autoLoad: true
}
});
win.show(this, function() {
button.dom.disabled = false;
});
});
}
});
The resulting page in the popup contain one button. On click of this button I want to call struts2 action means I want to change url of popup.
If I use window.location to call struts2 action then it changes url of parent window instead of pop up window. Can anyone please help me in this?
The window variable is an object reference to the current browser window. This would be useful in this situaton.
As you are using loader in the window component you should add code to get the loader and load a new resource location using its methods. Something like this should work.
button.on('click', function() {
var loader = win.getLoader();
loader.load('new-url')
});
References:
Loader - Load Method
getLoader method
I have a Window that contains several child components (example only contains a Panel). When I hide this Window, I want the child components to do some processing. Is there an event the child components can listen for when the parent is hidden? I tried using hide, disable, and deactivate, but none of them fired.
This is the example code and Fiddle I'm working with:
var myPanel = Ext.create('Ext.panel.Panel', {
title: 'My Panel'
});
myPanel.on('afterrender', function() {
myPanel.el.on('hide', function() {
alert('el hidden');
}, this);
}, this);
myPanel.on('hide', function() { alert('hidden'); }, this);
myPanel.on('deactivate', function() { alert('hidden'); }, this);
myPanel.on('disable', function() { alert('hidden'); }, this);
var myWindow = Ext.create('Ext.window.Window', {
height: 300,
width: 300,
items: [myPanel],
closeAction: 'hide'
});
var button = Ext.create('Ext.button.Button', {
text: 'Toggle Window',
renderTo: Ext.getBody()
});
button.on('click', function() {
if (myWindow.isVisible()) {
myWindow.hide();
}
else {
myWindow.show();
}
}, this);
When the Window gets hidden, I want to enter the event listeners. I even started experimenting with getting the DOM Element, but there's no such event as hide. I realize I can control the processing from the Window, but I'd rather have each component listen for an event and take care of itself autonomously.
Any thoughts?
As far as i know, you cant listen directly to another component's events, although you could do some processing in a controller and accomplish this.
The most similar approach to what you asked that i could come up with was to listen to the hide event in the parent, and fire the same event in the child component.
-working fiddle:
https://fiddle.sencha.com/#fiddle/c74
you could iterate all children and do what you need.
I have created an 'Ext.Img' with Ext.create and assigned a remote url to the src attribute. Now i want to know the width and height of the image from the remote location.
i have gone through all the events for Ext.Img but didnt got which is the correct event to register. Did any body have any idea to find out the width and height of the image.
Thanks
Tapaswini
Try this:
Ext.onReady(function() {
Ext.create('Ext.Img', {
src: 'http://www.davey.com/elements/skin/home_tree.png',
/*style: 'visibility: hidden;',*/
listeners: {
render: function() {
this.mon(this.getEl(), 'load', function(e) {
console.log(this.getWidth());
console.log(this.getHeight());
});
}
},
renderTo: Ext.getBody()
});
});
Notice that image component must be rendered, and should also be displayed. Otherwise you will get 0x0 dimensions. You can use visibility:hidden to hide it.
Working sample: http://jsfiddle.net/U769Y/ (see console)
Why can I not call "add" on a tab after finding by ID in extjs?
var tabPanel = new Ext.TabPanel({
id:'maintabs',
activeTab:0,
layoutOnTabChange:true,
deferredRender:false
});
var tab = {
title:'testing',
html:'testing'
}
I can see in my chrome console that tabPanel here has the method "add", and I can add this tab to the tab panel...
However, when I define my tab in a viewport like so...
initComponent: function(){
Ext.apply(this, {
layout: {
type: 'fit'
},
items: [
{
xtype: 'tabpanel',
id:'maintabs',
layoutOnTabChange:true,
deferredRender:false,
activeTab: 0, // index or id
items:[...
However, considering the following:
Ext.get('maintabs').add(tab);
TypeError: Object [object Object] has no method 'add'
What gives here? Why is there no method 'add'?
There is a different between get and getCmp. get() returns you a wrapper around a DOM element. getCmp() returns you an Ext.Component (or subclass).
in my php code i have a table with rows:
name actions
category 1 edit
category 2 edit
..... edit
every edit buttons have an id for ex: <a href="edit('.$raw['id'].')" id="show-btn'.$raw['id'].'">
now my function edit is:
var win;
var button;
function edit(idd){
button = Ext.get('show-btn'+idd);
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
layout:'column',
closeAction:'hide',
plain: true,
autoHeight:true,
items: new Ext.FormPanel({
applyTo: 'hello-tabs',
}),
buttons: [{
text:'Modify',
handler: function(){
win.hide();
document.form_edit.submit();
}
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
};
This script works perfectly but on bauble click, how can i do this on one click.
I now the problem is on button.on('click')
Many thanks, please help me with this issues
It seems like some level of functionality is being added on your first click and then that is used for subsequent clicks. I'd suggest putting either an alert or a console.log (if your browser supports it) inside of the edit function both before and after the if(win) test.
I'm also curious -- if you're trying to have this execute for an entire table, wouldn't that win global variable cause problems?
I think you're better off pre-populating win and using a local variable:
function edit(idd){
button = Ext.get('show-btn'+idd);
// this can be moved into button.on('click', function(){, but that may be
// causing the problem...
// come to think of it... the example here:
// http://dev.sencha.com/deploy/dev/examples/window/hello.js
// has this inside the button.on method. You may want to try it both ways.
if(!button.win){
button.win = new Ext.Window({
applyTo:'hello-win',
layout:'column',
closeAction:'hide',
plain: true,
autoHeight:true,
items: new Ext.FormPanel({
applyTo: 'hello-tabs',
}),
buttons: [{
text:'Modify',
handler: function(){
win.hide();
document.form_edit.submit();
}
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
button.on('click', function(){
// the window already exists, so no need to worry about creating it.
button.win.show(this);
});
};
Could that work? If not, we will need to see more code.