Is it possible to configure Converse.js to render it's boxes into custom div containers instead of adding them to the body of the page?
Yes, you can do this by writing a converse.js plugin in which you override the insertIntoPage method of ChatBoxView.
Refer to the plugin documentation I linked to above. In short, it would look something like this:
// The following line registers your plugin.
converse_api.plugins.add('myplugin', {
overrides: {
// If you want to override some function or a Backbone model or
// view defined inside converse, then you do that under this
// "overrides" namespace.
ChatBoxView: {
insertIntoPage: function (type, status_message, jid) {
// XXX Your custom code comes here.
// The standard code looks as follows:
this.$el.insertAfter(converse.chatboxviews.get("controlbox).$el);
return this;
}
},
}
UPDATE: Since recent versions of converse.js, the method to override is instead _ensureElement and not insertIntoPage.
Related
I'm using mootools 1.6.
I based my code on their tutorial but when I try to run it, the initialize function of my subclass is not invoked. Instead, it goes directly to the parent class' initialize function.
I tried breakpointing inside the subclass initialize function but it really doesn't go there. In fact, my additional functions are also undefined. It's like only the functions of the parent class are created. :(
Here's my sample code:
parent.js
var Parent = new Class({
initialize: function(){
alert("parent");
},
...
});
child.js
var Child = new Class ( {
Extends: Parent,
initialize: function () {
this.parent();
alert("child");
},
... some additional functions
});
1.) Note that they are in different js files.
2.) These files are preloaded by cocos2d-js
...
"src/controllers/parent.js",
"src/controllers/child.js",
...
I was able to solve this issue. There's no issue with Mootools. It was how I used it. I'm posting it for people who might encounter the same issue.
I have 3 js files.
parent.js
child.js
orphan.js (calling it orphan hahaha)
These 3 files are added to project.json in that order. I'm not using orphan.js. I thought I already removed it from the list but I was wrong. :(
Inside orphan.js, is a class. This class uses the same name as the class inside child.js. It's empty and is just extending the parent. What happened was, it redefined the object since it's loaded after child.js.
I switched their order to see if it will use child.js declaration instead and indeed, it did. But that's not the solution. I just used it to prove that it was redefined. The solution was to remove that file from source / make sure no classes have the same name.
Whew. false alarm.
I am trying to using the custom elements spec to extend native DOM elements using the "is" attribute, but it doesn't seem to be doing anything at all. I am using Google Canary so I am able to create custom elements, but no effect in extending.
In my sample, I am trying to add a caption to the native img tag:
<img is="super-img" src="http://lorempixel.com/400/200/"
caption="This is my custom caption!" />
<script>
document.registerElement('super-img', {
prototype: Object.create(HTMLImageElement.prototype, {
createdCallback: function() {
var caption = this.attributes.getNamedItem('caption').value;
alert(caption);
}
})
});
</script>
http://jsbin.com/OMaPIVoV/3/
The createdCallback never fires. Any ideas on how to accomplish this?
Object.create(HTMLImageElement.prototype, {
createdCallback: function() {…}
})
Object.create does create a map of property descriptors as its second parameter - not plain values - like Object.defineProperties does.
This is also mentioned in the article you found at "Adding JS properties and methods":
Of course there are umpteen thousand ways to construct a prototype. If
you're not a fan of creating prototypes like this, here's a more
condensed version of the same thing:
[…] [This] first format allows for the use of ES5 Object.defineProperty.
The second allows the use of get/set.
(The strike-through was added by me as it's rubbish)
So what you want is either
var SuperImgProto = Object.create(HTMLImageElement.prototype);
SuperImgProto.createdCallback = function() { … };
var SuperImg = document.registerElement('super-img', {prototype: SuperImgProto});
or
document.registerElement('super-img', {
prototype: Object.create(HTMLImageElement.prototype, {
createdCallback: {value: function() { … } }
})
});
looks like you forgot to tell your web component, that it extends the native img element. Here's a running example based on your fiddle but broken down to the important bits: http://jsbin.com/OMaPIVoV/7/edit
hope this helps!
I am going to add a plugin to my ExtJs 4.1 application. Currently I have added the code for plugin into one of the file where I am making use of the plugin and everything is working fine.
Alternatively I can put the plugin code in a JS file and then can make reference of the file in my application.
But I was wondering is there way to include the plugin without making explicit reference? Just like we load Controllers, store etc in ExtJs 4.1
There is no standard practice, but in my opinion it makes the most sense to define a namespace for plugins (e.g., App.plugin.MyPlugin) and load them either explicitly as needed, or along with your other required files if you're using the Ext.Loader.
Here is an example...
Ext.define("App.plugin.MyPlugin", {
/** Any explicit class properties and methods for functionality go here.
Eg. extending, aliasing, defining initComponent to add events, and
any other class-specific methods. */
},
function(){
Ext.ns("App.plugin");
App.plugin.MyPlugin = {}; // this is a global
var MyPlugin = App.plugin.MyPlugin;
/** You can modify the prototype here */
this.prototype.dateFormat = Ext.Date.dateFormat;
/** If you need to add functionality from some other class,
or Ext class, you can marge them here. In this example,
I am adding in the methods from Ext.util.Format */
Ext.apply(MyPlugin, Ext.util.Format);
/** Define methods which can be invoked from the global */
Ext.apply(MyPlugin, {
exampleRenderer: function(val){
return MyPlugin.ucfirst(val); // available via Ext.util.Format
}
});
});
Now you can instantiate the plugin class, but also access the global methods. For example, you can leverage the exampleRenderer in a gridcolumn renderer via App.plugin.MyPlugin.exampleRenderer.
To automatically load your plugin, you must define the path for the namespace in your `Loader' configuration. e.g.,
Ext.Loader.setConfig({
enabled: true,
paths : {
'App.plugin': '/js/app/plugin/' // or however your folder structure is
}
});
/** then require it.. */
Ext.require([
'App.plugin.MyPlugin'
]);
You likely do not want to combine the two principals into one class, but I just wanted to show a couple different means to achieve your goal.
Some background, skip to the 2nd paragraph to get to the question. I have tried quite a few editors like your typical developer and still my all-time favorite was Homesite/ColdFusion Studio before it was sucked into Dreamweaver and I trust most of you will agree with me that well, yea.. Dreamweaver. Anyway, I've been running Sublime Text 2 and it's ok but I feel I need more of an IDE than a text editor. To that end I have been using NetBeans for a few months. I'm starting to love it. At home I use a Mac with TextMate and Coda but I wouldn't mind moving to NetBeans completely however there are a few issues that bother me. Most notably its XSL editing is annoying for a few reasons and then secondly this JavaScript issue I've been having.
I like the ability to jump around a JavaScript file using ctrl+click on methods and such, alt+back to move back and being able to see the outline of your methods and classes in the navigator. However my issue is that in my Javascript files NetBeans doesn't seem to be able to figure out my class and its methods. I use a pattern for writing my singleton classes that has proved indispensable for me. I write such classes as follows:
// create class to contain code for this page
var FieldMgmt = function() {
// vars local to the class
var Fields = {}; // Store the form fields of the class
return {
// startup method
init: function() {
// initialize properties
console.log('field management intialized');
// capture the fields
this.Fields = Fields = {
field1: $('select[name=field1]') // field One
,field2: $('select[name=field2]') // field Two
,field3: $('select[name=field3]') // field Three
};
this.initEvents(); // setup events
}
// initialize events
,initEvents: function(){
}
// method 1
,method1: function(arg1, arg2){
}
// method 2
,method2: function(arg1, arg2){
}
}; // end return of FieldMgmt
}(); // end FieldMgmt
// start the code for this page
$(document).ready( function(doc){ FieldMgmt.init(); } );
And below is a picture of what shows up in my navigator for this file:
As you can see, none of my methods show up in the navigator such as initEvents, method1, method2, etc. ctrl+click-ing a method call as well doesn't go to the method declaration. So NetBeans just doesn't know this is a class. I've had similar problems with this pattern before in other editors, for instance NotePad++ and I was able to get the editor to figure out my file by modifying the regular expressions used to parse the file.
I can survive without this feature but if I could get this to work then this would be my editor of choice as these files can get rather large and being able to see all the methods and jump around the file quickly by ctrl+click-ing, etc. would be fantastic.
I'm using NetBeans 7.3 with everything updated to the latest as of today on Windows Server 2003. Any help would be greatly appreciated. Is there anyway for me to modify NetBeans in order for it to be aware of my methods? Are there plugins for this? Thanks in advance.
In your example code you return a closure that keeps a variable named Fields as "private" but the first thing you do in init is expose it publicly by declaring this.Fields=Fields. With the example code posted you might as well declare FieldMgmt as an object literal and have NetBeans recognize it to have it's properties show up in the Navigator.
var FieldMgmt = {
init: function() {
}
,initEvents: function(){
}
,method1: function(arg1, arg2){
}
,method2: function(arg1, arg2){
}
};
Thanks to #HMR for his answer. It put me on the right path. I'm posting this now so that others using the style of coding I mentioned can have an example of how to modify theirs to show up in the navigator without changing how it behaves or losing the advantages of structuring your code this way. So the final outcome looks like this:
// create class to contain code for this page
var FieldMgmt;
(function(){
// vars local to this closure
var Fields = {}; // Store the form fields of the class
FieldMgmt = {
// startup method
init: function() {
// initialize properties
console.log('field management intialized');
// capture the fields
this.Fields = Fields = {
field1: $('select[name=field1]') // field One
,field2: $('select[name=field2]') // field Two
,field3: $('select[name=field3]') // field Three
};
this.initEvents(); // setup events
}
// initialize events
,initEvents: function(){
}
// method 1
,method1: function(arg1, arg2){
}
// method 2
,method2: function(arg1, arg2){
}
}; // end FieldMgmt
})(); // end closure
// start the code for this page
$(document).ready( function(doc){ FieldMgmt.init(); } );
And the navigator now shows the methods and properties:
Hope that helps.
It works in the current version of Netbeans 8.1.
I want to change default page of pagination toolbar to 1 of 1 instead 0 of 0 in case of no record.Plus I am not using store proxy to request any records, so is there any way to accomplish it without using store proxy. According to my requirement user can add rows manually to the grid with the pagination toolbar showing page 1 and when rows exceeds 10 it moves to 2nd page.
In Ext it is possible to overload a component like Ext.toolbar.Paging with your own custom version. Simply specify an alias in your definition and you can us it just like the "native control."
In order to be sure that the approach would work, I set up a test project with a simple datasource and implemented enough of a replacement definition that I could see the "Ext.toolbar.Paging".getPagingItems method being fired in my custom definition.
From that point you can replace the code inside the definition of the original method to allow for a custom minimum in addition to the opportunity to overload the "updateInfo" method to make sure that during data reloads you're not plowing through your customizations.
In addition to these two things, you should (with a relatively small amount of effort) be able to implement on top of the control to support dynamically changing it's values based on the contents of your grid.
If you look at the documentation for ux.data.PagingStore you should be able to suss out the differences in using a remotely supplied store from something that is served with data locally.
Hope this helps you.
Code Sample:
Ext.define(
"Test.view.testview.TvPageBar",
{
extend: "Ext.toolbar.Paging",
alias: "widget.tvpagebar",
title: "Bob",
strictInit: function () {
"use strict";
console.log("TvPageBar init");
},
getPagingItems: function () {
console.log("getPagingItems", this);
this.callParent(arguments);
},
initComponent: function () {
this.strictInit();
this.callParent(arguments);
}
}
);