So i have this function onDisplayError which is called each time if request fails. This means if user press save button and 3 request are failing i currently getting 3 popup messages. My goal is that this function checks if my popup window is already opened. If it is then i will append errors in my already opened window otherwise it should open this error popup
onDisplayError: function (response, message) {
var errorPanel = Ext.create('myApp.view.popup.error.Panel',{
shortMessage: message,
trace: response
});
if(errorPanel.rendered == true){
console.log('Do some other stuff');
}else{
errorPanel.show();
}
},
This is Panel.js
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
requires: [
'myApp.view.popup.error.PanelController'
],
controller: 'myApp_view_popup_error_PanelController',
title: 'Fail',
glyph: 'xf071#FontAwesome',
floating: true,
draggable: true,
modal: true,
closable: true,
buttonAlign: 'center',
layout: 'border',
shortMessage: false,
width: 800,
height: 200,
initComponent: function() {
this.items = [
this.getMessagePanel(),
this.getDetailsPanel()
];
this.callParent(arguments);
},
getMessagePanel: function() {
if(!this.messagePanel) {
var message = this.shortMessage;
this.messagePanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
height: 200,
region: 'center',
border: false,
html: message
});
}
return this.messagePanel;
},
getDetailsPanel: function() {
if(!this.detailsPanel) {
this.detailsPanel = Ext.create('Ext.panel.Panel', {
title: 'Details',
hidden: true,
region: 'south',
scrollable: true,
bodyPadding: 5,
height: 400,
html: '<pre>' + JSON.stringify(this.trace, null, 4) + '</pre>'
});
}
return this.detailsPanel;
}
The problem is that i'm still getting multiple popups displayed. I think that the problem is that var errorPanel loses reference so it can't check if this popup (panel) is already opened. How to achieve desired effect? I'm working with extjs 6. If you need any additional information's please let me know and i will provide.
You could provide to your component definition a special xtype.
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
xtype:'myxtype'
and then you could have a very condensed onDisplayError function:
onDisplayError: function (response, message) {
var errorPanel = Ext.ComponentQuery.query('myxtype')[0] || Ext.widget('myxtype');
errorPanel.appendError(message, response)
errorPanel.show();
},
The panel's initComponent function should initialize an empty window, and appendError should contain your logic to append an error (which may be the first error as well as the second or the third) to the list of errors in the panel.
Using Ext.create will always create a new instance of that class.
You can use the reference config to create a unique reference to the panel.
Then, use this.lookupReference('referenceName') in the controller to check if the panel already exists, and show().
You also have to set closeAction: 'hide' in the panel, to avoid panel destruction on close.
Otherwise, you can save a reference to the panel in the controller
this.errorPanel = Ext.create('myApp.view.popup.error.Panel' ....
Then, if (this.errorPanel) this.errorPanel.show();
else this.errorPanel = Ext.create...
Related
I have a button with a click function like this
var win = Ext.create('Ext.window.Window', {
title: 'We want your Feedback!',
cls: 'Hub-feedback-form',
//height: 320,
width: 300,
layout: 'fit',
closable: true,
closeAction: 'destroy',
items: [form]
});
win.show();
winVisible++ //winVisible is a global variable declared as 0.
if(winVisible % 2==0)
{
win.hide();
}
But what is happening is it is creating multiple instances of win, so everytime an insstance remains, how to modify the code so that every open instance of win gets removed. Please help!
You can call win.close(), it will remove the component and destroy it.
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);
}
I have a sign in process that I've roughed into a fiddle (the part I'm stuck on starts at line 110).
Here's a copy of the code:
Ext.define('MyApp.MyPanel',{
extend: 'Ext.panel.Panel',
title: 'My App',
controller: 'mypanelcontroller',
viewModel: {
data:{
email: 'Not signed in'
}
},
width: 500,
height: 200,
renderTo: Ext.getBody(),
bind:{
html: "Logged in as: <b>{email}</b>"
},
buttons:[
{
text: 'Sign in',
handler: 'showSignInWindow'
}
]
});
Ext.define('MyApp.MyPanelController',{
extend: 'Ext.app.ViewController',
alias: 'controller.mypanelcontroller',
showSignInWindow: function (b,e,eOpts){
Ext.widget('signinwindow').show();
}
});
Ext.define('MyApp.SignInWindow',{
extend: 'Ext.window.Window',
title: 'Sign in',
controller: 'signincontroller',
xtype: 'signinwindow',
width: 400,
title: 'Sign In',
modal: true,
layout: 'fit',
items:[
{
xtype: 'form',
reference: 'signinfields',
layout: 'anchor',
bodyPadding: 5,
defaults: {
anchor: '100%',
xtype: 'textfield'
},
items:[
{
fieldLabel: 'Email',
name: 'email',
allowBlank: false
},
{
fieldLabel: 'Password',
name: 'password',
allowBlank: false,
inputType: 'password'
}
],
buttons:[
{
text: 'forgot password',
width: 120,
//handler: 'onForgotPassword'
},
'->',
{
text: 'sign in',
width: 120,
handler: 'onSignIn'
}
]
}
]
});
Ext.define('MyApp.SignInController',{
extend: 'Ext.app.ViewController',
alias: 'controller.signincontroller',
onSignIn: function (button, event, eOpts){
var data = button.up('form').getValues();
button.up('window').mask('Signing in...');
Ext.Ajax.request({
// sorry, I don't know how to fake an API response yet :/
url: '/authenticate/login',
jsonData: data,
scope: this,
success: function (response){
var result = Ext.decode(response.responseText);
if(result.loggedIn == true){
/*
This is where I need help.
From the sign in window, I would like to update the viewmodel in `MyApp.MyPanel` with the
email returned in the response. If the window was a child of MyPanel, I would be able to update
via the ViewModel inheritance, but I can't here because the window isn't part of the `items` config.
*/
this.getViewModel().set('email', result.data[0].email);
Ext.toast({
title: 'Sign in successful',
html: "You've been signed in.",
align: 't',
closable: true,
width: 300
});
button.up('window').destroy();
} else {
Ext.toast({
title: 'Sign in failed',
html: "You sign in failed: " + result.message,
closable: true,
width: 300,
align: 't'
});
button.up('window').unmask();
}
},
failure: function (){
// debugger;
}
})
},
onForgotPassword: function (){
Ext.Ajax.request({
url: '/authenticate/test',
success: function (response){
},
failure: function (){
}
})
// Ext.Msg.alert('trigger forgot password logic', "This is where you need to trigger the API to send the forgot email form. <br>Say something here about how you'll get an email");
}
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('MyApp.MyPanel');
}
});
What I'm trying to do is:
Show a panel with a sign in button
Clicking on the button shows a sign in window
Submitting the sign in form attempts an authentication against the server
On a successful authentication, the email for the user is set in the initial panel's ViewModel
The last bullet is what I'm having a problem with.
If the sign in window was a child of the panel then I could set it through the ViewModel inheritance, but since I'm using a widget show I can't set back through the panel's items config.
Is there a way of doing this correctly?
Nevermind, I figured it out. The answer was in my question all along:
If the sign in window was a child of the panel then I could set it through the ViewModel inheritance, but since I'm using a widget show I can't set back through the panel's items config.
Just make the window a child of the panel:
Ext.define('MyApp.MyPanelController',{
extend: 'Ext.app.ViewController',
alias: 'controller.mypanelcontroller',
showSignInWindow: function (b,e,eOpts){
// Instead of creating the widget and showing it, create it and add it to the panel.
// The window is going to float anyway, so being a child of the panel is no big deal
var signinwindow = Ext.widget('signinwindow');
this.getView().add(signinwindow).show();
}
});
Doing it this way means the window inherits the viewmodel of the panel and you can set the viewmodel data like so:
Ext.define('Registration.view.signin.SignInController', {
extend: 'Ext.app.ViewController',
alias: 'controller.signin-signin',
onSignIn: function (button, event, eOpts){
var data = button.up('form').getValues();
button.up('window').mask('Signing in...');
Ext.Ajax.request({
url: '/authenticate/login',
jsonData: data,
scope: this,
success: function (response){
debugger;
var result = Ext.decode(response.responseText);
if(result.loggedIn == true){
// Now that the window has inherited the panel's viewmodel
// you can set it's data from the windows controller
this.getViewModel().set('username', result.data[0].eMail);
...
emoji-for-exasperated :/
I am using version 4.2.
I currently have a view which extends a panel. On this panel there is a button which displays a modal window. The controller code when the button is clicked is below (which I pulled from the extjs docs):
displaySearch : function(btn) {
var panel = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
modal : true,
items: {
...
}
}).show();
}
I want a View I already have created to be rendered INSIDE the modal window I just defined.
How do I do that?
If you have defined an alias (xtype) for that view, let's say it is 'myview', then you just add it to items like this:
var panel = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
autoShow:true,
layout: 'fit',
modal : true,
items: [{
xtype:'myview'
}]
});
Also, you don't need to call show() on the created window, it is enough if you configure autoShow:true.
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...');