I'm trying ti set up a loading mask for my viewport, because it takes a lot of time to load it. I've tried this:
Ext.define('MY.view.Viewport', {
extend: 'Ext.Viewport',
alias: 'widget.dispviewport',
initComponent: function() {
var me = this;
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
// myMask.show();
Ext.apply(me, {
id : 'main-viewport',
listeners: {
beforerender: function() {
myMask.show();
},
afterrender: function() {
myMask.destroy();
}
},
renderTo: 'id-sym-container',
layout: {...
but it seems that I never get into beforerender. I tried with console.log in the beforerender function and it also doesn't appear. When I try like this:
Ext.define('MY.view.Viewport', {
extend: 'Ext.Viewport',
alias: 'widget.dispviewport',
initComponent: function() {
var me = this;
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
Ext.apply(me, {
id : 'main-viewport',
listeners: {
// beforerender: function() {
// myMask.show();
// },
afterrender: function() {
myMask.destroy();
}
},
it works but my mask is showing way too late. Am I using beforerender wrong way and what's the way to start myMask exactly when my Viewport starts to render?
Thanks
Leron
Your code isn't setting a loading mask for the viewport, but for the body
Ergo what you can do is, the bit of code that does...
Ext.create('MY.view.Viewport');
should look like..
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
viewport = Ext.create('MY.view.Viewport');
viewport.on('afterrender',function(){myMask.destroy();},this);
The guys in the comments are right though :P
In ExtJs 4, you can declare the loadmask in the viewport:
Ext.define('Tps.view.Viewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.viewport',
initComponent: function () {
Ext.apply(this, {
layout: 'fit',
items: [
{
xtype: 'loadmask',
id: 'load-indicator',
indicator: true,
hidden: true,
target: this
}
]
});
this.callParent();
}
});
Note the target config is the viewport itself.
To show/hide the load mask, make a call to
Ext.getCmp('load-indicator').show();
Ext.getCmp('load-indicator').hide();
Show the load mask in the render event for the viewport or set the hidden config to false.
Related
I've got the following situation: some controls that are located next to a button and are slided in and out on button click.
Ext.define ('Site.widget.SomeButton', {
extend: 'Ext.button.Button',
xtype: 'SomeButton',
width: 30,
controlled_inputs: null,
expanded: false,
setControlledCmp: function(controlledInputs) {
var me = this;
me.on('click', function(){
if (me.expanded)
controlledInputs.getEl().slideOut('r', { duration: 250 });
else
controlledInputs.getEl().slideIn('r', { duration: 250 });
me.expanded = !me.expanded;
});
}
});
Ext.define('Site.widget.ComingOut', {
extend: 'Ext.Container',
xtype: 'ComingOut',
layout: 'hbox',
header: false,
referenceHolder: true,
items:[{
xtype: 'SomeItems',
reference: 'SomeItems'
},{
xtype: 'SomeButton',
reference: 'SomeButton'
}],
onBoxReady: function() {
me.lookupReference('SomeButton').setControlledItems(me.lookupReference('SomeItems'));
}
});
The code works fine when the controls are initially shown. The question is: what should I do if I want them to be initially hidden? hidden:false is not the option since when controls are hidden the button moves into the freed position. I suppose I am missing something easy here. Thank you in advance!
PS I've found solution, though it doesn't seem good enough (hides element instead of correctly setting its initial state), so if anyone knows a better one - you are welcome. My solution is the following
setControlledCmp: function(controlled_inputs) {
var me = this;
me.on('click', function( view, eOpts ){
controlled_inputs.setOpacity(1);
if (me.expanded)
controlled_inputs.slideOut('r', { duration: 250 });
else
controlled_inputs.slideIn('r', { duration: 250 });
me.expanded = !me.expanded;
});
}
and
onBoxReady: function() {
var me = this;
var inputs = me.lookupReference('search_inputs').getEl();
inputs.setOpacity(0);
inputs.slideOut('r', { duration: 5 });
me.lookupReference('search_button').setControlledCmp(inputs);
}
The tree panel doesn't get rendered
Code is :
Ext.define('mainPanel',{
extend:'Ext.form.Panel',
layout: {
type: 'hbox',
align: 'stretch'
},
width:'100%',
height:'100%',
title:'SQL',
initComponent:function()
{
var tableDiv = this.getTableColumn();
var analyzerDiv = this.getAnalyzerColumn();
var fieldDiv = this.getfieldColumn();
this.items=[tableDiv,analyzerDiv,fieldDiv];
this.callParent();
},
getTableColumn:function()
{
var TableColumn = Ext.create('Ext.tree.Panel',{
title:'Tables',
width:'20%',
heigth:'100%',
layout: 'fit',
border:true,
store: tableTreeStore,
rootVisible: false
});
return TableColumn;
}
Pls let me know where i am going wrong. Thanks in advance
the error i get is
TypeError: c is not a constructor
return new c(a[0])
Please check this Sencha fiddle that i created for you.
This error exists when you are trying to override initComponent in default component of Extjs.
For example:
Ext.define('Ext.panel.Panel',{
initComponent: function(){
//YourCode
}
});
Or
Ext.create('Ext.panel.Panel', {
initComponent: function(){
//Yourcode
}
});
If you want eradicate this error from your code you need to for example define your custom Component - CustomPanel that extend Extjs component:
var panel = Ext.define('CustomPanel', {
extend: 'Ext.panel.Panel',
width:300,
heigth:400,
layout: 'fit',
initComponent: function(){
var tableDiv = this.getTableColumn();
this.items=[tableDiv];
this.callParent();
},
getTableColumn:function() {
return Ext.create('Ext.tree.Panel',{
title:'Tables',
width:300,
heigth:400,
layout: 'fit',
border:true,
store: tableTreeStore,
rootVisible: false
});
}
});
And somewhere in your code - creation of CustomPanel:
Ext.create('CustomPanel', {
});
Hope this is something that you were looking for.
my application is web desktop using 4.2 extjs. i just want to add my window a controller so that i can create a MVC but i cant figure out how to add the controller.
Here's my code. The win variable is always undefined. how to fix it.?
please help
Ext.define('MyDesktop.Modules.Itemmanagement.Client.Itemmanagement', {
requires: ['Ext.tab.Panel',
'Ext.ux.CheckColumn'],
id: 'itemmanagement-win',
init: function () {
var me = this;
this.launcher = {
text: 'Itemmanagement Module ',
iconCls: 'icon-itemmanagement',
handler: this.createWindow,
scope: this
};
},
createWindow: function () {
var me = this;
var desktop = this.app.getDesktop();
var win = desktop.getWindow('itemmanagement-win');
if (!win) {
Ext.application({
name: 'USER',
appFolder: '/modules/',
controllers: [
"User"
],
launch: function () {
win = desktop.createWindow({
id: 'itemmanagement-win',
title: 'Item Management',
width: 600,
height: 505,
iconCls: 'icon-itemmanagement',
animCollapse: false,
constrainHeader: true,
layout: 'fit'
});
}
});
}
win.show();
return win;
}
});
Create the window in your current application and don't create a new application.
createWindow: function () {
var me = this;
var desktop = this.app.getDesktop();
var win = desktop.getWindow('itemmanagement-win');
if (!win) {
win = desktop.createWindow({
id: 'itemmanagement-win',
title: 'Item Management',
width: 600,
height: 505,
iconCls: 'icon-itemmanagement',
animCollapse: false,
constrainHeader: true,
layout: 'fit'
});
}
win.show();
return win;
}
Define a controller in your controller folder (e.g. app/controller/ItemmanagementWindow.js).
Add it to your controller section in your Application.
Call in the init function this.control() with component queries you are interested and listen to the events.
Ext.define('MyDesktop.controller.ItemmanagementWindow',{
extend: 'Ext.app.Controller',
init: function(){
this.control({
// selector of window we want to add listeners to
'#itemmanagement-win' : {
// events we listen to
afterrender: this.onAfterRender
}
});
},
// handler function of the afterrender event
onAfterRender: function(window, eOpts){
//do some stuff in the after render event ...
}
});
See Application, ComponenQueries and MVC architecture for more informations
I'am trying to build my first little Sencha Touch 2 app. I've created some stuff that is working as expected and now I could like to create some event handling stuff.
I've created the following store:
Ext.define('Mobile.store.Blogs', {
extend: 'Ext.data.Store',
config: {
},
listeners: {
'load' : function(store,records,options) {
store.loaded = true;
console.log("fired blogCountAvailable");
store.fireEvent("blogCountAvailable");
},
'blogCountAvailable': function(store, records, options) {
console.log("blogCountAvailable has been fired");
}
}
});
This stuff works as expected, but now comes the next step.
Here is the code of my tab panel bar:
Ext.create("Ext.tab.Panel", {
xtype:'mainTabPanelBottom',
tabBarPosition: 'bottom',
fullscreen: true,
items: [
{
title: 'Blog',
iconCls: 'home',
xtype:'mainpanel'
},
{
title: 'Users',
iconCls: 'user',
xtype:'userpanel'
}
],
listeners: {
blogCountAvailable: function(tabpanel, newTab) {
var tab = newTab.tab,
badge = 10;
tab.setBadge(badge);
console.log("blogCountAvailable has been fired");
}
}
});
My question now is how I could achieve it to "fire" my custom event blogCountAvailable to the tab panel?
The easiest way is just set an id for your TabPanel and then:
Ext.getCmp('your_TabPanel_id').fireEvent("blogCountAvailable");
forum member I am having one problem while using the loadMask property of the extjs 4.0.2a. Actually I am having one grid which on click open the window with detail information.
As my detail window takes more time to come on screen, so I just decided to make use of the loadMask property of Extjs. But don't know why the loading message is not shown when I double click the grid row and after some time the detail window is shown on the screen.
on grid double click I am executing the below code
projectEditTask: function(grid,cell,row,col,e) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading.."});
myMask.show();
var win = this.getProjectGanttwindow();
win.on('show', myMask.hide, myMask);
}
but don't know the loading is not displayed and after waiting for some moment my window is shown correctly.
I just want when I double click the grid Loading message should be displayed and after when the window is load completely Loading message should be dissapear and detail window should be viewed.
when I made the changes as per you said the loading message is displayed but my window is not opened yet. below is the code of window I am trying to open
my projectGanttwindow is
Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: '100%',
height: '100%',
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window
listeners: {
hide: function() {
alert('hide');
//var store = Ext.data.StoreManager.lookup('taskStore').destroyStore();
//Ext.destroy(store);
//store.destroyStore();
console.log('Done destroying');
}
},
initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];
me.callParent(arguments);
me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},
onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});
}
}
});
Try this
function loadMask(el,flag,msg){
var Mask = new Ext.LoadMask(Ext.get(el), {msg:msg});
if(flag)
Mask.show();
else
Mask.hide();
}
When u click on grid call this function
//Enable mask message
loadMask(Ext.getBody(),'1','Please wait...');
After pop loaded call
//Disable mask Message
loadMask(Ext.getBody(),'','Please wait...');