Dynamic Carousel : Adding item erroring

[stirucherai]

Here is the portion code.

response = pattuStore.load({scope:

this,callback: function(records, operation, success){var currentPattu = 0;pattuCarousel=Ext.ComponentMgr.get("pattuCarousel");while (currentPattu < (records.length)) {

pattuCarousel.add({html:

'<div>'+ records[currentPattu].data.pattuText + '</div>'});

pattuCarousel.setIndicator(currentPattu);

currentPattu++;}}

});

Error is as follows:
Uncaught TypeError: Cannot call method 'createChild' of null.


The error was in
addIndicator: function() {
this.indicators.push(this.element.createChild({sencha-touch-all-debug-w-comments.js:53516 Uncaught TypeError: Cannot call method 'createChild' of null



tag: 'span'
}));
},

[AndreaCammarata]

Hi.
Can you please format your code inside "code" tags?
However, I think you misunderstood the use of the "setIndicator" function:
It accepts a boolean value which tells the carousel if display or not the carousel indicator.

Hope this helps.

[AndreaCammarata]

...I think you misunderstood the use of the "setIndicator" function:
It accepts a boolean value which tells the carousel if display or not the carousel indicator.

Try to remove the line of code where you call the "setIndicator" function and see if something change.

[stirucherai]

Attaching the code below. BTW -- the error occurs pattuCarousel.add({html ... itself -- so it does not reach setIndicator

response = pattuStore.load({
           scope:this,
        callback: function(records, operation, success)
          {  
                   var currentPattu = 0;
                   pattuCarousel=Ext.ComponentMgr.get("pattuCarousel");
                   while (currentPattu < (records.length)) 
                     {
                                 //var element = new Ext.Panel({});
                               //element.setHtml(records[currentPattu].data.pattuText);
                              //pattuCarousel.add(element);
                               pattuCarousel.add({html:'<div>'+records[currentPattu].data.pattuText+'</div>'})
                              pattuCarousel.setIndicator(currentPattu);

                              //pattucarousel.indicator.indicators[currentPattu].dom.onclick=tapIndicator;

                              currentPattu++;
                      }
           }

});

[AndreaCammarata]

Ok, the problem is that you need to provide a component to add to your carousel.
So, you should write:

pattuCarousel.add(Ext.widget('panel',{
	html:'<div>'+records[currentPattu].data.pattuText+'</div>'
}));

Hope this helps.

[stirucherai]

Thanks for quick reply -- but error remains the same.

addIndicator: function() {
        this.indicators.push(this.element.createChild({ 



            tag: 'span'
        }));
    },

When check using javascript console "this" does not have "this.element" -- meaning it is null.

[AndreaCammarata]

This example I've wrote works for me.
Please take a look at the code:

Ext.application({
    name: 'App',
    launch: function() {
        
        var carousel = Ext.widget('carousel', {
            fullscreen: true
        });
        
        Ext.regModel('Contact', {
           fields: ['firstName', 'lastName']
        });


        var store = new Ext.data.Store({
           model: 'Contact',
           sorters: 'lastName',
           proxy: {
              type: 'memory'
           },
           data: [
               {firstName: 'Tommy',   lastName: 'Maintz'},
               {firstName: 'Rob',     lastName: 'Dougan'},
               {firstName: 'Ed',      lastName: 'Spencer'},
               {firstName: 'Jamie',   lastName: 'Avins'},
               {firstName: 'Aaron',   lastName: 'Conran'},
               {firstName: 'Dave',    lastName: 'Kaneda'},
               {firstName: 'Jacky',   lastName: 'Nguyen'},
               {firstName: 'Abraham', lastName: 'Elias'},
               {firstName: 'Jay',     lastName: 'Robinson'},
               {firstName: 'Nigel',   lastName: 'White'},
               {firstName: 'Don',     lastName: 'Griffin'},
               {firstName: 'Nico',    lastName: 'Ferrero'},
               {firstName: 'Nicolas', lastName: 'Belmonte'},
               {firstName: 'Jason',   lastName: 'Johnston'}
           ]
        });
        
        store.load({
            callback: function(records, operation, success){


                Ext.each(records, function(record){
                    carousel.add(Ext.widget('panel',{
                        html: record.get('firstName') + ' ' + record.get('lastName')
                    }));
                });
                
            }
        });


    }
});

[stirucherai]

Thanks. I am not sure whether your example is for Sencha 2.0 -- it does not work

"Ext.regModel has been deprecated. Models can now be created by extending Ext.data.Model: Ext.define("MyModel", {extend: "Ext.data.Model", fields: []});.
Uncaught TypeError: Cannot call method 'radioCls' of undefined


But I tried you code and added

Ext.each(records, 
function(record){pattuCarousel.add(Ext.widget('panel',{html: record.get('pattuText')}));
});

It does not work still -- same error

Thanks and Regards
Sarang