1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    0
    mimishi is on a distinguished road

      0  

    Default define class function and varible

    define class function and varible


    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

  2. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    See my fixes in red color.
    Code:
    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.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    0
    mimishi is on a distinguished road

      0  

    Default


    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:

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

    mimi

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    0
    mimishi is on a distinguished road

      0  

    Default


    further, based on normal class notion and ExtJS4 doc., the following way should also work:
    Code:
        //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

  5. #5
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Quote Originally Posted by mimishi View Post
    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:

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

  6. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Quote Originally Posted by mimishi View Post
    further, based on normal class notion and ExtJS4 doc., the following way should also work:
    Code:
        //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
    Code:
        //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.
    

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."