Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1022 in a recent build.
  1. #1
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    stan229 is on a distinguished road

      0  

    Default Grouped LIst not working with AJAX proxy loading

    Grouped LIst not working with AJAX proxy loading


    REQUIRED INFORMATION Ext version tested:
    • Sencha Touch 2.0 rev PR2
    Browser versions tested against:
    • Chrome 15
    • Safari 5
    DOCTYPE tested against:
    • html
    Description:
    • When having a Grouped list backed by a REST proxy, it does not function.
    • It throws an error.
    • When there is data hardcoded into the store it's fine.
    • Digging through the source it looks like it tries to attach header to the list's DOM items that have not been rendered yet.
    Steps to reproduce the problem:
    • Create grouped list
    • Call store.load() on grouped list's store.
    The result that was expected:
    • List would render fine
    The result that occurs instead:
    • Loading mask keeps spinning, nothing gets rendered
    • Error gets thrown:
      • . Uncaught TypeError: Cannot call method 'insertFirst' of null
        . Ext.define.doAddHeadersencha-touch-all-debug.js:44659

        . Ext.define.findGroupHeaderIndicessencha-touch-all-debug.js:44651

        . Ext.define.doRefreshHeaderssencha-touch-all-debug.js:44385

        . Ext.define.doFiresencha-touch-all-debug.js:12851

        . Ext.define.firesencha-touch-all-debug.js:12777

        . Ext.define.doDispatchEventsencha-touch-all-debug.js:18568

        . Ext.define.dispatchEventsencha-touch-all-debug.js:18539

        . Ext.define.doFireEventsencha-touch-all-debug.js:21070

        . Ext.define.fireEventsencha-touch-all-debug.js:21040

        . Ext.define.loadRecordssencha-touch-all-debug.js:26966

        . Ext.define.onProxyLoadsencha-touch-all-debug.js:26727

        . Ext.define.processResponsesencha-touch-all-debug.js:22715

        . (anonymous function)sencha-touch-all-debug.js:25310

        . Ext.apply.callbacksencha-touch-all-debug.js:5774

        . Ext.define.onCompletesencha-touch-all-debug.js:22073

        . Ext.define.onStateChangesencha-touch-all-debug.js:22024

        . (anonymous function)sencha-touch-all-debug.js:1964

    Test Case:
    Code:
        Ext.define('SuperQualifier.model.Borrower', {
        extend : 'Ext.data.Model',
        fields : [{
            name : "id",
            type : "int"
        }, {
            name : "lastName",
            type : "string"
        }, {
            name : "firstName",
            type : "string"
        }],
        proxy : {
            type : "rest",
            url : '../borrower/getBorrowers',
            reader : {
                type : 'json'
            }
        }
    })
    
    //Store
    Ext.define('SuperQualifier.store.Borrowers', {
        extend : 'Ext.data.Store',
        model : 'SuperQualifier.model.Borrower',
        requires : ['SuperQualifier.model.Borrower'],
        getGroupString : function(record) {
            return record.get('lastName')[0];
        },
        sorters : 'lastName',
        // data : [{
            // "class" : "com.breakpoint.Borrower",
            // "id" : 1,
            // "dateCreated" : "2011-11-02T05:26:32Z",
            // "firstName" : "Testfirst",
            // "lastName" : "Testlast",
            // "lastUpdated" : "2011-11-02T05:26:32Z",
            // "qualifiers" : []
        // }]
    });
    
    //List
    Ext.define('SuperQualifier.view.BorrowerList', {
        extend : 'Ext.List',
        xtype : 'borrowerlist',
        config : {
            store : 'Borrowers',
            itemTpl : '<div class="contact"><strong>{firstName}</strong> {lastName}</div>',
            grouped : true,
            indexBar : true
        }
    });
    Ext.setup({
        onReady : function() {
    
            Ext.create('SuperQualifier.view.BorrowerList', {
                fullscreen : true,
                store : Ext.create('SuperQualifier.store.Borrowers'),
                listeners : {
                    show : function() {
                        this.getStore().load({
                            params : {
                                id : 1
                            }
                        });
                    }
                }
            });
    
        }
    });
    HELPFUL INFORMATION Debugging already done:
    • Through chrome debugger
    Possible fix:
    • Load data through Ext.Ajax.request
    • Populate store's data
    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • Mac OSX 10.7.2

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report.

  3. #3
    Ext JS Premium Member Brendan Carroll's Avatar
    Join Date
    May 2007
    Location
    Balmer, MD.
    Posts
    139
    Vote Rating
    1
    Brendan Carroll is on a distinguished road

      0  

    Default Confirmed breaking bug

    Confirmed breaking bug


    first argument in doAddHeader is undefiend.
    -BC ...

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Do either of you have a bit of an easier to reproduce test case?

    Sencha Inc

    Jamie Avins

    @jamieavins

  5. #5
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    stan229 is on a distinguished road

      0  

    Default


    Unfortunately this requires an AJAX proxy. If I give a public link that shows the error would that help?

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Anything would be great or you can PM it to me if you wish.

    Sencha Inc

    Jamie Avins

    @jamieavins

  7. #7
    Ext JS Premium Member Brendan Carroll's Avatar
    Join Date
    May 2007
    Location
    Balmer, MD.
    Posts
    139
    Vote Rating
    1
    Brendan Carroll is on a distinguished road

      0  

    Default


    Here's my use case. The list itself:

    Code:
    Ext.define('Sha.view.ResultsList', {
        extend: 'Ext.List',
        xtype: 'resultslist',
        layout: 'fit',
        headerTitle: 'Search Results',
        config: {
            store: 'Pois',
            itemTpl: '{name}',
            grouped: true
            //onItemDisclosure: true
        },
    
        initialize: function () {
            console.log('initialize countylist');
            this.callParent();
        }
    });
    The model pulling from a .json file but really a c# WCF service with validated JSON:

    Code:
    Ext.define('Sha.model.Poi', {
        extend: 'Ext.data.Model',
        fields: ['id', 'name', 'theme', 'tname'],
        proxy: {
            type: 'ajax',
            url: 'data/pois.json',
            extraParams: {
                format: 'json',
                category: null,
                filtertype: null,
                filterid: null,
                x: null,
                y: null,
                distance: null
            },
            reader: {
                type: 'json',
                root: 'results'
            }
        }
    });
    The store:

    Code:
    Ext.define('Sha.store.Pois', {
        extend: 'Ext.data.Store',
        requires: 'Sha.model.Poi',
        model: 'Sha.model.Poi',
        autoLoad: false,
        sorters: 'name',
        groupField: 'tname'
    });

    The controller. The notable part being I set the AJAX proxy extrParams then reload the store based on user selected item. In PR1 the same code worked but would end up producing multiple, empty, stacked headers if I went back to the same category over and over. The bottom header in the stack would container the data. This is why you see me trying to purge the bounded store. It never worked, though. PR2 thows an error as noted in my earlier post. If I set don't group the store it works wonderfully:

    Code:
    Ext.define('Sha.controller.Poi', {
        extend: 'Ext.app.Controller',
        views: ['SearchContainer', 'CatagoriesList', 'SearchList', 'CountiesList', 'TownsList', 'AddressGeocoder', 'ResultsList'],
        stores: ['Catagories', 'SearchTypes', 'Counties', 'Towns', 'Addresses', 'Pois'],
        requires: [
            'Sha.class.UserInput'
        ],
        config: {
            profile: Ext.os.deviceType.toLowerCase(),
            userinputs: null
        },
        refs: [{
            selector: 'searchcontainer > navigationbar',
            ref: 'navBar'
        }, {
            selector: 'catagorieslist',
            ref: 'CatagoriesList'
        }, {
            selector: 'searchlist',
            ref: 'SearchList'
        }, {
            selector: 'addressgeocoder',
            ref: 'AddressGeocoder'
        }, {
            selector: 'townslist',
            ref: 'TownsList'
        }, {
            selector: 'countieslist',
            ref: 'CountiesList'
        }, {
            selector: 'poislist',
            ref: 'PoisList'
        }],
    
        init: function () {
            this.callParent();
            this.application.addListener('GisUpdated', this.onGisUpdated, this);
            //console.log('Init home controller');
            // Start listening for events on views
            this.control({
                'list': { 'select': function (m, r) {
                    console.log(m.xtype);
                    var d = null;
                    switch (m.xtype) {
                        case 'catagorieslist':
                            d = this.getSearchList();
                            this.userinputs.setCategory(r.get('ID'));
                            break;
                        case 'townslist':
                            this.userinputs.setFilterId(r.get('ID'));
                            this.loadPois();
                            break;
                        case 'countieslist':
                            this.userinputs.setFilterId(r.get('ID'));
                            this.loadPois();
                            break;
                        case 'searchlist':
                            switch (r.get('LocatedBy')) {
                                case 'Address':
                                    d = this.getAddressGeocoder();
                                    //this.userinputs.setFilterId(r.get('ID'));
                                    break;
                                case 'County':
                                    d = this.getCountiesList();                                
                                    this.userinputs.setFilterType('county');
                                    break;
                                case 'Town':
                                    d = this.getTownsList();                                
                                    this.userinputs.setFilterType('town');
                                    break;
                                case 'Current Location':
                                    //d = this.getTownsList();
                                    break;
                                case 'List':
                                    //d = this.getTownsList();
                                    break;
                            }
                            break;
                    }
                    if (d !== null) {
                        this.getNavBar().up('container').setActiveItem(d);
                        this.getNavBar().setTitle(d.headerTitle);
                    }
                    this.application.fireEvent('PoiUpdated', this.userinputs);
                }
                },
                'container': { 'activeitemchange': function (cont, newVal, oldVal, opts) {
                    //console.log('changed to ' + newVal + ' from ' + oldVal);
                    if (!Ext.isEmpty(oldVal)) {
                        var nb = this.getNavBar();
                        if (!Ext.isEmpty(nb)) {
                            //console.log(newVal.headerTitle);
                            if (newVal.headerTitle === 'Choose Catagory') {
                                nb.down('button').setHidden(true);
                            } else {
                                nb.down('button').setHidden(false);
                            }
                        }
                    }
                }
                },
                '#navBack': { 'tap': function () {
                    //console.log('navigating back');
                    var m = this.getNavBar().up().getActiveItem();
                    //console.log(m.xtype);
                    var d = null;
                    switch (m.xtype) {
                        case 'catagorieslist':
                            d = null;
                            break;
                        case 'searchlist':
                            d = this.getCatagoriesList();
                            break
                        default:
                            d = this.getSearchList();
                            break;
                    }
                    if (d !== null) {
                        this.getNavBar().setTitle(d.headerTitle);
                        this.getNavBar().up('container').setActiveItem(d);
                    }
                }
                }
            });
        },
    
        loadPois: function () {
            var poistore = this.getPoisStore();
            //poistore.removeAll(true);
    
            var poiproxy = poistore.getProxy();
    
            poiproxy.setExtraParam('category', this.userinputs.getCategory());
            poiproxy.setExtraParam('filtertype', this.userinputs.getFilterType());
            poiproxy.setExtraParam('filterid', this.userinputs.getFilterId());
    
            poistore.load();
            //poistore.group();
        },
         
        onGisUpdated: function (ui) {
            console.log('POI reports GIS updated: ' + ui.getCategory());
    
        },
    
        onLaunch: function () {
    
        }
    });


    pois.json file extract:


    Code:
    {
    'success': true,
    'results': [
    {
    'id': 6182,
    'cid': 1,
    'name': 'PerryvillePoliceDepartment',
    'theme': 'Police Stations'
    },
    {
    'id': 6184,
    'cid': 1,
    'name': 'RisingSunPoliceDeptment',
    'theme': 'Police Stations'
    },
    {
    'id': 5781,
    'cid': 1,
    'name': 'CumberlandPoliceDepartment',
    'theme': 'Police Stations'
    },
    {
    'id': 3055,
    'cid': 2,
    'name': 'CapitolCollege',
    'theme': 'Colleges'
    },
    {
    'id': 2871,
    'cid': 2,
    'name': 'UniversityofMarylandUniversityCollege',
    'theme': 'Colleges'
    },
    {
    'id': 2872,
    'cid': 2,
    'name': 'PrinceGeorgesCommunityCollege',
    'theme': 'Colleges'
    },
    {
    'id': 2873,
    'cid': 2,
    'name': 'WashingtonBibleCollegeCapitolBibleSeminary',
    'theme': 'Colleges'
    },
    {
    'id': 2875,
    'cid': 2,
    'name': 'BowieStateUniversity',
    'theme': 'Colleges'
    },
    {
    'id': 3097,
    'cid': 2,
    'name': 'MountSaintMarysUniversity',
    'theme': 'Colleges'
    },
    {
    'id': 2700,
    'cid': 2,
    'name': 'FrederickCommunityCollege',
    'theme': 'Colleges'
    },
    {
    'id': 6314,
    'cid': 3,
    'name': 'HiltonAreacampground PatapscoValleyStatePark',
    'theme': 'Parks'
    },
    {
    'id': 6315,
    'cid': 3,
    'name': 'Hart-MillerIslandCampground',
    'theme': 'Parks'
    },
    {
    'id': 6316,
    'cid': 3,
    'name': 'FortWhaleyCampground',
    'theme': 'Parks'
    },
    {
    'id': 6317,
    'cid': 3,
    'name': 'CastawaysRVResortCampground',
    'theme': 'Parks'
    },
    {
    'id': 547,
    'cid': 4,
    'name': 'TheJohnsHopkinsHospital',
    'theme': 'Parks'
    },
    {
    'id': 549,
    'cid': 4,
    'name': 'DivisionofRehabilitation',
    'theme': 'Parks'
    },
    {
    'id': 550,
    'cid': 4,
    'name': 'KennedyKriegerInstitute',
    'theme': 'Parks'
    },
    {
    'id': 551,
    'cid': 4,
    'name': 'St.AgnesHospital',
    'theme': 'Parks'
    },
    {
    'id': 1178,
    'cid': 4,
    'name': 'BaltimoreWashingtonMedicalCenter',
    'theme': 'Parks'
    },
    {
    'id': 1180,
    'cid': 4,
    'name': 'AnneArundelMedicalCenter',
    'theme': 'Parks'
    },
    {
    'id': 1352,
    'cid': 4,
    'name': 'KimbroughAmbulatoryCareCenter',
    'theme': 'Parks'
    },
    {
    'id': 1078,
    'cid': 5,
    'name': 'ForestParkGolfCourse',
    'theme': 'Parks'
    },
    {
    'id': 1041,
    'cid': 5,
    'name': 'GlennDaleGolfClub',
    'theme': 'Parks'
    },
    {
    'id': 987,
    'cid': 5,
    'name': 'MarltonGolfClub',
    'theme': 'Parks'
    },
    {
    'id': 991,
    'cid': 5,
    'name': 'NationalGolfClub',
    'theme': 'Parks'
    },
    {
    'id': 1000,
    'cid': 5,
    'name': 'CountryClubatWoodmore',
    'theme': 'Parks'
    },
    {
    'id': 1001,
    'cid': 5,
    'name': 'LakeArborGolfClub',
    'theme': 'Parks'
    },
    {
    'id': 3338,
    'cid': 6,
    'name': 'AccokeekFringeParking',
    'theme': 'Parks'
    },
    {
    'id': 3818,
    'cid': 6,
    'name': 'JOHNSHOPSKINSHOSPITAL',
    'theme': 'Parks'
    },
    {
    'id': 3819,
    'cid': 6,
    'name': 'LEXINGTONMARKETSTATION',
    'theme': 'Parks'
    },
    {
    'id': 3849,
    'cid': 6,
    'name': 'Wheaton-DCMetroRedLine',
    'theme': 'Parks'
    },
    {
    'id': 3857,
    'cid': 6,
    'name': 'CollegeParkAirport',
    'theme': 'Parks'
    },
    {
    'id': 3413,
    'cid': 6,
    'name': 'ParkandRide',
    'theme': 'Parks'
    },
    {
    'id': 4195,
    'cid': 6,
    'name': 'Rockville-DCMetroRedLine',
    'theme': 'Parks'
    },
    {
    'id': 3078,
    'cid': 6,
    'name': 'ColesvilleCommuterLotParkandRide',
    'theme': 'Parks'
    },
    {
    'id': 7459,
    'cid': 7,
    'name': 'CarrollCountyFarmersMarket',
    'theme': 'Parks'
    },
    {
    'id': 7460,
    'cid': 7,
    'name': 'MtAiryFarmersMarket',
    'theme': 'Parks'
    },
    {
    'id': 7461,
    'cid': 7,
    'name': 'DowntownWestminsterFarmers Market',
    'theme': 'Parks'
    },
    {
    'id': 7462,
    'cid': 7,
    'name': 'TaneytownFarmers Market',
    'theme': 'Parks'
    },
    {
    'id': 6895,
    'cid': 7,
    'name': 'ChestertownFarmers Market',
    'theme': 'Parks'
    },
    {
    'id': 7275,
    'cid': 7,
    'name': 'BrunswickAreaFarmers Market',
    'theme': 'Parks'
    },
    {
    'id': 7284,
    'cid': 7,
    'name': 'MiddletownFarmers Market',
    'theme': 'Parks'
    },
    {
    'id': 7285,
    'cid': 7,
    'name': 'TheGreatFrederickFairFarmers Market',
    'theme': 'Parks'
    },
    {
    'id': 6935,
    'cid': 7,
    'name': 'StateCenterCommunityFarmersMarket',
    'theme': 'Parks'
    },
    {
    'id': 6936,
    'cid': 7,
    'name': 'UniversityFarmersMarket',
    'theme': 'Parks'
    },
    {
    'id': 6937,
    'cid': 7,
    'name': 'JohnHopkinsHospitalFarmersMarket',
    'theme': 'Parks'
    },
    {
    'id': 6247,
    'cid': 8,
    'name': 'JohnONeillMonument',
    'theme': 'Parks'
    },
    {
    'id': 6029,
    'cid': 8,
    'name': 'CraighillChannelRearUpperRange',
    'theme': 'Parks'
    },
    {
    'id': 5462,
    'cid': 8,
    'name': 'FenwickLighthouse',
    'theme': 'Parks'
    },
    {
    'id': 5969,
    'cid': 8,
    'name': 'CraighillChannelRearLowerRange',
    'theme': 'Parks'
    },
    {
    'id': 440,
    'cid': 8,
    'name': 'SANDYPOINTSHOAL',
    'theme': 'Parks'
    },
    {
    'id': 622,
    'cid': 8,
    'name': 'WyeGristMill',
    'theme': 'Parks'
    },
    {
    'id': 614,
    'cid': 8,
    'name': 'StillPondNavigationalLighthouse',
    'theme': 'Parks'
    },
    {
    'id': 722,
    'cid': 8,
    'name': 'PhoenixShotTower',
    'theme': 'Parks'
    },
    {
    'id': 1063,
    'cid': 8,
    'name': 'LazarettoLighthouse',
    'theme': 'Parks'
    },
    {
    'id': 1177,
    'cid': 8,
    'name': 'FortGarrison',
    'theme': 'Parks'
    }
    ]
    }
    -BC ...

  8. #8
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you both for the detailed test cases. There were a bunch of small issues related to this problem that should now be resolved for the next release.

    Sencha Inc

    Jamie Avins

    @jamieavins

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    quocble is on a distinguished road

      0  

    Default confirmed

    confirmed


    GAH, I just spent 3 hrs figuring why then realized this is a bug. This is really bad.

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    dbwelch is on a distinguished road

      0  

    Default Workaround?

    Workaround?


    Is there a workaround for this? I have also spent a few hours looking at how to resolve...please help if any way to use grouped lists with Ajax requests!

    Why does the heading on post say this was fixed? Is it in code that hasn't been released?

    If so, you should probably change the verbiage in the heading.