Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Let's start by describing DOM elements' event handling.</p> <h2>DOM node event handling</h2> <p>First of all you wouldn't want to work with DOM node directly. Instead you probably would want to utilize <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element" rel="noreferrer"><code>Ext.Element</code></a> interface. For the purpose of assigning event handlers, <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-addListener" rel="noreferrer"><code>Element.addListener</code></a> and <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-on" rel="noreferrer"><code>Element.on</code></a> (these are equivalent) were created. So, for example, if we have html:</p> <pre><code>&lt;div id="test_node"&gt;&lt;/div&gt; </code></pre> <p>and we want add <code>click</code> event handler.<br> Let's retrieve <code>Element</code>:</p> <pre><code>var el = Ext.get('test_node'); </code></pre> <p>Now let's check docs for <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-event-click" rel="noreferrer"><code>click</code></a> event. It's handler may have three parameters:</p> <blockquote> <p>click( Ext.EventObject e, HTMLElement t, Object eOpts )</p> </blockquote> <p>Knowing all this stuff we can assign handler:</p> <pre><code>// event name event handler el.on( 'click' , function(e, t, eOpts){ // handling event here }); </code></pre> <h2>Widgets event handling</h2> <p>Widgets event handling is pretty much similar to DOM nodes event handling. </p> <p>First of all, widgets event handling is realized by utilizing <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable" rel="noreferrer"><code>Ext.util.Observable</code></a> mixin. In order to handle events properly your widget must containg <code>Ext.util.Observable</code> as a mixin. All built-in widgets (like Panel, Form, Tree, Grid, ...) has <code>Ext.util.Observable</code> as a mixin by default.</p> <p>For widgets there are two ways of assigning handlers. The first one - is to use <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable-method-on" rel="noreferrer">on</a> method (or <code>addListener</code>). Let's for example create <code>Button</code> widget and assign <code>click</code> event to it. First of all you should check event's docs for handler's arguments:</p> <blockquote> <p>click( Ext.button.Button this, Event e, Object eOpts )</p> </blockquote> <p>Now let's use <code>on</code>:</p> <pre><code>var myButton = Ext.create('Ext.button.Button', { text: 'Test button' }); myButton.on('click', function(btn, e, eOpts) { // event handling here console.log(btn, e, eOpts); }); </code></pre> <p>The second way is to use widget's <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable-cfg-listeners" rel="noreferrer">listeners</a> config:</p> <pre><code>var myButton = Ext.create('Ext.button.Button', { text: 'Test button', listeners : { click: function(btn, e, eOpts) { // event handling here console.log(btn, e, eOpts); } } }); </code></pre> <p>Notice that <code>Button</code> widget is a special kind of widgets. Click event can be assigned to this widget by using <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-handler" rel="noreferrer"><code>handler</code></a> config:</p> <pre><code>var myButton = Ext.create('Ext.button.Button', { text: 'Test button', handler : function(btn, e, eOpts) { // event handling here console.log(btn, e, eOpts); } }); </code></pre> <h2>Custom events firing</h2> <p>First of all you need to register an event using <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable-method-addEvents" rel="noreferrer">addEvents</a> method:</p> <pre><code>myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */); </code></pre> <p>Using the <code>addEvents</code> method is optional. As comments to this method say there is no need to use this method but it provides place for events documentation.</p> <p>To fire your event use <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable-method-fireEvent" rel="noreferrer">fireEvent</a> method:</p> <pre><code>myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */); </code></pre> <p><code>arg1, arg2, arg3, /* ... */</code> will be passed into handler. Now we can handle your event:</p> <pre><code>myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) { // event handling here console.log(arg1, arg2, arg3, /* ... */); }); </code></pre> <p>It's worth mentioning that the best place for inserting <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable-method-addEvents" rel="noreferrer">addEvents</a> method call is widget's <code>initComponent</code> method when you are defining new widget:</p> <pre><code>Ext.define('MyCustomButton', { extend: 'Ext.button.Button', // ... other configs, initComponent: function(){ this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */); // ... this.callParent(arguments); } }); var myButton = Ext.create('MyCustomButton', { /* configs */ }); </code></pre> <h2>Preventing event bubbling</h2> <p>To prevent bubbling you can <code>return false</code> or use <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.EventObject-method-stopPropagation" rel="noreferrer"><code>Ext.EventObject.preventDefault()</code></a>. In order to prevent browser's default action use <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.EventObject-method-preventDefault" rel="noreferrer"><code>Ext.EventObject.stopPropagation()</code></a>.</p> <p>For example let's assign click event handler to our button. And if not left button was clicked prevent default browser action:</p> <pre><code>myButton.on('click', function(btn, e){ if (e.button !== 0) e.preventDefault(); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POExplain ExtJS 4 event handling
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USmajorBummer
    1. USMolecular Man
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POExplain ExtJS 4 event handling
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COthis, is greed, but is there any way to do the "addEvents" thing via some config? :)
      singulars
      1. PO
      1. USjrharshath
    2. CO@jrharshath, as far as I know, unfortunatly, there is no way of doing that via config.
      singulars
      1. PO
      1. USMolecular Man
    3. COhow does one create these -'myspecialevent1', I see you've attached it and handled it but how do we create these?
      singulars
      1. PO
      1. USheyNow
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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