Adding elements to a panel

[swamyveera]

Hi there,
Attached is a screenshot of my form and this is the code

/**
 * @class Lib.form.Break
 * @extends Ext.BoxComponent 
 * Implements a a HR across a form
 */

Ext.namespace('Lib.form');

Lib.form.Break = function(config){
    Lib.form.Break.superclass.constructor.call(this, config);
};

Ext.extend(Lib.form.Break, Ext.BoxComponent,  {
    // private
    onRender : function(ct, position){
        if(this.el){
            this.el = Ext.get(this.el);
            if(!this.target){
                ct.dom.appendChild(this.el.dom);
            }
        }else {
            var cfg = {tag: "br", style:"color:#B5B8C8; height:1px;"};
            if(!cfg.name){
                cfg.name = this.name || this.id;
            }
            this.el = ct.createChild(cfg, position);
        }
    }
});
/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function() {

    //Panel for Logo
    var logoPanel=new Ext.Panel({
        baseCls: "z-page",
        bodyStyle:'border-bottom:1px dotted white;',        
        anchor: '100%',
        height: 163,
        width: 500
    });
//    Ext.QuickTips.init();
    Ext.QuickTips.enable();
    Ext.form.Field.prototype.msgTarget = 'under';
    var lnBreak=new Lib.form.Break();
    var frmLogin = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        labelWidth:85,
        labelAlign: "right",
        defaultType: 'textfield',
        bodyStyle:'color:white;background-color:#234C8A;',
        itemCls: "items",
        buttonAlign:'right',        
        items: [logoPanel,lnBreak,
        {
            fieldLabel: 'Username',
            name: 'edtUser',
            id: 'edtUser',
            anchor:'60%',  // anchor width by percentage
            blankText: 'Invalid username',
            selectOnFocus: true,
            maxLength:10,
            allowBlank: false,
            validateOnBlur:    false,
            listeners:{},
        },{
            fieldLabel: 'Password',
            inputType: 'password',
            name: 'edtPassword',
            id:    'edtPassword',
            anchor: '60%',  // anchor width by percentage
            blankText: 'Invalid password',            
            selectOnFocus: true,            
            allowBlank: false,
            validateOnBlur:    false,
        }],
        buttons: [{
            text: 'Login',
            type: 'submit',        
            name: 'btnLogin',
            id    :    'btnLogin',
            handler: function(){
                if(frmLogin.form.isValid()){
                        frmLogin.form.submit({
                            url        : "functions/phpfunctions.php",
                            params    :    {action    :    "checkLogin"},
                            method    :    "POST",
                            success    :    function(frmLogin, result){                                
                                            Ext.MessageBox.alert("Server response ",result.result.success);
                                            var redirect = 'index2.php'; 
                                             document.location= result.result.url;                                            
                                        },
                            failure    :    function(frmLogin, result){
                                            Ext.MessageBox.alert("Server response ",result.result.error);
                                        },
                            waitMsg    :    "Sending Login Data..."
                        })
                    }else{
                        Ext.getCmp("edtUser").focus();    
                    }
            }
        },{
            text: 'Reset',
            handler: function(){
                    frmLogin.getForm().reset();
                    Ext.get("edtUser").focus();
            }
        }]
    });

    var window = new Ext.Window({
        title: 'Login to Server',
        width: 500,
        height:350,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        expandOnShow:true,
        collapsible: false,
//        closable: true,
        iconCls : 'headerImage',        
        items:     frmLogin
    });
    window.on('move',function(){Ext.getCmp("edtUser").focus(true,100);});
    window.show();    
    Ext.getCmp('edtUser').focus(true,100);
    //Add listener to text 
    Ext.getCmp("edtUser").getEl().addListener("keypress", function (event){
                var now = new Date().getTime();
                if (event.getKey() == Ext.EventObject.ENTER){
                    Ext.getCmp("edtPassword").focus();
                    return false;
                }
                else
                    return true;
      });    
    //Event for password
    Ext.getCmp("edtPassword").getEl().addListener("keypress", function (event){
                var now = new Date().getTime();
                if (event.getKey() == Ext.EventObject.ENTER){
                    Ext.getCmp("btnLogin").focus();
//                    Ext.getCmp("btnLogin").fireEvent("click",Ext.getCmp("btnLogin"));
                    Ext.getCmp("btnLogin").handler.call(Ext.getCmp("btnLogin").scope);
                    return false;
                }
                else
                    return true;
      });    
    
    //End Listener
}); 

I was wondering:
If i want to add a small <div> in that redbox(i drew the redbox using paint), so that - i can show the wait messages or error messages in that <div>, rather than a dialog box which Ext provides by default. I know how to add another text box into the form, but am not sure how to add a <div> tag at or any other element at a custom location. Any help is highly appreciated

Thanks

[Condor]

Use:

var win = new Ext.Window({
  ...
  listeners: {
    render: function(c) {
      c.messageEl = c.footer.createChild({tag: 'div'});
    }
  },
  setMessage: function(msg) {
    this.messageEl.update(msg);
  }
});

(you'll have to play with the createChild parameters to put the div in the correct place and with the correct markup)