Issue with grouping a List

[FullThrottle]

I have a list :

Ext.define('Test.view.PatientList', {
	extend: 'Ext.dataview.List',
	xtype: 'patientList',
	id: 'patientList',
	fullscreen: true,
	config: {
		itemTpl: '<div id="{id}">{lastName}, {firstName}</div>',
		store: 'PatientStore',
		grouped: true,
		indexBar: true
	}
});

And store:

Ext.define('Test.store.PatientStore', {
	extend: 'Ext.data.Store',
	model: 'Test.model.PatientModel',
	requires: [ 'Test.model.PatientModel' ],
	sorters: [ 'lastName', 'firstName' ],
	getGroupString: function(record){
		return record.get('lastName')[0];	
	},
	autoLoad: false,
	autoSync: true,


	proxy: {
		type: 'ajax',
		api: {
			read: '../Services/PatientWebService.asmx/GetAllPatients'
		},
		reader: {
			type: 'xml',
			record: 'PatientData',
			root: 'ArrayOfPatientData'
		},
		afterRequest: function(response, opts){


		}
	}
});

If I don't include the grouped and indexBar attributes, the list loads normally, showing all the data. However when I add these properties I get an error:

Uncaught TypeError: Cannot call method 'insertFirst' of null

Because the me.getViewItems() inside sencha comes back as null.

[FullThrottle]

Any update on this? I'm still stuck

[AndreaCammarata]

Are you using the Sencha Touch 2 PR2?

[FullThrottle]

Yes I am.

[rdougan]

Can you provide a simple testcase please, including fake data?

[premek.v]

I have a simmilar problem,
grouped list with only one item throws an error..

There is something like ...fly(items[items-length-2]) in Sencha Touch code...

[FullThrottle]

The only way I can reproduce this is by using Ajax Proxy in my store, so this isn't as simple of an example as I'm sure you'd have liked. Here is my app.js

Ext.Loader.setConfig( {enabled: true} );


Ext.define('TestController', {
    extend: 'Ext.app.Controller',


    config: {
        profile: Ext.os.deviceType.toLowerCase()
    },


    views: [
        'ContactList'
    ],


    init: function()
    {
    }
});


Ext.define('Contact', {
   extend: 'Ext.data.Model',
   fields: ['firstName', 'lastName']
});


Ext.define('ContactList', {
    extend: 'Ext.dataview.List',
    xtype: 'contactlist',
    id: 'contactList',
    fullscreen: true,
    config: {
        itemTpl: '<div>{lastName}, {firstName}</div>',
        store: 'TestStore',
        grouped: true,
        indexBar: true
    }
});


Ext.application({
    name: 'test',


    models: [
        'Contact'
    ],


    stores: [
        'TestStore'
    ],


    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: 'fit',
            items: [{
                layout: 'fit',
                xtype: 'contactlist'
            }]
        });


        Ext.data.StoreManager.lookup('TestStore').load();
    }
});

and here is my TestStore.js

Ext.define('test.store.TestStore', {
    extend: 'Ext.data.Store',
       model: 'Contact',
       sorters: 'lastName',


       getGroupString: function(record) {
        return record.get('lastName')[0];
       },


    autoLoad: false,
    autoSync: true,


   proxy: {
    type: 'ajax',
    api: {
      read: '../Services/PatientWebService.asmx/GetAllPatients'
    },
    reader: {
      type: 'xml',
      record: 'PatientData',
      root: 'ArrayOfPatientData'
    },
    afterRequest: function(response, opts){


    }
  }
});

and here is an example of the XML data I'm getting back from my WebService

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfPatientData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
  <PatientData>
    <id>252</id>
    <firstName>First5</firstName>
    <lastName>Last5</lastName>
  </PatientData>
  <PatientData>
    <id>253</id>
    <firstName>First4</firstName>
    <lastName>Last4</lastName>
  </PatientData>
  <PatientData>
    <id>254</id>
    <firstName>First3</firstName>
    <lastName>Last3</lastName>
  </PatientData>
  <PatientData>
    <id>255</id>
    <firstName>First2</firstName>
    <lastName>Last2</lastName>
  </PatientData>
  <PatientData>
    <id>256</id>
    <firstName>First1</firstName>
    <lastName>Last1</lastName>
  </PatientData>
</ArrayOfPatientData>

You are probably going to have to make a webservice that mimics this data in order to recreate the issue.

This is the function that fails for me in sencha core because item is undefined:

doAddHeader: function(item, html) {
        Ext.get(item).insertFirst(Ext.Element.create({
            cls: this.headerClsShortCache,
            html: html
        }));
    }

and this is the call stack

Ext.define.doAddHeader() at sencha-touch-all-debug.js:44659Ext.define.findGroupHeaderIndices() at sencha-touch-all-debug.js:44651Ext.define.doRefreshHeaders() at sencha-touch-all-debug.js:44385Ext.define.doFire() at sencha-touch-all-debug.js:12851Ext.define.fire() at sencha-touch-all-debug.js:12777Ext.define.doDispatchEvent() at sencha-touch-all-debug.js:18568Ext.define.dispatchEvent() at sencha-touch-all-debug.js:18539Ext.define.doFireEvent() at sencha-touch-all-debug.js:21070Ext.define.fireEvent() at sencha-touch-all-debug.js:21040Ext.define.loadRecords() at sencha-touch-all-debug.js:26966Ext.define.onProxyLoad() at sencha-touch-all-debug.js:26727Ext.define.processResponse() at sencha-touch-all-debug.js:22715(anonymous function)() at sencha-touch-all-debug.js:25310Ext.apply.callback() at sencha-touch-all-debug.js:5774Ext.define.onComplete() at sencha-touch-all-debug.js:22073Ext.define.onStateChange() at sencha-touch-all-debug.js:22024(anonymous function)() at sencha-touch-all-debug.js:1964

[Jamie Avins]

Thank you for the updated test case.

[FullThrottle]

No problem, Thanks for the help!

[FullThrottle]

If you guys find a work around let me know please