Grouped list does not display

[robl]

I do not understand why this "grouped list" does not work. If you remove "grouped: true" from the config, it displays but otherwise doesn't. It appears to be a bug in PR1 but I'm not sure. Thoughts?

Ext.regModel('Employee', {
    fields: ['firstName', 'lastName']
});


Ext.define('EmployeeListStore', {
	extend: 'Ext.data.Store',
    model: 'Employee',
    sorters: 'firstName',
    getGroupString : function(record) {
        return record.get('firstName');
    },
    data: [
        {firstName: 'Penelope', lastName: 'Gayer'},
        {firstName: 'Katy', lastName: 'Bluford'},
        {firstName: 'Kelly', lastName: 'Mchargue'},
        {firstName: 'Darren', lastName: 'Devalle'},
        {firstName: 'Julio', lastName: 'Buchannon'},
        {firstName: 'Darren', lastName: 'Schreier'},
        {firstName: 'Jamie', lastName: 'Pollman'},
        {firstName: 'Karina', lastName: 'Pompey'},
        {firstName: 'Hugh', lastName: 'Snover'},
        {firstName: 'Zebra', lastName: 'Evilias'}
    ]
});


Ext.application({
    name: 'GroupedListTest',


    launch: function() {
		console.log('launch:');
        var myPanel = Ext.create("Ext.Panel", {
            fullscreen: true,
            layout: 'fit',
            items: [
			{
	            title: 'Grouped',
	            layout: 'fit',
	            items: [{
					id: 'employeesList',
	                xtype: 'list',
					store: 'theEmployeeStore',
	                itemTpl: '<strong>{firstName}</strong> {lastName}',
                        grouped: true,
	                indexBar: false
	            }]
	        }
			]
        });
        console.log('myPanel=' + myPanel);


        var employeesList = myPanel.down('#employeesList');
        console.log('employeesList=' + employeesList);


		myStore = new EmployeeListStore();
		console.log('myStore=' + myStore);
		
		employeesList.setStore(myStore);
		console.log('employeesList.getStore()=' + employeesList.getStore());
    }
});

[SunboX]

There are some bugs with List and Store and grouped headers in PR1. Try to refresh() the List, after the setStore() call. Should fix it. If it doesn´t work, try calling refresh() two times!

[robl]

That did not work. I'm still looking for an answer...

There are some bugs with List and Store and grouped headers in PR1. Try to refresh() the List, after the setStore() call. Should fix it. If it doesn´t work, try calling refresh() two times!

[SunboX]

If I run your example I get this error message:

sencha-touch-all-debug.js:59201
Uncaught TypeError: Cannot call method 'on' of null

greetings Sunny

[SunboX]

Looking at your Code, I found your fault:

store: 'myXYZStore'

You defined an invalid store. Sencha tries to call store.on({}) on an store that doesn´t exist.

This code will work:

Ext.regModel('Employee', {
    fields: ['firstName', 'lastName']
});


Ext.define('EmployeeListStore', {
    extend: 'Ext.data.Store',
    model: 'Employee',
    sorters: 'firstName',
    getGroupString : function(record) {
        return record.get('firstName');
    },
    data: [
        {firstName: 'Penelope', lastName: 'Gayer'},
        {firstName: 'Katy', lastName: 'Bluford'},
        {firstName: 'Kelly', lastName: 'Mchargue'},
        {firstName: 'Darren', lastName: 'Devalle'},
        {firstName: 'Julio', lastName: 'Buchannon'},
        {firstName: 'Darren', lastName: 'Schreier'},
        {firstName: 'Jamie', lastName: 'Pollman'},
        {firstName: 'Karina', lastName: 'Pompey'},
        {firstName: 'Hugh', lastName: 'Snover'},
        {firstName: 'Zebra', lastName: 'Evilias'}
    ]
});


Ext.application({
    name: 'GroupedListTest',


    launch: function() {
        console.log('launch:');
        
        myStore = new EmployeeListStore();
        console.log('myStore=' + myStore);
        
        var myPanel = Ext.create("Ext.Panel", {
            fullscreen: true,
            layout: 'fit',
            items: [
            {
                title: 'Grouped',
                layout: 'fit',
                items: [{
                    id: 'employeesList',
                    xtype: 'list',
                    store: myStore,
                    itemTpl: '<strong>{firstName}</strong> {lastName}',
                        grouped: true,
                    indexBar: false
                }]
            }
            ]
        });
        console.log('myPanel=' + myPanel);


        var employeesList = myPanel.down('#employeesList');
        console.log('employeesList=' + employeesList);
        
        //employeesList.setStore(myStore);
        console.log('employeesList.getStore()=' + employeesList.getStore());
    }
}); 

greetings Sunny (your debugger ;o))

[robl]

Thanks.