1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    Answers
    4
    robl is on a distinguished road

      0  

    Default Answered: Grouped list does not display

    Answered: Grouped list does not display


    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?


    Code:
    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());
        }
    });

  2. Looking at your Code, I found your fault:

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

    This code will work:
    PHP Code:
    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", {
                
    fullscreentrue,
                
    layout'fit',
                
    items: [
                {
                    
    title'Grouped',
                    
    layout'fit',
                    
    items: [{
                        
    id'employeesList',
                        
    xtype'list',
                        
    storemyStore,
                        
    itemTpl'<strong>{firstName}</strong> {lastName}',
                            
    groupedtrue,
                        
    indexBarfalse
                    
    }]
                }
                ]
            });
            
    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))

  3. #2
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    Answers
    5
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default


    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!

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    Answers
    4
    robl is on a distinguished road

      0  

    Default


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

    Quote Originally Posted by SunboX View Post
    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!

  5. #4
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    Answers
    5
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default


    If I run your example I get this error message:

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

  6. #5
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    Answers
    5
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default


    Looking at your Code, I found your fault:

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

    This code will work:
    PHP Code:
    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", {
                
    fullscreentrue,
                
    layout'fit',
                
    items: [
                {
                    
    title'Grouped',
                    
    layout'fit',
                    
    items: [{
                        
    id'employeesList',
                        
    xtype'list',
                        
    storemyStore,
                        
    itemTpl'<strong>{firstName}</strong> {lastName}',
                            
    groupedtrue,
                        
    indexBarfalse
                    
    }]
                }
                ]
            });
            
    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))

  7. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    Answers
    4
    robl is on a distinguished road

      0  

    Default


    Thanks.

Thread Participants: 1