define class function and varible

[mimishi]

Hi,

I want to define a project with ExtJS4 class notion. But somehow don't know how to access class variable within that class.
i.e. : I define a Login class which extend from Ext.panel.Panel also including another formPanel and buttons inside, like:

Ext.define('My.view.Login', {
extend: 'Ext.panel.Panel',
//defining the xtype
alias: 'widget.loginPanel',
model: 'Login',
store: 'Login',
html: 'Please Login',
style: "background-color: #222;",

//Static variables or functions
statics: {

},

//Local variables or functions
config: {
loginButton:{},
settingsPanel:{}
},

initComponent: function () {
settingsPanel = new Ext.form.Panel({
centered: 'true',
width: '100%',
height: '100%',

items: [
{
xtype: 'textfield',
name: 'uname',
label: 'User Name'
},
{
xtype: 'textfield',
name: 'uresource',
label: 'Resource'
},
{
xtype: 'passwordfield',
name: 'upassword',
label: 'Password'
},
{
xtype: 'urlfield',
name: 'host',
label: 'Host url'
}];
});
loginButton = new Ext.Button({
text: 'Login',
width: '100',
height: '100',
handler: function(){

}
});
//similar to this.super()
this.callParent(arguments);
},
items:[settingsPanel,loginButton]
});

but give error like 'settingsPanel' is undefined.
Any hint? (load ext-all-debug.js in index.html)

thanks

[vietits]

See my fixes in red color.

Ext.define('My.view.Login', {
    extend: 'Ext.panel.Panel',
    //defining the xtype
    alias: 'widget.loginPanel',
    model: 'Login',
    store: 'Login',
    html: 'Please Login',
    style: "background-color: #222;",


    //Static variables or functions
    statics: {


    },


    //Local variables or functions
    config: {
        loginButton:{},
        settingsPanel:{}
    },


    initComponent: function () {
        var settingsPanel = new Ext.form.Panel({
            centered: 'true',
            width: '100%',
            height: '100%',


            items: [{
                xtype: 'textfield',
                name: 'uname',
                label: 'User Name'
            },{
                xtype: 'textfield',
                name: 'uresource',
                label: 'Resource'
            },{
                xtype: 'passwordfield',
                name: 'upassword',
                label: 'Password' 
            },{
                xtype: 'urlfield',
                name: 'host',
                label: 'Host url' 
            }];
        }); 
        var loginButton = new Ext.Button({
            text: 'Login',
            width: '100',
            height: '100',
            handler: function(){ 


            }
        });
        this.items = [settingsPanel,loginButton];
        //similar to this.super()
        this.callParent(arguments);
    },
//  items:[settingsPanel,loginButton]
});

BTW, you should put your code inside CODE tag to make it easier to read.

[mimishi]

Thanks for your quick reply.
Your code works, but variables loginButton and settingsPanel are limited in the initComponent function closure.
How can I define class member functions/variables with config:{...}(as document said), initialize them in initComponent and refer them in the rest of that class? something like:

    //Local variables or functions
    config: {
        loginButton:{},
        settingsPanel:{}
    },
    initComponent: function () {
            settingsPanel = new Ext.form.Panel({...});
            loginButton = new Ext.Button({...});
     },
    items:[settingsPanel,loginButton]

many thinks,

mimi

[mimishi]

further, based on normal class notion and ExtJS4 doc., the following way should also work:

    //Static variables or functions
    statics: {
        loginButton:{},
        settingsPanel:{}
    },

    initComponent: function () {
            Login.settingsPanel = new Ext.form.Panel({...});
            Login.loginButton = new Ext.Button({...});
     }
    items:[Login.settingsPanel,Login.loginButton]

but it has run time error either.

How can I define static variables/function and refer them in somewhere else?

Thanks in ahead,
mimi

[vietits]

Thanks for your quick reply.
Your code works, but variables loginButton and settingsPanel are limited in the initComponent function closure.
How can I define class member functions/variables with config:{...}(as document said), initialize them in initComponent and refer them in the rest of that class? something like:

    //Local variables or functions
    config: {
        loginButton:{},
        settingsPanel:{}
    },
    initComponent: function () {
            settingsPanel = new Ext.form.Panel({...});
            loginButton = new Ext.Button({...});
     },
    items:[settingsPanel,loginButton]

many thinks,

mimi

See my fix in red color

    //Local variables or functions
    config: {
        loginButton:{},
        settingsPanel:{}
    },
    initComponent: function () {
        var me = this;
         me.initConfig();      
        var settingsPanel = new Ext.form.Panel({...});
        var loginButton = new Ext.Button({...});
        me.items = [settingsPanel, loginButton];
        me.setSettingsPanel(settingsPanel);
        me.setLoginButton(loginButton);
        me.callParent(arguments);
     },
    // items:[settingsPanel,loginButton] //<- settingsPanel, loginButton are only available when an object is constructed, they are undefined at defining time.
...
to refer to config variables at runtime
var settingsPanel = <object>.getSettingsPanel(); // <object> is an instance created from above class

[vietits]

further, based on normal class notion and ExtJS4 doc., the following way should also work:

    //Static variables or functions
    statics: {
        loginButton:{},
        settingsPanel:{}
    },

    initComponent: function () {
            Login.settingsPanel = new Ext.form.Panel({...});
            Login.loginButton = new Ext.Button({...});
     }
    items:[Login.settingsPanel,Login.loginButton]

but it has run time error either.

How can I define static variables/function and refer them in somewhere else?

Thanks in ahead,
mimi

    //Static variables or functions
    statics: {
        loginButton:{},
        settingsPanel:{}
    },

    initComponent: function () {
            Login.settingsPanel = new Ext.form.Panel({...});
            Login.loginButton = new Ext.Button({...});
            items:[Login.settingsPanel,Login.loginButton];
            this.callParent(arguments);
     }
    // items:[Login.settingsPanel,Login.loginButton] //< Login is undefined at defining time.