Jx.Field Combos implementations

Jx.Field.ComboBox.js

/*
---

name: Jx.Field.ComboBox

description: A Jx.Field.ComboBox: is a Combo that show a Jx.ListView
items from a supplied store to select for the combo.
                        Supports pagination based on the class Jx.Toolbar.Paging a modified
from an example found on googlecode jxlib wiki.

license: MIT-style license.

provides: [Jx.Field.ComboBox]

...
 */
// $Id$
/**
 * Class: Jx.Field.ComboBox
 *
 * A Jx.Field.ComboBox: is a Combo that show a Jx.ListView items from
a supplied store to select for the combo.
 * Supports pagination based on the class Jx.Toolbar.Paging a modified
from an example found on googlecode jxlib wiki.
 *
 * Example:
 * (code)
 *      new Jx.Field.ComboBox({
 *              label:'ComboBox',
 *              name:'ComboBox',
 *              displayField: 'nombre',
 *              valueField: 'id',
 *              store: store
 *      }),
 * (end)
 *
 * Extends:
 * <Jx.Field>
 *
 * Author: Ing. Axel Mendoza Pupo.
 *
 * License:
 * Copyright (c) 2011, Ing. Axel Mendoza Pupo.
 *
 * This file is licensed under an MIT style license
 */

        Jx.Field.ComboBox = new Class({
            Family: 'Jx.Field.Combo',
            Extends: Jx.Field,
            pluginNamespace: 'Combo',

            options: {
                buttonTemplate: '<a class="jxButtonContainer jxButton"
href="javascript:void(0);"><img class="jxButtonIcon"
src="'+Jx.aPixel.src+'"></a>',
                /* Option: template
                 */
                template: '<span class="jxInputContainer"><label
class="jxInputLabel"></label><span class="jxInputWrapper"><input
type="text" class="jxInputText"  name="{name}"><span
class="jxInputRevealer"></span></span><span class="jxInputTag"></
span></span>',

                itemTemplate: '',

                store: null,
                        displayField: null,
                        valueField: 'id',
                        hiddenValue: null,
                        onChange: function(field){
                                var index =
this.options.store.findByColumn(this.options.displayField,
field.field.value);
                                var record = this.options.store.getRecord(index);
                                this.hiddenValue = record.data[this.options.valueField];
                        }
             },

             type: 'Text',

            /**
             * APIMethod: render
             * create a new instance of Jx.Field.Combo
             */
            init: function () {
                this.hiddenValue = this.options.hiddenValue;
                this.options.itemTemplate = '{'+this.options.displayField
+'}';
                        this.parent();
        },
        getValue: function(){
                        if(this.hiddenValue == null)
                                return this.field.value;
                        return this.hiddenValue;
                },
            render: function() {
                this.classes.combine({
                  wrapper: 'jxInputWrapper',
                  revealer: 'jxInputRevealer',
                  icon: 'jxInputIcon'
                });
                this.parent();

                this.listView = new Jx.ListView();

                var button = new Jx.Button.Flyout({
                    template: this.options.buttonTemplate,
                    imageClass: 'jxInputRevealerIcon',
                    positionElement: this.field,
                    content: new Jx.Panel({
                        width: 260,
                        height: 240,
                        collapse: false,
                        hideTitle: true,
                        content: this.listView,
                        toolbars: [
                                                new Jx.Toolbar.Paging({
                                                        store: this.options.store,
                                                        position: 'bottom'
                                                })
                        ]
                    })

                }).addTo(this.revealer);

                var that = this;
                this.options.store.addEvent('storeDataLoaded', function () {
                        that.listView.list.empty();
                        that.options.store.first();
                        var linkTempl = "<li class='jxListItemContainer'><a
class='jxListItem' href='javascript:void(0);'></a></li>";
                that.options.store.each(function(record){
                                var columnsNeeded =
that.options.store.parseTemplate(that.options.itemTemplate);
                        var valueTemplate =
that.options.store.fillTemplate(record, that.options.itemTemplate,
columnsNeeded);

                        var itemList = new Jx.ListItem({template: linkTempl,
content: valueTemplate});
                        $(itemList).addEvent('click', function(){
                        button.hide();
                        that.setValue(valueTemplate);
                    });

                        that.listView.add(
                                itemList
                        );
                        }.bind(this));
                        }); 

Jx.Field.TreeCombo.js

/*
---

name: Jx.Field.TreeCombo

description: A Jx.Field.TreeCombo: is a Combo that show a Jx.Tree to
select any Jx.TreeFolder or Jx.TreeItem for the Combo field

license: MIT-style license.

requires:
 - Jx.TreeItem
 - Jx.Tree

provides: [Jx.Field.TreeCombo]

...
 */
// $Id$
/**
 * Class: Jx.Field.TreeCombo
 *
 * A Jx.Field.TreeCombo: is a Combo that show a Jx.Tree to select any
Jx.TreeFolder or Jx.TreeItem for the Combo field.
 * Items of the tree are populated from an Ajax Request to the
supplied url option.
 *
 * Example:
 * (code)
 *      new Jx.Field.TreeCombo({
 *              url: '../common/menu.htm',
 *              label:'ComboBox',
 *              name:'ComboBox'
 *      })
 * (end)
 *
 * Extends:
 * <Jx.Field>
 *
 * Author: Ing. Axel Mendoza Pupo.
 *
 * License:
 * Copyright (c) 2011, Ing. Axel Mendoza Pupo.
 *
 * This file is licensed under an MIT style license
 */

        Jx.Field.TreeCombo = new Class({
            Family: 'Jx.Field.Combo',
            Extends: Jx.Field,
            pluginNamespace: 'Combo',

            options: {
                buttonTemplate: '<a class="jxButtonContainer jxButton"
href="javascript:void(0);"><img class="jxButtonIcon"
src="'+Jx.aPixel.src+'"></a>',
                /* Option: template
                 */
                template: '<span class="jxInputContainer"><label
class="jxInputLabel"></label><span class="jxInputWrapper"><input
type="text" class="jxInputText"  name="{name}"><span
class="jxInputRevealer"></span></span><span class="jxInputTag"></
span></span>',

                hiddenValue: null
            },

            type: 'Text',

            makeTreeItem: function(node, tree, sender) {
                        if(node.children != undefined){
                        var folder = new Jx.TreeFolder({
                                label: node.text,
                            image: node.icon,
                                open: false,
                                onClick: function() {
                                        sender.button.hide();
                            sender.setValue(node.text);
                            }
                        });

                        for (var j = 0; j < node.children.length; j++) {
                            this.makeTreeItem(node.children[j], folder, sender);
                        }
                        tree.add(folder);
                }else {
                        var item = new Jx.TreeItem({
                                label: node.text,
                            //contentURL : node.url,
                            image: node.icon,
                            active : false,
                            onClick: function() {
                                        sender.button.hide();
                            sender.setValue(node.text);
                            }
                        });

                        tree.add(item);
                        }
            },

            /**
             * APIMethod: render
             * create a new instance of Jx.Field.Combo
             */

            render: function() {
                this.classes.combine({
                  wrapper: 'jxInputWrapper',
                  revealer: 'jxInputRevealer',
                  icon: 'jxInputIcon'
                });
                this.parent();

                this.treeView = new Jx.Tree();

                this.button = new Jx.Button.Flyout({
                    template: this.options.buttonTemplate,
                    imageClass: 'jxInputRevealerIcon',
                    positionElement: this.field,
                    content: new Jx.Panel({
                        width: 260,
                        height: 240,
                        collapse: false,
                        hideTitle: true,
                        content: this.treeView
                    })
                }).addTo(this.revealer);

                var that = this;

                new Request({
                    url: this.options.url,
                    method: 'get',
                    onSuccess: function(responseText){
                                        var items = JSON.decode(responseText);
                                        for (var j = 0; j < items.length; j++) {
                                            that.makeTreeItem(items[j], that.treeView, that);
                                        }
                                }
                }).send();

                this.button.addEvent('click', function(e) {

                    if (!button.options.enabled) {
                        return;
                    }
                    this.contentContainer.setStyle('visibility','hidden');
                    this.contentContainer.setStyle('display','block');
                    document.id(document.body).adopt(this.contentContainer);
                    /* we have to size the container for IE to render the
chrome correctly
                     * but just in the menu/sub menu case - there is some
horrible peekaboo
                     * bug in IE related to ULs that we just couldn't figure
out
                     */

this.contentContainer.setContentBoxSize(this.subDomObj.getMarginBoxSize());

                    this.showChrome(this.contentContainer);

                    this.position(this.contentContainer, that.field, {
                        horizontal: ['left left', 'right right'],
                        vertical: ['bottom top', 'top bottom'],
                        offsets: this.chromeOffsets
                    });

                    this.contentContainer.setStyle('visibility','');

                    document.addEvent('mousedown', this.bound.hide);
                    document.addEvent('keyup', this.bound.keypress);

                    //this.fireEvent('show', this);

                }.bind(this));
            },

            setValue: function(value) {
                this.field.set('value', value);
            },
            /**
             * APIMethod: empty
             * remove all values from the combo
             */
            empty: function() {
              this.setLabel('');
              this.treeView.list.empty();
            }
        });