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
Related
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...
I need to add a button to the taskbar quickstart, but i do not want to open a module window, for example a logout button that will show a confirm messagebox, i have tried like this:
getTaskbarConfig: function () {
var ret = this.callParent();
me = this;
return Ext.apply(ret, {
quickStart: [
{ name: 'Window', iconCls: 'icon-window', module: 'ext-win' },
{ name: 'Logout', iconCls:'logout', handler: me.onLogout}
]
});
},
onLogout: function () {
Ext.Msg.confirm('Logout', 'Are you sure you want to logout?');
},
And i changed the getQuickStart function of the TaskBar.js file to this:
getQuickStart: function () {
var me = this, ret = {
minWidth: 20,
width: Ext.themeName === 'neptune' ? 70 : 60,
items: [],
enableOverflow: true
};
Ext.each(this.quickStart, function (item) {
ret.items.push({
tooltip: { text: item.name, align: 'bl-tl' },
overflowText: item.name,
iconCls: item.iconCls,
module: item.module,
//handler: me.onQuickStartClick, **original code**
handler: item.handler == undefined ? me.onQuickStartClick : item.handler,
scope: me
});
});
return ret;
}
But it does not work, is there a way to add a simple button to the taskbar quickstart?
Thanks for your reply. I have solved the issue. In the TaskBar.js file i changed this line:
handler: item.handler == undefined ? me.onQuickStartClick : item.handler
for this one:
handler: item.handler ? item.handler : me.onQuickStartClick
Actually, for me, both do the same, but for any weird reason the code works with that change.
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'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.
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");