Thursday, October 30, 2008

A jQuery Container Class

Further to my previous post I have created a container class called JX.Container. The container lays out components vertically just like you would if you append. However it has a few extra features.
In the config options it has a 'items' config which is an array of components or component configs.
You can set 'fitWidth' to each component and the component expand to the width of the container. You have to also call doLayout() on the container, this is required because of 'fitWidth'.
We will use the container class to create a login box. Here is the code.
$(document).ready(function() {
    var loginbox = new JX.Container({
        width: 200,
        css:{
            background: 'lightcyan',
            border: '1px solid darkblue',
            padding: '20px',
            fontSize: '12px',
            fontFamily: 'Arial, Helvetica',
            fontWeight: 'bold',
            color: 'darkblue'
        },
        appendTo: document.body,
        items: [{
            text: 'Enter your User Name'
        },{
            jxtype: 'input',
            attr: {type: 'text'},
            fitWidth: true
        },{
            text: 'Enter your Password'
        },{
            jxtype: 'input',
            attr: {type: 'password'},
            fitWidth: true
        },{
            jxtype: 'input',
            attr: {type: 'button', value: 'Login'}
        }]
    });
    loginbox.doLayout();
});                               

2 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete