1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    66
    Vote Rating
    0
    stirucherai is on a distinguished road

      0  

    Default Dynamic Carousel : Adding item erroring

    Dynamic Carousel : Adding item erroring


    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'
    }));
    },

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by andreacammarata View Post
    ...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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    66
    Vote Rating
    0
    stirucherai is on a distinguished road

      0  

    Default


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


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

  5. #5
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


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

    Code:
    pattuCarousel.add(Ext.widget('panel',{
    	html:'<div>'+records[currentPattu].data.pattuText+'</div>'
    }));
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    66
    Vote Rating
    0
    stirucherai is on a distinguished road

      0  

    Default


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

    Code:
    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.

  7. #7
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


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

    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')
                        }));
                    });
                    
                }
            });
    
    
        }
    });
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    66
    Vote Rating
    0
    stirucherai is on a distinguished road

      0  

    Default


    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


    Code:
    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


Thread Participants: 1

Tags for this Thread