Marcus Schiesser

How to detect whether an element is in a scrollable parent

Marcus Schiesser — Mon, 02 Nov 2009 20:54:28 +0000

Just think of having an element in a scrollable parent (the CSS property overflow is set to scroll) and you want to test whether the element is visible or not.

Using this little function you can do the trick:

function isInView(node){
            var offsetParent = node.offsetParent;
            var top = offsetParent.scrollTop;
            var height = offsetParent.offsetHeight;
            var y = node.offsetTop;
            return y >= top && y <= (top + height);
}

And here’s a small use case – this one scrolls the element into the visible region, if it is not already in the view:

if(!isInView(element)) {
            element.scrollIntoView();
}

Let the user select an item in a modal dialog

Marcus Schiesser — Wed, 05 Aug 2009 13:31:29 +0000

After having used the shiny new YUI3 library for a project, it’s about time to share my YUI3 experiences with you.
For the project I built an item selector: A modal dialog is openend and the user has to select an item. After selection the dialog is closed and the selected item is passed to a callback function.

Here you can find the full source for the item selector. An example to use the selector can be as simple as this:

ms.ItemSelector.selectItem(['Bart', 'Lisa', 'Homer', 'Marge', 'Maggie', 'Ned', 'Barney', 'Bob'], function(item){
  alert(item + ' is your favorite character.');
});

Just click on the following button, to start the example. Enjoy and let me know your comments.

Quince: UX Pattern Explorer

Marcus Schiesser — Sat, 13 Jun 2009 20:14:17 +0000

Just in case you don’t already know it: Quince – calls itself an UX Patterns Explorer and that’s just what it is.

You want to improve the user experience of your applications? Just take a look at this marble. It contains a large number of design patterns for creating great user interfaces.

Even the exploration part of this tool is innovative: The patterns are not only ordered alphabetically by name but can be found by the tasks the user wants to accomplish.

Add a delete button in each row of an ExtJS data grid

Marcus Schiesser — Sat, 13 Jun 2009 19:53:56 +0000

For usability reasons it is usually a good idea to add a delete button to each row of a data grid. If the user clicks on such a button, the whole row that contained the button will be deleted.
The following example shows what I mean:

The data grid of ExtJS does not contain such a feature by default, but it could be implemented by adding a special column to the column model. Using this extension, it could be easily done like this:

var itemDeleter = new Extensive.grid.ItemDeleter();
 
var grid = new Ext.grid.GridPanel({
        store: people,
        cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
            header: 'First name',
            width: 100,
            dataIndex: 'firstName'
        }, {
            header: 'Last name',
            width: 150,
            dataIndex: 'lastName'
        }, itemDeleter]),
        selModel: itemDeleter,
        autoHeight: true
});

Note that the itemDeleter instance must be added to the ColumnModel and set as selModel to work properly.

Learn how to build a web application with ExtJS

Marcus Schiesser — Sat, 13 Jun 2009 18:28:09 +0000

If you’re interested in learning ExtJS and by accident know some German, I can recommend you read an article I wrote together with my colleague Stefan Botzenhart. The article is called ‘Kombiniert: Ruby on Rails und Ext JS‘ and is published in the famous German IT magazine iX in their actual special edition called Web on Rails.

In the article we explain the implementation of meinkabinett, a web application where people can vote celebrities for the European government. The implementation uses a rich front-end written in ExtJS and is driven by a Ruby on Rails back-end.

Display an info text in a HTML input field if its focus is lost

Marcus Schiesser — Fri, 12 Jun 2009 09:18:02 +0000

Now that with Ext Core a light-weight version (just 25kB) of ExtJS has been released, I thought it’s time to build a nice example with it.

The result is something very useful that you can see in actually a lot of web sites: Display a info text inside of a input text field if it is empty and does not have the focus.

Here’s how it looks like:

E-Mail:

To add this behaviour to a input field you just have to call this single line:

Extensive.behaviours.setInfoText(inputElement, 'Your email like max@mustermann.de');

As always you can find the code for this component in a library called ‘extensive‘. Feel free to support the project by participating.

Mark Required Fields in a ExtJS Form

Marcus Schiesser — Mon, 04 May 2009 12:12:48 +0000

I just had the requirement to mark required fields in a ExtJS form. I started with the code from Jason (Thanks!) and extended it a bit.
Now you may customize how the field marker would look like by assigning a CSS class to a requiredFieldCls property. I also added a descriptive tooltip for the marker – just take a look to the example below:

Here’s the code that produces the example:

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'under';
    Extensive.components.RequiredFieldInfo.prototype.requiredFieldText = 'These are really important things';
 
    var panel = new Ext.FormPanel({
        frame: true,
        labelWidth: 130,
        width: 350,
 
        items: [{
            xtype: 'textfield',
            fieldLabel: 'This you might tell me',
            anchor: '100%'
        }, {
            xtype: 'textfield',
            fieldLabel: 'This I have to know',
            allowBlank: false,
            anchor: '100%',
            blankText: 'As said, I have to know this!'
        }, {
            xtype: 'reqFieldInfo'
        }]
    });
    var element = Ext.query('script[src$=required-field.js]')[0];
    var renderElement = element.parentNode;
    panel.render(renderElement);
});

Dont’ forget to also include these necessary modifications to Ext.layout.FormLayout:

Ext.ns('Extensive.components');
 
Ext.apply(Ext.layout.FormLayout.prototype, {
    originalRenderItem: Ext.layout.FormLayout.prototype.renderItem,
    renderItem: function(c, position, target){
        if (c && !c.rendered && c.isFormField && c.fieldLabel && !c.allowBlank) {
            c.fieldLabel = c.fieldLabel + "  +
            ((c.requiredFieldCls !== undefined) ? 'class="' + c.requiredFieldCls + '"' : 'style="color:red;"') +
            " ext:qtip=\"" +
            ((c.blankText !== undefined) ? c.blankText : "This field is required") +
            "\">*";
        }
        this.originalRenderItem.apply(this, arguments);
    }
});
 
Extensive.components.RequiredFieldInfo = Ext.extend(Ext.form.Label, {
    constructor: function(config){
        Extensive.components.RequiredFieldInfo.superclass.constructor.call(this, Ext.apply({
            html: " +
            ((this.requiredFieldCls !== undefined) ? 'class="' + this.requiredFieldCls + '"' : 'style="color:red;"') +
            '>* ' +
            ((this.requiredFieldText !== undefined) ? this.requiredFieldText : 'Required field')
        }, config));
    }
});
Ext.reg('reqFieldInfo', Extensive.components.RequiredFieldInfo);

From know on you can find this code and all my other ExTJS components bundled in a library called ‘extensive’ – hosted at Google Code. Feel free to support the project by participating.

Phone number selector in ExtJS

Marcus Schiesser — Wed, 08 Apr 2009 17:10:42 +0000

Wouldn’t it be nice to use a combo box of flag images to select the country code of phone numbers?

If you use a country selection component that’s quite easy. Just wrap it in a re-usable component together with a textfield for the local number and the result looks like this:

And here’s the example’s source:

Ext.onReady(function(){
    var panel = new Ext.FormPanel({
        style: 'padding: 10px;',
        frame: true,
        labelWidth: 50,
        width: 400,
 
        items: [{
            fieldLabel: 'Mobile',
            xtype: 'phonefield',
            anchor: '100%',
            emptyText: '(e.g.: 423-423-423)',
            defaultCountryCode: '49',
            maskRe: /[0-9 -]/
        }]
    });
    var element = Ext.query('script[src$=phonefield.js]')[0];
    var renderElement = element.parentNode;
    panel.render(renderElement);
});

Update: You can find this code and all my other ExtJS components bundled in a library called ‘extensive’. Enjoy the code and feel free to support the project by participating.

Component for selecting multiple items in Ext

Marcus Schiesser — Wed, 08 Apr 2009 16:52:08 +0000

Ext already provides a component to select multiple items. The thing I do not like about it is that it covers too much space on the screen.
Therefore I thought of a component that initially looks like a combo box and then opens a new window to let the user select the items.

As a nice example tells more than thousand words – here it is:

As you can see, it is actually based on the component provided by the Ext examples.

And here’s the source code for the example:

Ext.onReady(function(){
    var model = new Ext.data.SimpleStore({
        fields: ['label', 'value'],
        data: [['Homer', 1], ['Marge', 2], ['Maggie', 3], ['Bart', 4], ['Lisa', 4]]
    });
    var panel = new Ext.FormPanel({
        frame: true,
        labelWidth: 50,
        width: 300,
 
        items: [{
            fieldLabel: 'I like',
            xtype: 'singleLineMultiSelect',
            store: model,
            anchor: '90%',
            mode: 'local',
            displayField: 'label',
            fromLegend: 'available',
            toLegend: 'selected',
            valueField: 'value',
            deleteText: 'delete',
            emptyText: 'Which Simpsons do you like?'
        }]
    });
    var element = Ext.query('script[src$=ext-multiselector.js]')[0];
    var renderElement = element.parentNode;
    panel.render(renderElement);
});

Altough the example binds an in-memory store, you can also use an external store. If so, please remove the mode property – similar to a combo box.

Update: You can find this code and all my other ExtJS components bundled in a library called ‘extensive’. Enjoy the code and feel free to support the project by participating.

Getting values from a form containing combos in Ext

Marcus Schiesser — Tue, 07 Apr 2009 15:54:45 +0000

Actually it is pretty easy to get the values of all fields of a form in Ext: You just have to call the getValues() method of the BasicForm.
The problem with that approach is that it just takes the values directly from the DOM and is not calling the getValue() for each field (Which I assumed). One consequence is that you don’t get the values of combo boxes, but their labels.
To get the real values, I just did the following:

Firstly, I retrieved an array of all fields of the form:

var fields = that.findBy(function(comp) {
	return comp.xtype != 'fieldset';
});

(In my case these were just all children that were no fieldsets. You might have to change the condition above to suit your needs.)

Then, I just iterated over all fields and added the name/value pair to a result object:

var result = {};
fields.forEach(function(field){
	var name = field.getName();
	var value = field.getValue();
	result[name] = value;
});

That’s it – now result contains the real values of all fields.