In a single-page ExtJS 6 application I need to scan through all classes ever declared with Ext.define method and find those implementing specific mixin. For simplicity let's assume that all classes I am interested in are already loaded, and on-demand loading mechanisms are out of the game.
There seems to be no other way to iterate than via private Ext.ClassManager.classes property. Is there a cleaner alternative?
Anyway, the above gives the list of class names. How to figure out whether corresponding classes implement specific mixin?
function getClassesByMixin(mixin){
var classes=[];
Ext.iterate(Ext.ClassManager.classes,function(className,c){
if(c.prototype &&c.prototype.mixins && c.prototype.mixins[mixin]){
classes.push(className);
}
});
return classes;
}
Sencha fiddle
Related
In my sencha mobile web app I have dynamically created elements/containers in my view.
Each has a uniquie id but all same the same css class.
I am trying to find a way to remove them using the css class. The reason I need to use the css class and not the id is that the number created cannot be determined at runtime.
I have tried Ext.select('.myContainer').remove(); but that give error "has no method 'remove' "
I also tried
var main = Ext.getCmp('mainpage');
main.remove(main.down('.siteContainer'));
but that did nothing at all.
I'm still new to Sencha. Any advice would be very much appreciated.
I was hoping for something similar to jquery's $('.classname').remove() which will work on multiple elements at the same time.
Did you try with removeNode or with destroy ?
I solved it by using jquery to get the ID of each component with the same class, then used senchas destroy() on the acquired ID.
$( $('.siteContainer') ).each(function( index ) {
var thiscont = $(this).attr('id');
Ext.getCmp(thiscont).destroy();
});
Recently I was thinking about the differences and similarities between Backbone.js and AngularJS.
What I find really convenient in Backbone are the Backbone-Models and the Backbone-Collections. You just have to set the urlRoot and then the communication with the backend-server via Ajax basically works.
Shouldn't it be possible to use just the Backbone-Models and Collections in AngularJS application?
So we would have the best of both worlds two-way data-binding with AngularJS and convenient access to the server-side (or other storage options) through Backbone-Models and Collections.
A quick internet search didn't turn up any site suggesting this usage scenario.
All resources either talk about using either the one or the other framework.
Does someone have experience with using Backbone-Models or Collections with AngularJS.
Wouldn't they complement each other nicely? Am I something missing?
a working binding for example above...
http://jsbin.com/ivumuz/2/edit
it demonstrates a way for working around Backbone Models with AngularJS.
but setters/getters connection would be better.
Had a similar idea in mind and came up with this idea:
Add just a getter and setter for ever model attribute.
Backbone.ngModel = Backbone.Model.extend({
initialize: function (opt) {
_.each(opt, function (value, key) {
Object.defineProperty(this, key, {
get: function () {
return this.get(key)
},
set: function (value) {
this.set(key, value);
},
enumerable: true,
configurable: true
});
}, this);
}
});
See the fiddle: http://jsfiddle.net/HszLj/
I was wondering if anyone had done this too. In my most recent / first angular app, I found Angular to be pretty lacking in models and collections (unless I am missing something of course!). Sure you can pull data from the server using $http or $resource, but what if you want to add custom methods/properties to your models or collections. For example, say you have a collections of cars, and you want to calculate the total cost. Something like this:
With a Backbone Collection, this would be pretty easy to implement:
carCollection.getTotalCost()
But in Angular, you'd probably have to wrap your custom method in a service and pass your collection to it, like this:
carCollectionService.getTotalCost(carCollection)
I like the Backbone approach because it reads cleaner in my opinion. Getting the 2 way data binding is tricky though. Check out this JSBin example.
http://jsbin.com/ovowav/1/edit
When you edit the numbers, collection.totalCost wont update because the car.cost properties are not getting set via model.set().
Instead, I basically used my own constructors/"classes" for models and collections, copied a subset of Backbone's API from Backbone.Model and Backbone.Collection, and modified my custom constructors/classes so that it would work with Angular's data binding.
Try taking a look at restangular.
I have not implemented it anywhere, but I saw a talk on it a few days ago. It seems to solve the same problem in an angular way.
Video: http://www.youtube.com/watch?v=eGrpnt2VQ3s
Valid question for sure.
Lot of limitations with the current implementation of $resource, which among others doesn't have internal collection management like Backbone.Collection. Having written my own collection/resource management layer in angular (using $http, not $resource), I'm now seeing if I can substitute much of the boilerplate internals for backbone collections and models.
So far the fetching and adding part is flawless and saves code, but the binding those backbone models (or the attributes within, rather) to ng-models on inputs for editing is not yet working.
#ericclemmons (github) has done the same thing and got the two to marry well - I'll ask him, get my test working, and post the conclusion...
I was wondering the same-
This is the use-case:
salesforce mobile sdk (hybrid) has a feature called smartstore/smartsync, that expects backbone models/collection ,which gets saved to local storage for offline access .
And you guessed it right, we want to use angularjs for rest of the hybrid app.
Valid question.
-Sree
You should look at the angularJS boilerplate with parse here. Parse is backbone like, but not exactly backbone. Thats where im starting my idea of a angularJS backboneJS project
Is there a preferred way to trigger Router.navigate in Backbone when a user clicks a link?
For instance a template might have a link Log Out. Is the preferred approach really to use a custom class and attach a click handler to that class in the view? This seems to generate tons of duplicate code so I'm looking for a better way.
The way to handle this kind of thing is to extend the Backbone objects ( in this case the View). You'll notice in the Backbone docs that this is encouraged, and necessary given its minimalist code base. I'd recommend checking out Marionette (on Github) and the site Backbone patterns for good ways to extend the Backbone core.
For example, maybe you extend View with a method that wires up the navigation handlers as you like:
Backbone.View.prototype.wireupNavs = function() {
var that = this;
this.$el.find("a[role=nav]").each(function() {
var target = $(this).attr('href');
that.bind("click", router.navigate(target);
});
}
Then any a tag you want as a Backbone nav element, you'd just decorate with the role="nav" attribute; and call this.wireupNavs() in the initializer function of the appropriate views.
The plugin model in Backbone.js is really nice, but one thing I'm wondering about is whether it's possible to use multiple plugins without modifying any of the plugin source.
For example, say I've written two plugins for the Collections:
MyBetterCollection = Backbone.Collection.extend({
coolNewFeature: function () {
console.log('This feature is great.');
}
});
MyWayBetterCollection = Backbone.Collection.extend({
wayCoolerNewFeature: function () {
console.log('This feature is even better.');
}
});
I can see some potential issues already, if, for example, both plugins override something like the add method. But having to modify third-party plugins would be a bummer:
MyWayBetterCollection = MyBetterCollection.extend({
...
});
Is there a good approach to handling this situation?
There isn't an easy way to do this. Since there is no traditional inheritance in JavaScript, it's difficult to provide this facility.
You'd have to find plug ins designed to work with each other or fork them and make them compatible.
You could also provide your own extend method that would use the interceptor pattern or some type of monkey patching to provide access to overwritten methods from previous prototypes that were overwritten.
The two collection you've defined above are totally separate from each other. They simply inherit the methods from Backbone.Controller, and if you defined methods with the similar name, then you overwrite those.
Think about Backbone as a class inheritance in other programming languages. Basically, you extend Backbone.Collection as you would do with other languages.
As a result, you can call the superclass, like this
var MyCollection = Backbone.Collection({
toJSON: function() {
var toJSON = this.constructor.__super__.toJSON.call(this);
toJSON.extra = 'my extra value';
return toJSON;
});
Even if you extend your own collection, the logic remains.
I'm writing a poll plugin for a website based on CakePHP. The plugin works good if I access it from its own URL (eg. myapp.com/plugin/controller) but I need to call it from different pages. I would like to include it as a widget in every page.
I'm looking for a method like $myplugin->renderPoll($pollId); but I really didn't find any information about how to instantiate the Polls class. I tried with App::import and ClassRegistry::init with no luck.
Any suggestion ?
Thank you
Looks like you are trying to create some sort of Helper to create poll cross views? I would suggest creating a Helper for that particular class. Simply create a helper in plugins/plugin_name/views/helpers/foo.php, and in each controller (or in app_controller.php) that you need it, include the helpers as $helpers = array("PluginName.Foo"); and inside your view, you should be able to use the methods defined in foo.php by calling $foo->renderPoll($pollId).
//app/plugins/plugin_name/views/helpers/foo.php
class FooHelper extends AppHelper {
var $name = "Foo";
function renderPoll($id=0) {
//...
}
}
Use Elements! They're small blocks of presentation code that need to be repeated from page to page, sometimes in different places in the layout.
Check this link out: http://book.cakephp.org/view/1081/Elements
I guess this link explains everything you need.