Where to put my functions?

[RiaanSA]

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

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.

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

[evant]

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

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

[RiaanSA]

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

form_center = Ext.create('view.main.FormCenter');

and using the form_center as part of my viewport?

[evant]

Yes, that was just for the sake of example. If you're putting a component in a container you should never render/renderTo.

[RiaanSA]

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?

[evant]

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

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

this.el.on('mousedown', this.foo, this, {
    delegate: 'img'
});