StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You are pretty much there, and although I'm pretty sure you are understanding it all, for the benefit of others allow me to give an extended answer and a slightly modified solution to your problem.</p> <p>Definitions:</p> <ul> <li>The <strong>Model</strong> - primarily defines the fields a record has.</li> <li>A <strong>Store</strong> - holds a collection of records.</li> <li>A <strong>Proxy</strong> - facilitates server communication through a chosen method (Ajax, Direct, etc.) and maps CRUD (Create/Read/Update/Destroy) operations when such result from a change in the associated store or model.</li> <li>A <strong>Reader</strong> - Tells a proxy how to interpret the data the server returns.</li> <li>A <strong>Grid</strong> or <strong>Combobox</strong> - can display store records.</li> </ul> <p>You scenario is not an uncommon one - while by default ExtJS loads each store separately, it is likely an application would prefer various stores to be loaded at once through a single read call; for example, when rendering one store-dependent component is dependent on another store.</p> <p>Your code is not far off from achieving this, but here is how I do it. In effect, when a 'master' (Tasks) store loads, the server response also carries the data of a 'slave' (Tags) store, which is then manually loaded to that 'slave' store.</p> <p>The 'slave' store (notice <code>autoload: false</code> and no read operation): </p> <pre><code>Ext.define('DL.store.Tags', { extend: 'Ext.data.Store', model: 'DL.model.Tag', // Notice the tags are actually returned when the tasks are loaded and loaded into this store by the TasksStore. autoLoad: false, autoSync: true, proxy: { type: 'direct', api: { create: Tags.Create, update: Tags.Update, destroy: Tags.Destroy, }, reader: { type: 'json', root: 'tags' } }, }); </code></pre> <p>Then the 'master' store:</p> <pre><code>Ext.define('DL.store.Tasks', { extend: 'Ext.data.TreeStore', model: 'DL.model.Task', autoLoad: true, autoSync: true, root: { text: 'Root', id: null, expanded: true }, proxy: { type: 'direct', api: { create: Tasks.Create, read: Tasks.Read, update: Tasks.Update, destroy: Tasks.Destroy, }, }, onProxyLoad: function( aOperation ) { // A read request for tasks will also return the user tags. // So feed these tags into their store. var iResult = aOperation.response.result, iTagsStore = Ext.StoreManager.lookup( 'Tags' ); if ( Ext.isDefined( iResult.tags ) ) iTagsStore.loadRawData( iResult ); // We need this line for "Tasks" store to load its own data this.callParent(arguments); } }); </code></pre> <p>Basically all it does is it takes part of the server response and loads it manually to the 'slave' store.</p> <p>The PHP server side code (for tasks read operation) involves:</p> <pre><code>return array( 'success' => true, 'children' => $iNodes, 'tags' => $iTags ); </code></pre> <p>Where <code>children</code> is the reader's root of the 'master' store, and <code>tags</code> is additional data that is then loaded into the 'slave' store.</p> <p>I hope you can work how how to apply these concepts to your code.</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