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
    109
    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
    109
    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
    109
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar