1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    72
    Vote Rating
    4
    Answers
    2
    ragecf is on a distinguished road

      0  

    Default Unanswered: How to define a form within a window?

    Unanswered: How to define a form within a window?


    Dear all, I'm trying upgrade my code from Ext3 to Ext4.
    But I can't organise the code pretty and clearly.

    For example, I want to upgrade my login window.
    In Ext3:

    Code:
    winLoginForm = function(){
        //define form buttons
        var buttons = [
            {text:'Login', handler:this.onLogin, scope:this},
            {text:'Reset', handler:this.onReset, scope:this}
        ];
    
        //define hot key - enter
        var key = {key:13, handler:this.onLogin, scope:this};
    
        //define login form
        this.form = new Ext.FormPanel({
            id:'login-form',
            title:'Login',
            
            ..........
    
            items:[
                {  
                    fieldLabel:'Employee No',
                    name:'username',
                    xtype:'textfield',
                    allowBlank:false
                }, {
                    fieldLabel:'Password',
                    name:'password',
                    xtype:'textfield',
                    inputType:'password',
                    allowBlank:false
                }
            ],
            buttons:buttons,
            keys:key
         });
    
          winLoginForm.superclass.constructor.call(this, {
            id:'login-win',
            width:280,
            
            .........
    
            items:this.form,
            listeners:{
                show:this.onReset
            }        //how to write this listeners in Ext4?             
        });
    };
    
    Ext.extend(winLoginForm, Ext.Window, {
        onLogin: function(){
                ..............
                //handle login here
        },
        onReset: function(){
                .............
               //Clear user name and password textfield here
        }
    });

    I tried the code in Ext4, but not satisfied.

    Code:
    Ext.define('MyApp.view.loginWin', {
        extend: 'Ext.window.Window',
       
        id: 'login-win',
        
        ......
       
        initComponent: function() {
            //define form hot keys - Enter & Esc
            var keys = {
                keypress: function(t, e) {
                    if(e.getKey() === 13) {
                        this.onLogin();
                    }else if(e.getKey() === 27) {
                        this.onReset();
                    }
                },
                scope: this
            }
           
            //define login form
            var loginForm = Ext.create('Ext.form.Panel', {
                id: 'login-form',
                title: 'Login',
                
                ..................
    
                items: [
                    {  
                        fieldLabel: 'Employee No',
                        name: 'username',
                        xtype: 'textfield',
                        allowBlank: false,
                        enableKeyEvents: true,
                        listeners: keys
                    }, {
                        fieldLabel: 'Password',
                        name: 'password',
                        xtype: 'textfield',
                        inputType: 'password',
                        allowBlank: false,
                        enableKeyEvents: true,
                        listeners: keys
                    }
                ],
                buttons: [
                   {text: 'Login', handler: this.onLogin, scope: this},
                    {text: 'Reset', handler: this.onReset, scope: this}   
                ]
            });
       
            this.items = loginForm;
     
            this.callParent();
        },
    
        onLogin: function() {
            Ext.Msg.alert('tt', 'ttt');
        },
        onReset: function() {
            Ext.Msg.alert('xx', 'xxx');
        }
    }


    Now I don't know how to write the listeners to call the onReset function when winLogin show().

    Did I wrote this Ext.define professionally? Show me the example or improvement, thanks a lot.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    That's fine how you did it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1