Results 1 to 5 of 5

Thread: How to center a FormPanel in your html page with css

  1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    2

    Default How to center a FormPanel in your html page with css

    Hi, I created an ExtJs FormPanel that renders (through the renderTo property of the FormPanel) in a css div named loginform.
    I try to specify the alignment in my css loginform div, but the FormPanel seems to ignore it.

    How can I center my ExtJS Form in my page?

    Thank you very much.

  2. #2

    Default

    hi..

    is there anycode?
    have you tried
    baseCls : String The base CSS class to apply to this panel's element (defaults to 'x-panel').

  3. #3

    Default

    formpanel use floating:true that will help and positioned it using x:
    y:


    have a very simple sample code just enchanced it

    Code:
    Ext.onReady(function(){
    Ext.QuickTips.init();
    
    
    var q = new Ext.form.TextField({
            fieldLabel: 'Query',
            name: 'q',
            anchor: '98%'
            });
    
    
    var nonfloat = new Ext.FormPanel({
                   frame: true,
                   labelAlign: 'right',
                   buttonAlign:'center',
                   labelWidth: 85,
                   bodyStyle:'padding:5px 5px 0',
                   height: 200,
                   width: 200,              
                   floating: true,
                   x:465,
                   y:134,
                   items:[
                         q
                         ]                     
                   });
    
    
    nonfloat.render('form');
    });

  4. #4

    Default

    hope that 1 can help you

  5. #5
    Ext User
    Join Date
    Mar 2008
    Posts
    2

    Default

    This topic seems interesting:
    http://extjs.com/forum/archive/index.php/t-21598.html

    I have to try it your advices, thank you!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •