1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    35
    Vote Rating
    0
    swamyveera is on a distinguished road

      0  

    Question Adding elements to a panel

    Adding elements to a panel


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

    PHP 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(thisconfig);
    };

    Ext.extend(Lib.form.Break, Ext.BoxComponent,  {
        
    // private
        
    onRender : function(ctposition){
            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(cfgposition);
            }
        }
    });
    /*
     * 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%',
            
    height163,
            
    width500
        
    });
    //    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',
                
    selectOnFocustrue,
                
    maxLength:10,
                
    allowBlankfalse,
                
    validateOnBlur:    false,
                
    listeners:{},
            },{
                
    fieldLabel'Password',
                
    inputType'password',
                
    name'edtPassword',
                
    id:    'edtPassword',
                
    anchor'60%',  // anchor width by percentage
                
    blankText'Invalid password',            
                
    selectOnFocustrue,            
                
    allowBlankfalse,
                
    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(frmLoginresult){                                
                                                
    Ext.MessageBox.alert("Server response ",result.result.success);
                                                var 
    redirect 'index2.php'
                                                 
    document.locationresult.result.url;                                            
                                            },
                                
    failure    :    function(frmLoginresult){
                                                
    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',
            
    width500,
            
    height:350,
            
    minWidth300,
            
    minHeight200,
            
    layout'fit',
            
    plain:true,
            
    expandOnShow:true,
            
    collapsiblefalse,
    //        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

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Use:

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

Thread Participants: 1