1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    6
    Vote Rating
    0
    pkngan is on a distinguished road

      0  

    Default Absolute FORM layout helper

    Absolute FORM layout helper


    ExtJS form layout positioning is very hard to me, I was created a helper to calculate absolute position of controls.

    My helper create an Array that contains config propeties. Below is code to use with the helper:

    Code:
        var controls = new MBSMCenter.FormBuilder('10 10 10 10', 26, 'abs-label-right-120', 120);
        controls.Label('Email').Space().TextBox('Email', 250).Break();
        controls.Label('Full Name').Space().TextBox('U_Name', 250).Break();
        controls.Label('Aliases').Space().TextBox('U_Alias');
        controls.Label('Password').Space().TextBox('Password1', 150).mod({ inputType: 'password' });
        controls.Label('Confirm Password').Space().TextBox('Password2').mod({ inputType: 'password' });
        controls.Label('Remote Addresses').Space().CheckBox('U_UseRemoteAddress').Space(5).TextBox('UseRemoteAddress');
        controls.Label('Forward Addresses').Space().TextBox('U_ForwardTo');
        controls.Label('Archive Incoming').Space().TextBox('U_MailIn');
        controls.Label('Archive Outgoing').Space().TextBox('U_MailOut');
    
        controls.Label('Status').Space().add({
            xtype: 'radiogroup', columns: [100, 140, 1], items: 
                [
                    { name: 'rdStatus', boxLabel: 'Enabled', checked: true },
                    { name: 'rdStatus', boxLabel: 'Disable Login' },
                    { name: 'rdStatus', boxLabel: 'Disable Login and Receive' }
                ]
        });
    than, put controls.items to a form:

    Code:
    var form = new Ext.form.FormPanel({
         ...........
         items: controls.items
    });
    Result? See the attachment image.

    Code:
    // padding: form paddings, 'top right bottom left', ex: '5 5 5 5'
    // lineHeight: default line height
    // labelCls: default css for label
    // labelWidth: default labelWidth
    MBSMCenter.FormBuilder = function(paddings, lineHeight, labelCls, labelWidth) {
        var ps = (paddings ? paddings : '0 0 0 0').split(' ');
        this.paddings = {    top: parseInt(ps[0]), 
                            right: parseInt(ps[1]),
                            bottom: parseInt(ps[2]), 
                            left: parseInt(ps[3]),
                            width: parseInt(ps[1]) + parseInt(ps[3]) };
        this.items = [];
        this.curY = this.paddings.top;
        this.curX = this.paddings.left;
        this.labelCls = labelCls;
        this.labelWidth = (labelWidth ? labelWidth : 100);
        this.spaceWidth = 10;
        this.lineHeight = lineHeight;
        this.recent = null;
        
        this.Break = function() {
            this.curX = this.paddings.left;
            this.curY = this.curY + this.lineHeight;
            return this;
        }
            
        this.add = function(config) {
            var c = new Object();
            c.x = this.curX;
            c.y = this.curY;
            Ext.apply(c, config);
            this.items.push(c);
            this.recent = c;
            return c;
        }
        
        this.mod = function(config) {
            Ext.apply(this.recent, config);
            return this;
        }
    
        this.Label = function(text, width) {
            var c = this.add({ text: text, xtype: 'label' });
            if (this.labelCls) c.cls = labelCls;
            if (this.width) {
                this.curX += width;
                c.width = width;
            } else {
                this.curX += this.labelWidth;
            }
            return this;
        }
        
        this.Space = function(width) {
            if (width) {
                this.curX += width; 
            } else {
                this.curX += this.spaceWidth;
            }
            return this;
        }
        
        this.TextBox = function(inputName, width) {
            var c = this.add({ name: inputName, xtype: 'textfield' });
            if (!width) {
                // full line control --> next control is newline
                c.anchor = '-' + this.paddings.width;
                this.Break();
            } else {
                c.width = width;
                this.curX += width;
            }
            return this;
        }
        
        this.CheckBox = function(inputName) {
            var c = this.add({ name: inputName, xtype: 'checkbox' });
            this.curX += 13;
            return this;
        }
    }
    Attached Images

  2. #2
    Ext User
    Join Date
    Mar 2008
    Posts
    3
    Vote Rating
    0
    lkocok is on a distinguished road

      0  

    Default


    Very good!!

  3. #3
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    164
    Vote Rating
    2
    walldorff is on a distinguished road

      0  

    Default


    Man, this look great! I also often struggle with form layout. With your helper it seems to be a piece of cake. Thank you very much!
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

  4. #4
    Sencha User
    Join Date
    May 2007
    Location
    Germany
    Posts
    18
    Vote Rating
    0
    ralf is on a distinguished road

      0  

    Question


    Hi,
    I just tried it (thx for sharing) but I can't get it to behave like your image for some reason.
    I use the test code you provided:
    Code:
       var form = new Ext.form.FormPanel({
       frame:true,
            title: 'Absolute Form',
            width: 550,
            height: 300,		    
    	layout: 'absolute',
            defaults: {labelSeparator:'', hideLabel:false},
         items: controls.items
    	});
        form.render(document.body);
    but get some misalignments as shown on the attached image (FF3, IE7, Ext 2.2).
    Edit: The parameters "height" and "layout" had to be added to make it work!

    Any idea?
    Attached Images
    Last edited by ralf; 19 Jan 2009 at 2:52 PM. Reason: Found the reason for misalignment

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    6
    Vote Rating
    0
    pkngan is on a distinguished road

      0  

    Default


    May be missing of css class:

    Code:
    .abs-label-right-120
    {
        font-size: 12px;
        text-align: right;
        width: 120px;
        line-height: 20px;
    }
    My real code as below:

    Code:
    var tabs = new Ext.TabPanel({
            margins   : '3 3 3 0', 
            activeTab : 0,
            deferredRender: false,
            border: false,
            defaults: {
                layout: 'absolute',
                defaultType: 'textfield',
                hideMode: 'offsets'
            },
            items     : [{
                title: 'Account',
                items: c1.items
             },{ 
                title    : 'Options',
                items: c2.items
            }]
        });
    
        var form = new Ext.form.FormPanel({
            border: false,
            layout: 'fit',
            plain: true,
            items: tabs
        });

  6. #6
    Ext User
    Join Date
    Sep 2008
    Posts
    41
    Vote Rating
    0
    xevin is on a distinguished road

      0  

    Default


    Brilliant!!

  7. #7
    Ext User
    Join Date
    Dec 2008
    Location
    Cochin,INDIA
    Posts
    15
    Vote Rating
    0
    dHANEESH is on a distinguished road

      0  

    Question MBSMCenter is not defined

    MBSMCenter is not defined


    Hi All,

    i just tried the application.but it shows an error MBSMCenter is not defined in Firebug console.Is any more files need to include? please help.

    Thanks in advance

  8. #8
    Sencha User
    Join Date
    May 2007
    Location
    Germany
    Posts
    18
    Vote Rating
    0
    ralf is on a distinguished road

      0  

    Default


    you probably already found it by yourself:

    just use Ext.ns('MBSMCenter') or change the name to the (already defined) namespace you prefer for extensions

  9. #9
    Ext User
    Join Date
    Dec 2008
    Location
    Cochin,INDIA
    Posts
    15
    Vote Rating
    0
    dHANEESH is on a distinguished road

      0  

    Default


    Hi ralf,

    Thanks for your reply.It works.

  10. #10
    Ext User
    Join Date
    Dec 2008
    Posts
    1
    Vote Rating
    0
    garden_p is on a distinguished road

      0  

    Default


    Hi, Sir, It's seem a great function.

    but when i tried it , i got a error as " null is empty or is not a object".

    what is wrong ?