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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

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