StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1><strong>Firing application wide events</strong></h1> <h2>How to make controllers talk to each other ...</h2> <p>In addition to the very great answer above I want to mention application wide events which can be very useful in an MVC setup to enable communication between controllers. (extjs4.1)</p> <p>Lets say we have a controller Station (Sencha MVC examples) with a select box:</p> <pre><code>Ext.define('Pandora.controller.Station', { extend: 'Ext.app.Controller', ... init: function() { this.control({ 'stationslist': { selectionchange: this.onStationSelect }, ... }); }, ... onStationSelect: function(selModel, selection) { this.application.fireEvent('stationstart', selection[0]); }, ... }); </code></pre> <p>When the select box triggers a change event, the function <code>onStationSelect</code> is fired.</p> <p>Within that function we see:</p> <pre><code>this.application.fireEvent('stationstart', selection[0]); </code></pre> <p>This creates and fires an application wide event that we can listen to from any other controller.</p> <p>Thus in another controller we can now know when the station select box has been changed. This is done through listening to <code>this.application.on</code> as follows:</p> <pre><code>Ext.define('Pandora.controller.Song', { extend: 'Ext.app.Controller', ... init: function() { this.control({ 'recentlyplayedscroller': { selectionchange: this.onSongSelect } }); // Listen for an application wide event this.application.on({ stationstart: this.onStationStart, scope: this }); }, .... onStationStart: function(station) { console.info('I called to inform you that the Station controller select box just has been changed'); console.info('Now what do you want to do next?'); }, } </code></pre> <p>If the selectbox has been changed we now fire the function <code>onStationStart</code> in the controller <code>Song</code> also ...</p> <p><strong>From the Sencha docs:</strong></p> <p><em>Application events are extremely useful for events that have many controllers. Instead of listening for the same view event in each of these controllers, only one controller listens for the view event and fires an application-wide event that the others can listen for. This also allows controllers to communicate with one another without knowing about or depending on each other’s existence.</em></p> <p>In my case: Clicking on a tree node to update data in a grid panel.</p> <p><strong>Update 2016 thanks to @gm2008 from the comments below:</strong></p> <p>In terms of firing application-wide custom events, there is a new method now after <strong>ExtJS V5.1</strong> is published, which is using <code>Ext.GlobalEvents</code>. </p> <p>When you fire events, you can call: <code>Ext.GlobalEvents.fireEvent('custom_event');</code></p> <p>When you register a handler of the event, you call: <code>Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);</code></p> <p>This method is not limited to controllers. Any component can handle a custom event through putting the component object as the input parameter scope.</p> <p><a href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/guide/mvc_pt2" rel="nofollow noreferrer">Found in Sencha Docs: MVC Part 2</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload