Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I managed to find a solution to this problem by using a test scenario that resembles the actual one I have.</p> <h3>Solution</h3> <p>What I did was:</p> <ol> <li>Let the Division model handle the proxy and read the data from <em>match.json</em> instead of having the Division store read the data.</li> <li>Setup relationships between the Division and Team models so they are aware of each other.</li> <li>Setup two stores. One for Division and one for Team. When loading the Division store I used a callback to populate the Team store with Team data from the Division store.</li> <li>Then I populated the list with the Team store, which has Team objects which now is aware of their references to the Division model/store. </li> <li>The actual filtering is done by looking up the Division object for each Team item in the list and compare the <em>name</em> property of Division with the one provided by the filter.</li> </ol> <p>The full solution is provided below and also available on <a href="https://github.com/eriktoyra/Sencha-Touch-2.0-Playground" rel="nofollow">GitHub</a>.</p> <p>I will keep the question as unanswered for some days if someone else should find a better solution or point out some improvements.</p> <pre><code> /** * @description The main purpose of this mockup is to test how to filter a list using hierarchical data. The code is adapted from the example * "Filtering data in an Ext.List component in Sencha Touch 2" by Peter deHaan. * @see &lt;a href="http://senchaexamples.com/2012/03/15/filtering-data-in-an-ext-list-component-in-sencha-touch-2/"&gt;Filtering data in an Ext.List component in Sencha Touch 2&lt;/a&gt;. * @author &lt;a href="mailto:erik.toyra[at]gmail.com"&gt;Erik Töyrä&lt;/a&gt; */ Ext.application({ launch: function () { /** * Division model */ Ext.define("Division", { extend: 'Ext.data.Model', config: { fields: [ 'division' ], // Setup a hasMany relations between Division and Team hasMany: {model: 'Team', name: 'teams'}, // Load data from teams.json into the Division model proxy: { type: 'rest', url : 'teams.json', reader: { type: 'json' } } } }); /** * Team model */ Ext.define("Team", { extend: 'Ext.data.Model', config: { fields: [ 'name', 'league' ], // Setup a belongsTo relationship between Team and Division belongsTo: {model: 'Division'}, } }); /** * Division store */ var divisionStore = Ext.create('Ext.data.Store', { model: "Division", storeId: 'divisionStore', }); /** * Team store */ var teamStore = Ext.create('Ext.data.Store', { model: "Team", storeId: 'teamStore', // This is the store we will reference in our Ext.list below. fields: ['division', 'leage', 'name'], }); /** * Load the Division store which holds all of the data read from teams.json. * After the data has been loaded we add the team data to the teamStore. */ divisionStore.load({ callback: function() { // Loop through each division and retrieve the all teams that resides as // childs to the division. Then we add each team to the teamStore. divisionStore.each(function(division) { division.teams().each(function(team) { teamStore.add(team); }); }); } }); /** * Create the list that should be filtered by Division and display a filtered list with Team objects. */ Ext.create('Ext.List', { fullscreen: true, items: [{ xtype: 'titlebar', docked: 'top', ui: 'neutral', items: [{ text: 'West only', handler: function () { return util.doFilter('West'); } // handler }, { text: 'Central only', handler: function () { return util.doFilter('Central'); } // handler }, { text: 'East only', handler: function () { return util.doFilter('East'); } // handler }, { text: 'Clear filters', ui: 'decline', align: 'right', handler: function () { Ext.getStore('teamStore').clearFilter(); } // handler } ] // items (toolbar) }], // items (list) store: 'teamStore', itemTpl: '{name}, {league}', }); // create() /** * Utility functions */ var util = (function() { var util = {}; /** * Filter the teamStore by the passed in Division name. */ util.doFilter = function(filterOption) { var store = Ext.getStore('teamStore'); // Clear all existing filters first... store.clearFilter(); // ... then apply the selected filter store.filterBy(function(record, id) { return record.getDivision().get('division') == filterOption; }, this); } return util; })(); } // launch }); // application() </code></pre> <h3>JSON data</h3> <pre><code>[ { division: 'East', teams: [ { name: 'New York Yankees', league: 'AL', }, { name: 'Tampa Bay', league: 'AL', }, { name: 'Boston', league: 'AL', }, { name: 'Toronto', league: 'AL', }, { name: 'Baltimore', league: 'AL', } ] }, { division: 'Central', teams: [ { name: 'Detroit', league: 'AL', }, { name: 'Cleveland', league: 'AL', }, { name: 'Chicago White Sox', league: 'AL', }, { name: 'Kansas City', league: 'AL', }, { name: 'Minnesota', league: 'AL', } ] }, { division: 'West', teams: [ { name: 'Texas', league: 'AL', }, { name: 'Los Angeles Angels', league: 'AL', }, { name: 'Oakland', league: 'AL', }, { name: 'Seattle', league: 'AL', } ] } ] </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POHow to filter Ext.List populated with hierarchical data from a store?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USErik Töyrä
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to filter Ext.List populated with hierarchical data from a store?
      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. VTAcceptedByOriginator
    1. COI'm marking my own answer as "Accepted answer". If anyone should post a better solution I'm more than willing to change "Accepter answer".
      singulars
      1. PO
      1. USErik Töyrä
 

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