I'm working on an application where different widgets from different plugins would be loaded into a host, and they don't know of each other. So I want to use EDP and in one widget raise an event (for example, UserDeleted) and in another widget, subscribe to that event (the famous publisher/subscriber, or let's get more specific, observer pattern).
In jQuery I use trigger() and bind() methods to accomplish this. However, I'm not able to find anything equivalent in Ext JS. Am I missing something? Or is there any other pattern to create loosely coupled UI widgets in Ext JS?
If your widgets don't know about each other, you need to use the mediator pattern.
And it seems that Ext.util.Observable is what you're looking for.
Since ExtJS 4.x Sencha introduced the concept of Controllers which listen for events in a clean systematic pattern of an MVC application. In this scheme your components would fire events (built in or custom ) and controllers will respond to those events.
To fire a custom event you can use fireEvent method on the Observable class which is inherited by just about all other ExtJS classes.
Related
I'm sorry, I have Googled, looked through the Infragistics website and it's GitHub section, but I surrender.
How do you implement an "On row select" event, when using the IgniteUI library with AngularJS ?
Even the IgniteUI-AngularJS GitHub page, which contains a demo, doesn't show how to do this.
Here's the jQuery method of doing it (from this webpage)
$("#grid").on("iggridselectionactiverowchanged", function (evt, ui) {
var message = "iggridselectionactiverowchanged";
apiViewer.log(message);
});
...but I want to know how to capture this event from my AngularJS controller (and keeping the amount of jQuery to a minimum).
Is it possible ?
I also tried the standard way of adding a ng-model attribute to this control, and trying to put a watch on this variable, but even ng-model seems to be ignored by this control.
Has anyone used this control, successfully, using AngularJS ?
First I would like to provide some background info about Ignite UI. Ignite UI is built on top of jQuery and jQuery UI. The Angular directives for Ignite UI provide developers with a way to declaratively initialize controls and with out-of-the-box support for two-way databinding. Still the product is not native to Angular and thus not everything that it exposes as functionality can be consumed as you would with native Angular components. That doesn't mean that you lose functionality, just some of it has to be utilized through jQuery.
To answer the specific question, you can bind event handlers declaratively as described in the documentation.
Is there a good model for reusing UI components written in Backbone.js?
My team maintains a large web application that is mostly written in server-side code, but we're finding that we're doing more and more client side work. We have several large UI components that were written in jQuery, and they're really too complex to maintain with just a DOM manipulation library. We need a client-side application framework.
One nice thing that the jQuery plugin model offers is ease of reuse. You can just create a few HTML elements with the appropriate IDs and wire them up with $(function(){}). We'd definitely need to achieve something similar with Backbone if we adopted it.
Most of the examples out there show how to build an application entirely in Backbone, which is great, but we're not going to be reimplementing our app in JavaScript anytime soon. Our use of a client side framework would be confined to complex UI controls with a lot of business logic in them.
One other consideration is that we have a JavaScript bundling solution in place. I'm concerned that bundling a lot of Backbone elements together could mean that we end up with headless controls loading and running in the background.
Can you build Backbone controls and package them as jQuery plugins? Are there any good resources available about this kind of architecture?
For me one of the best parts of using Backbone is essentially what you are describing. The object-oriented-ness of Backbone makes it really easy to build out a specific 'widget' or other reusable code piece that you can bind events / templates / data to. You wouldn't necessarily want to make these jQuery plugins, simply because it wouldn't provide much benefit over Backbone's syntax.
For example, you could build a control class, and bind a click event to trigger the foo method on it.
var Control = Backbone.View.extend({
id:null,
events: {
'click' : 'foo'
},
foo: function(){
console.log(this.id);
}
})
Every time you want a DOM element to use this behaviour, you create a new Control object, and bind it to the element using jQuery.
//I say foo when you click me
var foo = new Control({el: $("#foo"), id:'foo' });
//I say bar when you click me
var bar = new Control({el: $("#bar"), id:'bar' });
(You feasibly could wrap those calls into a jQuery plugin)
This a really simple example to show what the workflow would be, you can get really intense with Backbone's models/collections and Underscore's templating engine to create some really robust dynamic & reusable classes.
Do you know of any reliable event aggregator implementation for ExtJs?
The best I've found is the MsgBus plugin by ozef Sakalos, aka Saki.
It provides a publish/subscribe model for message passing between ExtJS Components.
I have a problem related to Wicket and Ext JS. I have a text field in Ext JS and I want to add a Wicket ID to it. In Ext JS, text fields have limited properties. How can I do this?
There are at least two projects trying to integrate ext js into wicket:
http://code.google.com/p/wicket-extjs-integration/ gpl :(
http://code.google.com/p/wicket-ext/ apache license :)
You'll have to use the DOM to add custom attributes to the markup. See Ext.Element.
If you want to add a wicket:id then I presume that you are wanting to add a wicket component with that wicket:id to your page / component. For this to work that wicket:id will need to be present in the html for your page / component at render time. Therefore adding it to the DOM with javascript wont help you as wicket will never see it.
There are a few ext-js wicket integrations which may help you, but I haven't used them. Try searching on the wicket mail list: http://old.nabble.com/Apache-Wicket-f13974.html
The wicket-extjs-integration project is now available under the Apache license. Licensing is a tricky subject, however, due to the fact that ExtJS code itself is GPL. For details, see http://code.google.com/p/wicket-extjs-integration/wiki/Licensing.
The way we (Hippo) use it mostly is by letting the wicket component
set up the configuration and
implement component-bound services for the Ext component;
e.g. a read/write JsonStore can be implemented in pure java.
It's also easy to subscribe to Ext events with a (java) event listener.
Typically, the Wicket component only needs to bootstrap the Ext component. However, we've also had a few cases where we then needed to wrap a Wicket component in an Ext component. This is also quite easily accomplished. (see our Channel Manager code # http://svn.onehippo.org/repos/hippo/hippo-cms7/addons/addon-channel-manager/trunk/)
Being able to compose the Ext component hierarchy has allowed us to extend our Wicket-based plugin mechanism to the Ext side. E.g. Wicket plugins each instantiate a card/panel Ext component & those are aggregated on the wicket side in a component that instantiates an Ext tab panel.
The method annotation you mention is something we haven't needed; we typically trigger client-side code by emitting javascript code. Probably a cleaner solution would be to fire an event.
The versions of Wicket and ExtJS used are a bit antiquated (1.4.xx & 3.4.x), something we'll be addressing on a short term.
I've got a WPF application which uses the MVVM pattern throughout, no code-behind, the ViewModels communicate with each other through the MainViewModel which gets injected into each of them.
Eventually, this application needs to be incorporated into an application which uses Composite Application Library, Unity, etc. Looking through the code and documentation of CAL, I can see how I can register my whole application as a module in the CAL application, but how is my application-as-module going to communicate with the other modules that are also dynamically loaded? I'm expecting, e.g. that each module gets the CAL application somehow injected, or that there is some kind of Event Controller or Messenger with which I can loosely communicate with the other modules, i.e. can send a message and respond to events but not worry if those modules are actually there or not.
How do Composite Application modules communicate with each other?
If you are using CAL(Prism) look into the Event Aggregator/CompositePresentationEvent where it uses the Publisher/Subscriber pattern (aka Pub/Sub) so some Modules of the app is subscribed to an Event Aggregator, so when another Module has changes it will Publish changes e.g.(SelectedItemChanged) to the Event Aggregator, If Other Modules are interested in the changes Published they will act within there part of the application.
Example:
A Desktop e-mail Application:
Modules:
Mail Items (MailID,Subject,Sender,SentDate..etc)
Detail View (MessageBody)
If the selection in the Mail Items ListBox gets changed,It publishes the MailID to the Event Aggregator then Detail View knows about the change and then it grabs the MessageBody for that E-mail by MailID. where "MailItems" and "DetaliView" Modules have been developed by different teams but they have MailID as a common expected message in between.
Check out Prism's event aggregator.