PDA

View Full Version : Dynamic Carousel : Adding item erroring



stirucherai
9 Dec 2011, 3:02 AM
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({http://www.sencha.com/forum/chrome-devtools://devtools/Images/errorIcon.pngsencha-touch-all-debug-w-comments.js:53516 Uncaught TypeError: Cannot call method 'createChild' of null



tag: 'span'
}));
},

AndreaCammarata
9 Dec 2011, 5:50 AM
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
9 Dec 2011, 6:00 AM
...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
9 Dec 2011, 6:05 AM
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
9 Dec 2011, 6:09 AM
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
9 Dec 2011, 6:15 AM
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
9 Dec 2011, 6:34 AM
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
9 Dec 2011, 8:53 AM
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