1. #1
    Sencha Premium Member RiaanSA's Avatar
    Join Date
    Mar 2012
    Location
    Centurion South Aftica
    Posts
    70
    Vote Rating
    0
    RiaanSA is on a distinguished road

      0  

    Default Where to put my functions?

    Where to put my functions?


    Hi,

    I need some advice on what is the best place to store my "custom" functions.

    What I am experiencing a lot is "function name not defined"

    For example.
    in my main js I will have
    Code:
    panel_west = Ext.create('view.main.PanelWest');
    form_centre = Ext.create('view.main.FormCentre');
    
    
    Ext.create('Ext.container.Viewport', {
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [
            panel_west,
            form_centre,
                {
                        region: 'south',
                        title: 'Information',
                        collapsible: true,
                        collapsed: true,
                        html: 'Information goes here',
                        split: true,
                        height: 100,
                        minHeight: 100
                }
    ]
    });
    And the centre part.
    Code:
    Ext.define('view.main.FormCentre', {
        extend : 'Ext.form.Panel',
        id: 'Center_Form',
        region: 'center',
        html: '<table><tr><td align="middle"><img height="84" width="84" src="/media/icons/icon.png" alt="Man" onmousedown="genFunctioname();"/><br/></tr></table>'
    });
    
    
    
    
    function genFunctioname() {
        alert('Function');
    };

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The short answer is to not use inline functions, it limits you pretty heavily and is also not great design:

    Code:
    Ext.define('view.main.FormCentre', {
        extend : 'Ext.form.Panel',
        id: 'Center_Form',
        region: 'center',
        html: '<table><tr><td align="middle"><img height="84" width="84" src="/media/icons/icon.png" alt="Man"/><br/></tr></table>',
        
        afterRender: function(){
            this.callParent(arguments);
            this.mon(this.el.down('img'), 'mousedown', this.foo, this);
        },
        
        foo: function(e, t){
            console.log(e, t)
        }
    });
    
    
    
    Ext.onReady(function(){
        new view.main.FormCentre({
            renderTo: document.body
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member RiaanSA's Avatar
    Join Date
    Mar 2012
    Location
    Centurion South Aftica
    Posts
    70
    Vote Rating
    0
    RiaanSA is on a distinguished road

      0  

    Default


    Thanks,

    This helps a lot.

    Just one more question.

    I have noticed the
    Ext.onReady(function(){
    new view.main.FormCenter({
    renderTo: document.body
    });
    });
    Will this be the recommended way to render the form instead of using
    Code:
    form_center = Ext.create('view.main.FormCenter');
    and using the form_center as part of my viewport?

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Yes, that was just for the sake of example. If you're putting a component in a container you should never render/renderTo.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha Premium Member RiaanSA's Avatar
    Join Date
    Mar 2012
    Location
    Centurion South Aftica
    Posts
    70
    Vote Rating
    0
    RiaanSA is on a distinguished road

      0  

    Default


    I have also noticed when adding more images it only bind's to the first image?

    this.mon(this.el.down('img'), 'mousedown', this.clickImage, this);
    Am I missing something?

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    down() retrieves a single child element that matches the selector.

    If you have multiple images you probably want to use event delegation:

    Code:
    this.el.on('mousedown', this.foo, this, {
        delegate: 'img'
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1