Ext Create/Define and Handler Function Scope

[nobruds]

Hello,

I yet don't understand how to properly access ext components, can someone enlighten me ?

Today I mainly uses this

var formSystem = Ext.getCmp('myForm');

How do I avoid that? see my code.

Problems:
1 - I only can use inline handler function, like panel button example, If I create a var for that function, my handler only can find it if it is declared before my handler call.
2 - I can't access my form or grid by their var 'name', only can using 'getCmp'.

var gridSistemas = Ext.create('Ext.grid.Panel',{
...
tbar: [
    { iconCls: 'btn-Ins', scope: this, tooltip: 'Insert', handler: insertFunc }
]
});

var formSystem = Ext.create('Ext.form.Panel',{
...
items: [{
buttons: [
      {
            id: 'btnSave', text: 'Save', scope: this, 
            handler: function () {
                 var formSystem = Ext.getCmp('myForm');
                                    
                 if (formSystem.isValid()) {
                  ...
                 }
           }
       }]
}]
});

var insertFunc = function ()
{
        //Here I need to access myForm
}

var saveFunc = function ()
{
        //Here I need to access myForm
}

var myPanel = Ext.create('Ext.Panel',{
       //Here I display my components
});

Thanks

[Tim Toady]

You really should use MVC. It will separate the code for you and you can add handlers and references quite easily.
http://docs.sencha.com/extjs/4.2.3/#...n_architecture
http://docs.sencha.com/extjs/4.2.3/#!/guide/mvc_pt1

However, within a handler you can still componentquery in a variety of ways. What I might do in the instance of not using MVC and not having a ref would be to use the up method on the button. btn.up('form')

The way you are trying to do isn't working because they can't both be defined before the other. You could probably call insertFunc from an anonymous method as the handler though. That is more directly what you are trying to achieve. Kinda clunky and I wouldn't recommend that approach. MVC is the way to go.

[nobruds]

hi

Ok, so I can change the getCmp to the btn.up method. But what about the handler function ?

Why I have to define it inline and not use the var that I created ? I saw one example that this worked

[Tim Toady]

It's not that you can't use a var there. You can. It is just the way you are trying to use it.

[nobruds]

It's not that you can't use a var there. You can. It is just the way you are trying to use it.

Oh ok, got it. Thanks Tim

I don't have the time now to change it to MVC, but I will see that later.
Its working now, I declared my functions before the form and the grid, and worked.
I am using it with asp.net MVC 4.


Maybe you can help me with another question, I am using the submit method from my form to call my server side function, by default it pass all my form fields as parameter, plus the ones I define, there's a way that I can pass it in One parameter, like an object ?
I think a json with all my forms fields will be the best right ?

var formFieldsJson = Ext.encode(form.getValues());