1. #1
    Ext User
    Join Date
    Mar 2009
    Posts
    39
    Vote Rating
    0
    kcireneg is on a distinguished road

      0  

    Default how to put a background image or change the background color of a login form?

    how to put a background image or change the background color of a login form?


    how to put a background image or change the background color of a login form?
    pls. help. thanx.
    still newbie here, pls help.

  2. #2
    Sencha User dlbjr's Avatar
    Join Date
    Oct 2007
    Location
    Cache, OK USA
    Posts
    281
    Vote Rating
    3
    dlbjr is on a distinguished road

      0  

    Default My basic Login Form

    My basic Login Form


    My basic Login Form

    The line: bodyStyle: 'padding:5px;background-image:url(graphic/graph.jpg);' does what you are asking.

    Code:
    function openLogonWindow() {
     var txt_User = new Ext.form.TextField({
          name: 'Username',
          fieldLabel: 'User name',
          width: 175,
          allowBlank: false
     });
     
     var txt_Password = new Ext.form.TextField({
          name: 'Password',
          fieldLabel: 'Password',
          inputType: 'password',
          width: 175,
          allowBlank: false
     });
     
     var btn_Logon = new Ext.Button({
          text: 'Logon',
          handler: function() {
               form.getForm().submit({
                    waitMsg: 'Validating credentials...',
                    success: function() {
                         //Do What Ever
                    },
                    failure: function() {
                         //Do What Ever
                    }
               });
             }
     });
     
     var btn_Cancel = new Ext.Button({
          text: 'Cancel',
          disabled: false,
          handler: function() {
          window.close();
     });
     
     var form = new Ext.form.FormPanel({
          baseCls: 'x-plain',
          labelWidth: 300,
          labelAlign: 'top',
          title: 'Enter your Credentials',
          items: [txt_User, txt_Password],
          buttons: [btn_Logon, btn_Cancel],
          keys: [{ key: [10, 13], fn: function() {
               btn_Logon.focus();
               btn_Logon.fireEvent("click", btn_Logon);}
          }]
     });
     
     var window = new Ext.Window({
          width: 200,
          height: 190,
          layout: 'fit',
          plain: false,
          resizable: false,
          modal: true,
          draggable: false,
          closable: true,
          bodyStyle: 'padding:5px;background-image:url(graphic/graph.jpg);',
          items: form
     });
     
     window.on('show', function() { txt_User.focus(); }, null, { delay: 1000 });
     window.show();
    }
    dlbjr - David L. Bryant Jr.

    Owner of
    dlbjr Technology Consulting
    Web2 System Developer & Consultant
    Focused on C.I. - Six Sigma - Shingo - Lean Technologies
    dlbjr.consulting@gmail.com

    Owner of:
    Attractive Graphics - "custom screen printing"
    attractivegraphicscsp@gmail.com

  3. #3
    Ext User
    Join Date
    Mar 2009
    Posts
    39
    Vote Rating
    0
    kcireneg is on a distinguished road

      0  

    Default


    Sir how about changing the background color of a formpanel???

Thread Participants: 1