1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    eriktoyra is on a distinguished road

      0  

    Default Answered: How to filter Ext.List when using store populated with an hierarchical JSON document?

    Answered: How to filter Ext.List when using store populated with an hierarchical JSON document?


    I have a JSON document like the one below. I'm trying to use this data in an Ext.List where I want to list games and have them filtered by the round they belong to. Round in this case is represented by "name", "lockedDate" and "games". A user can filter the list by clicking on buttons at the top of the list, like in the example below:

    example.png

    I can't figure out how to achieve a filtered list of games by filtering on rounds. I have no problem with populating a list as long as the data I populate the list with has a flat hierarchy, but as soon as I try with a JSON document like the one below it doesn't work.

    Can someone please give me an advice/example on how to do this? For more information and code examples please see my question on the same issue on Stackoverflow.

    Code:
    [{       "name": "Omgång 1",    "lockedDate": 1325420111,    "games": [        {            "gameId": 1,            "firstTeam": "Pol",            "secondTeam": "Gre",            "kickOff": 1339178400,            "firstTeamGoals": 0,            "secondTeamGoals": 3,            "firstTeamGoalsBet": 0,            "secondTeamGoalsBet": 3,            "points": 3        },        {            "gameId": 2,            "firstTeam": "Rus",            "secondTeam": "Cze",            "kickOff": 1339188300,            "firstTeamGoals": 4,            "secondTeamGoals": 1,            "firstTeamGoalsBet": 1,            "secondTeamGoalsBet": 2,            "points": 0        },{            "gameId": 3,            "firstTeam": "Ned",            "secondTeam": "Den",            "kickOff": 1339264800,            "firstTeamGoals": 2,            "secondTeamGoals": 1,            "firstTeamGoalsBet": 4,            "secondTeamGoalsBet": 2,            "points": 2        },        {            "gameId": 4,            "firstTeam": "Ger",            "secondTeam": "Por",            "firstTeamGoalsBet": 4,            "secondTeamGoalsBet": 0,            "kickOff": 1339274700        },        {            "gameId": 5,            "firstTeam": "Spa",            "secondTeam": "Ita",            "firstTeamGoalsBet": 3,            "secondTeamGoalsBet": 2,            "kickOff": 1339351200        },          {            "gameId": 6,            "firstTeam": "Irl",            "secondTeam": "Cro",            "kickOff": 1339361100        },        {            "gameId": 7,            "firstTeam": "Fra",            "secondTeam": "Eng",            "kickOff": 1339437600        },                    {            "gameId": 8,            "firstTeam": "Ukr",            "secondTeam": "Swe",            "kickOff": 1339447500        }    ]},{     "name": "Omgång 2",     "games": [         {            "gameId": 4,            "firstTeam": "Gre",            "secondTeam": "Cze",            "kickOff": 1339524000        }     ]},{     "name": "Omgång 3",     "games": [         {            "gameId": 4,            "firstTeam": "Gre",            "secondTeam": "Rus",            "kickOff": 1339869600        }     ]},{     "name": "Kvart",     "games": [         {            "gameId": 4,            "firstTeam": "1A",            "secondTeam": "2B",            "kickOff": 1340311500        }     ]},{     "name": "Semi",     "games": [         {            "gameId": 4,            "firstTeam": "#25",            "secondTeam": "#27",            "kickOff": 1340829900        }     ]},{     "name": "Final",     "games": [         {            "gameId": 4,            "firstTeam": "#29",            "secondTeam": "#30",            "kickOff": 1341175500        }     ]}]

  2. I have setup a test scenario at https://github.com/eriktoyra/Sencha-...2.0-Playground. It is a modified version of what is found at http://senchaexamples.com/2012/03/15...encha-touch-2/. What I want is the very same outcome as on the article on senchaexamples.com but with a store that has a nested data structure.

    Update:
    I managed to solve this by doing the following.

    1. Let the Division model handle the proxy and read the data from match.json instead of having the Division store read the data.

    2. Setup relationships between the Division and Team models so they are aware of each other.

    3. 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.

    4. 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.

    5. The actual filtering is done by looking up the Division object for each Team item in the list and compare the name property of Division with the one provided by the filter.

    The full solution is provided on GitHub.

    The question is if this is the correct/recommended way of doing it?

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can use filterBy on the store.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    eriktoyra is on a distinguished road

      0  

    Default


    I'm using a filter on the store, like so. As I understand it this will apply an initial filter on the store when it is first launched.

    PHP Code:
    Ext.define('EM.store.Rounds', {extend'Ext.data.Store',config: {    model'EM.model.Round',    storeId'Rounds',    filters: [{        property'name',        value'Round 1'    }],    /*grouper: {        groupFn: function (item) {            //var kickOff = new Date(util.convertUnixTimeToMilliseconds(item.get('kickOff')));            //return kickOff.format('d mmmm yyyy');        },        //sortProperty: 'kickOff'    },*/            proxy: {        type'rest',        url 'resources/json/matches.json',        reader: {            type'json',        }    },    autoLoadtrue,}}); 
    Later, when I want to change the filter for the store I use this handler when clicking on one of the buttons that filter the store.

    PHP Code:
    ... more code ...{                    xtype'button',                    text'Omgång 1',                    handler: function() {                        var sto Ext.getStore('Rounds');                        sto.clearFilter();                        sto.filter('name''Omgång 1');                        console.log(sto);                    }                },... more code ... 
    Am I doing this the right way?

    Also, what I really want is to display games, and not rounds, in the list. I'm using the Rounds store for the Ext.List because it already contains the Round + Games data. But somehow I can't get games to we output in the list as I want. Please have a look at my question at Stackoverflow for more details on each model, store and list view.

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    eriktoyra is on a distinguished road

      0  

    Default


    I have setup a test scenario at https://github.com/eriktoyra/Sencha-...2.0-Playground. It is a modified version of what is found at http://senchaexamples.com/2012/03/15...encha-touch-2/. What I want is the very same outcome as on the article on senchaexamples.com but with a store that has a nested data structure.

    Update:
    I managed to solve this by doing the following.

    1. Let the Division model handle the proxy and read the data from match.json instead of having the Division store read the data.

    2. Setup relationships between the Division and Team models so they are aware of each other.

    3. 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.

    4. 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.

    5. The actual filtering is done by looking up the Division object for each Team item in the list and compare the name property of Division with the one provided by the filter.

    The full solution is provided on GitHub.

    The question is if this is the correct/recommended way of doing it?
    Last edited by eriktoyra; 10 Apr 2012 at 1:56 PM. Reason: Updated with solition.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar