I'm following the ExtJS4.0 MVC Application Architecture walk through and modifying it to my own project as I go to make sure I get things right. So far it's working perfectly. I've just completed the 'Defining a View' section and I'm about to start the 'Controlling the grid' section. Before I do, I want to remove the console.log code as I don't want or need it for my own project. I find I can replace it with an alert message but can't remove it all together without generating an error against ext-all-debug.js.
Here's my functioning code on the controller and the error it's generating after I remove the consol.log function. In the example doc, it's AM.controllers.list.
Ext.define('ChatAgent.controller.queues', {
extend: 'Ext.app.Controller'
, views: [
'queue.list'
]
, init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
}
, onPanelRendered: function() {
console.log('The panel was rendered');
}
});
The error it generates is:
'fireFn' is null or not an object
All I've removed is:
onPanelRendered: function() {
console.log('The panel was rendered');
}
So why the error???
You need to get rid of the event listener as well. When the render event fires it is trying to call onPanelRendered which doesn't exist anymore.
If you aren't listening for any events, you don't even need to have that entire this.control block. Comment this out and see what happens.
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
Related
I am working on my first vue project, and am having an issue with the redirect that I want to have happen. My project is a basic to-do app. In my add todo component I have the following function that fires after I submit the form.
methods: {
addTodo:function(e) {
e.preventDefault()
let newTodo = {
title:this.title,
completed: false,
dueDate: new Date(this.date3)
}
console.log(newTodo)
this.$emit('add-todo', newTodo)
window.location.href = '/';
}
}
The event that is emitted then fires up the component tree until it reaches my app.vue file that fires the following method:
addTodo: function (newTodo) {
this.todos = [...this.todos, newTodo]
this.todos = this.todos.sort((a,b) => a.dueDate - b.dueDate)
}
Unfortunately the issue I am having is that my page redirects to my home page from the window.locatio.href method before my app can update state. I have also tried moving window.location.href='/' to the addTodo method in my app.vue file. However I am still facing the same problem. How can I redirect the user only once the new Todo is added to state?
use created(){} after the last},then add window.location.href="/";
I am new to vuejs. Does anyone help me?
If I click the browser refresh button, I need to show the popup. So I used below code here.
I am using the code like,
window.onbeforeunload=function(){
return "Your work will be lost.";
}
I used this function under the beforeMount() lifecycle instance in a single page. But, this popup showed the multiple pages, when I click the browser refresh button. I want to show this pop up in a single page. Can Anyone help me??
I see this is an old post, but maybe this will help you in the future or others. As mentioned above, it would help a lot to see the actual code implementation, but maybe this will help.
<script>
export default {
data: () => ({
shouldPrevent: false
}),
beforeMount() {
window.addEventListener("beforeunload", this.preventNav)
},
beforeDestroy() {
// Don't forget to clean up event listeners
window.removeEventListener("beforeunload", this.preventNav)
},
methods: {
preventNav(e) {
if (!this.shouldPrevent) return
e.preventDefault()
e.returnValue = ""
},
},
}
</script>
I am using Vue.js for a CRUD system, tracking a number of different domain classes, such as Customer, Product, etc. I have a validation mixin which I use in each editor component (e.g, CustomerDetail, ProductDetail). Because I would like common behaviour when a user moves away from the page without saving, I'd like to be able to have a method in my validation mixin which I can call in 'beforeRouteLeave'. The method I have come up with is this:
checkOnLeave(obj,message,confirmText="Leave",cancelText="Continue Editing",next){
if (this.isDirty(obj)) { //isDirty checks whether object has been changed
bootbox.confirm({
message: message,
buttons: {
confirm: {
label: confirmText,
},
cancel: {
label: cancelText,
}
},
callback: function (result) {
if (result) {
next();
} else {
next(false);
}
}
});
} else {
next();
}
}
When I try to use this, though, it doesn't have any idea what to do with 'next'. Clearly this is something from vue-router which it is unaware of. So how can I make my mixin vue-router aware so that I can use this?
Red herring alert. It actually works fine as is - it must have been a delay in compiling which caused the problem before (it happens from time to time with 'npm run dev', the compile occasionally doesn't kick in).
I have a question regarding the show event.
in my application I'm handling the painted event of my panel like this:
Ext.define('mvcTest.controller.Test', {
extend: 'Ext.app.Controller',
config: {
refs: {
panel: '#testpanel'
},
control:{
panel: {
painted: 'onPainted'
}
}
},
onPainted: function(){
alert('painted');
}
});
the docu say's, that there is also a "show" event, but it get not fired at all:
Ext.define('mvcTest.controller.Test', {
extend: 'Ext.app.Controller',
config: {
refs: {
panel: '#testpanel'
},
control:{
panel: {
show: 'onShow'
}
}
},
onShow: function(comp, obj){
alert('show');
}
});
why this does not work?
i know, alerting is the wrong way, but that's not the question.
thanks,
mike
It seems that there's no mistake in your controller. The key reason may lie in another part of your application but ... ok, according to my experience:
painted event straight-forward. Everytime your view is really rendered on the screen, painted fired up. (Note: painted event fires BEFORE the child components of your view are totally rendered. In another word, painted first, DOM generation second.)
show event does NOT necessarily fire up, especially for the initialization time of your view. show event is something fired up when you firstly somehow hide your view, and show it later.
Just experience, may be variant. But hope it might be helpful for you.
You can't handle 'painted' event in controller, because it is not bubbled up to it.
From sencha docs: This event is not available to be used with event delegation. Instead 'painted' only fires if you explicily add at least one listener to it, due to performance reason.
You can handle it by defining a listener in you panel.
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
config: {
},
listeners: {
painted: function (element, options) {
console.log("I've painted");
}
}
});
But 'show' event can be handled in controller. Check if another part of your application see that controller.
(Have you provided reference to your controller? Is the id of your panel is right?)
I know this is an old thread, but someone might find it useful:
Sencha does not initially fire the event 'show' and 'painted'.
You need to trigger it initially.
Use this code snippet to listen to the events from the controller:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
config: {
},
listeners: {
painted: function (element, options) {
this.fireEvent('painted', [element, options])
}
}
});
I'm trying to figure out when a store is ready to be used within my app.
I figured from the doc that if I want to display information from my store, I should listen to the 'refresh' event of my store to get notified when it has been changed (and thus also when it is first loaded).
However, using the following example:
Ext.define('MyApp.store.Config', {
extend: 'Ext.data.Store',
config: {
autoLoad: true,
autoSync: true,
model: 'MyApp.model.Config',
listeners: {
refresh: function() {
console.log(Ext.StoreManager.get('Config').getAt(0))
}
}
} });
the 'console.log' gets called twice at startup, and it fails the first time (it seems that the Store is not loaded yet). My model uses a proxy (type ajax, and a json reader).
Could someone tell me how I should proceed to avoid this error?
Thanks!
I found the reason...
I was declaring the 'stores:['Config']' property both in my app.js and in on of my controllers.
Quite hard to spot but my mistake...