1. #21
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    Very very nice extension, great job!
    A small suggestion: why don't you also insert in your TextField a trigger button (like a combo) that on click show the list of all the possibility so that you can also see the entire list of possibilty and chose from that list? For now the list appears only digiting I think, it seems useful to me!
    Anyway, keep up the great work!

  2. #22
    Sencha User
    Join Date
    Sep 2007
    Location
    Poland, Cracow
    Posts
    70
    Vote Rating
    0
    Evolic is on a distinguished road

      0  

    Lightbulb


    Quote Originally Posted by gelleneu View Post
    I have a question about this great extension.

    I use it inside a form, and I want to save the items in a database.

    When i submit my form, the items will be appended as post vars in this way:

    (field name = "boxselectfield", values are Id's of the items)

    boxselectfield=23&boxselectfield=25&boxselectfield=

    Reading this post vars in PHP with $_REQUEST['boxselectfield'] results only the last
    value, and this value is empty.

    Has someone experience with that?

    My next question: if an item is not in the list, i want to add it to the list automatically (a database operation is needed for that.)

    Is there are solution for that?

    Thanks!
    I found something working:
    Code:
        addBox: function(id, caption){
            var box = new Ext.ux.Box({
                id: 'Box_' + id,
                maininput: this.maininput,
                renderTo: this.holder,
                className: this.options['className'],
                caption: caption,
                'value': id,
                listeners: {
                    'remove': function(box){
                        this.selectedValues[box.value] = null;
                    },
                    scope: this
                }
            });
            box.render();
    
            if (this.hiddenName) {
                var name = this.hiddenName;
            } else {
                var name = this.name + '[' + id + ']';
            }
    
            box.hidden = this.el.insertSibling({
                'tag':'input',
                'type':'hidden',
                //'value': id,
                'name': name
            },'before', true);
    PHP $_POST:
    Code:
    Array
    (
        [states] => Array
            (
                [AL] => 
                [NY] => 
                [MN] => 
                [New obj 1] => 
                [New obj 2] => 
            )
        [subject] => 
        [msg] => 
    )

  3. #23
    Sencha User
    Join Date
    Sep 2007
    Location
    Poland, Cracow
    Posts
    70
    Vote Rating
    0
    Evolic is on a distinguished road

      0  

    Lightbulb Unique values support

    Unique values support


    I added support for adding unique values
    (probably not work to support repeated values)

    HTML Code:
    Ext.ux.Box = Ext.extend(Ext.Component, {
        initComponent : function(){
            Ext.ux.Box.superclass.initComponent.call(this);
        },
    
        onRender: function(ct, position){
            Ext.ux.Box.superclass.onRender.call(this, ct, this.maininput);
    
            this.addEvents('remove');
    
            this.addClass('bit-box');
    
            this.el = ct.createChild({ tag: "li" }, this.maininput);
            this.el.addClassOnOver('bit-hover');
    
            Ext.apply(this.el, {
    
                'focus': function(){
                    this.down('a.closebutton').focus();
                },
    
                'dispose': function(){
                    this.dispose()
                }.createDelegate(this)
    
            });
    
            this.el.on('click', function(e){
                this.focus()
            }, this, {stopEvent:true});
    
            this.el.update(this.caption);
    
            this.lnk = this.el.createChild({
                'tag': 'a',
                'class': 'closebutton',
                'href':'#'
            });
    
            this.lnk.on({
                'click': function(e){
                    e.stopEvent();
                    this.fireEvent('remove', this);
                    this.dispose();
                },
                'focus': function(){
                    this.el.addClass("bit-box-focus");
                },
                'blur': function(){
                    this.el.removeClass("bit-box-focus");
                },
                scope: this
            });
    
            new Ext.KeyMap(this.lnk, [
                {
                    key: [Ext.EventObject.BACKSPACE, Ext.EventObject.DELETE],
                    fn: function(){
                        this.dispose();
                    }.createDelegate(this)
                },
                {
                    key: Ext.EventObject.RIGHT,
                    fn: function(){
                        this.move('right');
                    }.createDelegate(this)
                },
                {
                    key: Ext.EventObject.LEFT,
                    fn: function(){
                        this.move('left');
                    }.createDelegate(this)
                },
                {
                    key: Ext.EventObject.TAB,
                    fn: function(){
                    }.createDelegate(this)
                }
            ]).stopEvent = true;
    
        },
    
        move: function(direction) {
            if(direction == 'left')
                el = this.el.prev();
            else
                el = this.el.next();
            if(el)
                el.focus();
        },
    
        dispose: function() {
            //if(el.prev() && this.retrieveData(el.prev(), 'small') ) el.prev().remove();
            //if(this.current == el) this.focus(el.next());
            //if(el.data['type'] == 'box') el.onBoxDispose(this);
    
            Ext.fly(this.hidden).remove();
            this.el.hide({
                duration: .1,
                callback: function(){
                    this.move('right');
                    this.destroy()
                }.createDelegate(this)
            });
    
    
            return this;
        }
    });
    
    Ext.ux.BoxSelect = Ext.extend(Ext.form.ComboBox, {
    
        /**
         * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
         * when editable = true (defaults to false)
         */
        addUniqueValues: true,
    
        initComponent:function() {
            Ext.apply(this, {
                selectedValues: {},
                //boxElements: {},
                current: false,
                options: {
                    className: 'bit',
                    separator: ','
                },
                hideTrigger: true,
                grow: false
            });
    
            Ext.ux.BoxSelect.superclass.initComponent.call(this);
        },
    
        // private
        onEnable: function(){
            Ext.ux.BoxSelect.superclass.onEnable.apply(this, arguments);
    
        },
    
        // private
        onDisable: function(){
            Ext.ux.BoxSelect.superclass.onDisable.apply(this, arguments);
    
        },
    
        onRender:function(ct, position) {
            Ext.ux.BoxSelect.superclass.onRender.call(this, ct, position);
    
            this.el.removeClass('x-form-text');
            this.el.className = 'maininput';
            this.el.dom.name = '';
            this.el.setWidth(20);
            this.el.dom.value = ''
    
    
            this.holder = this.el.wrap({
                'tag': 'ul',
                'class':'holder x-form-text'
            });
    
            if(!Ext.isIE) {
                this.holder.dom.style.overflow='hidden';
            }
    
            this.holder.on('click', function(e){
                e.stopEvent();
                if(this.maininput != this.current) this.focus(this.maininput);
            }, this);
    
            this.maininput = this.el.wrap({
                'tag': 'li', 'class':'bit-input'
            });
    
            Ext.apply(this.maininput, {
                'focus': function(){
                    this.focus();
                }.createDelegate(this)
            });
    
            if(typeof this.displayFieldTpl  === 'string')
                this.displayFieldTpl = new Ext.XTemplate(this.displayFieldTpl)
    
            if(typeof this.value !== 'undefined'){
                if(typeof this.value === 'string')
                    this.value = [this.value];
    
                Ext.each(this.value, function(item){
                    if (this.displayFieldTpl) {
                        caption = this.displayFieldTpl.apply(item);
                    } else {
                        caption = item[this.displayField];
                    }
    
                    if (!this.checkValue(caption)) {
                        this.addBox(item[this.valueField], caption);
                    }
                }, this);
            }
        },
    
        onResize : function( w, h, rw, rh ){
            this._width = w;
            Ext.ux.BoxSelect.superclass.onResize.call(this, w, h, rw, rh);
            this.autoSize();
        },
    
        onKeyUp: function(e)
        {
            if(e.getKey() == e.ENTER)
            {
                var value = this.el.dom.value;
                if(value.length > 0)
                {
                    if (!this.checkValue(value)) {
                        this.addBox(value, value);
                    } else {
                        Ext.Msg.alert('Message', 'Item is already on the list');
                    }
    
                    this.el.dom.value = '';
    
                }
            } else {
                if (this.editable !== false && !e.isSpecialKey())
                {
                    this.lastKey = e.getKey();
                    if (e.getKey() == e.BACKSPACE && this.el.dom.value.length == 0)
                    {
                        e.stopEvent();
                        this.collapse();
                        var el = this.maininput.prev();
                        if (el)
                            el.focus();
                        return;
                    }
                    this.dqTask.delay(this.queryDelay);
                }
    
                this.autoSize();
    
                Ext.ux.BoxSelect.superclass.onKeyUp.call(this, e);
            }
        },
    
        onSelect: function(record, index) {
            var val = record.data[this.valueField];
    
            //this.selectedValues[val] = val;
    
            if(typeof this.displayFieldTpl  === 'string')
                this.displayFieldTpl = new Ext.XTemplate(this.displayFieldTpl)
    
    
            var caption;
            if(this.displayFieldTpl)
                caption = this.displayFieldTpl.apply(record.data)
            else if(this.displayField)
                caption = record.data[this.displayField];
    
            if (!this.checkValue(caption)) {
                this.addBox(record.data[this.valueField], caption);
            } else {
                Ext.Msg.alert('Message', 'Item is already on the list');
            }
    
            this.collapse();
            this.setRawValue('');
            this.lastSelectionText = '';
            this.applyEmptyText();
    
            this.autoSize();
        },
    
        checkValue: function (caption) {
            if (console) console.log(this.selectedValues);
            if (this.addUniqueValues) {
                return typeof this.selectedValues[caption] != 'undefined';
            } else {
                return true;
            }
        },
    
        addBox: function(id, caption){
            var box = new Ext.ux.Box({
                id: 'Box_' + id,
                maininput: this.maininput,
                renderTo: this.holder,
                className: this.options['className'],
                caption: caption,
                'value': id,
                listeners: {
                    'remove': function(box){
                        this.selectedValues[box.caption] = null;
                    },
                    scope: this
                }
            });
            box.render();
    
            if (this.hiddenName) {
                var name = this.hiddenName;
            } else {
                var name = this.name + '[' + id + ']';
            }
    
            box.hidden = this.el.insertSibling({
                'tag':'input',
                'type':'hidden',
                //'value': id,
                'name': name
            },'before', true);
    
            this.selectedValues[caption] = id;
      },
      autoSize : function(){
          if(!this.rendered){
              return;
          }
          if(!this.metrics){
              this.metrics = Ext.util.TextMetrics.createInstance(this.el);
          }
          var el = this.el;
          var v = el.dom.value;
          var d = document.createElement('div');
          d.appendChild(document.createTextNode(v));
          v = d.innerHTML;
          d = null;
          v += "*";
          var w = Math.min(this._width, Math.max(this.metrics.getWidth(v) +  10, 10));
          this.el.setWidth(w);
      },
    
        getValues: function(){
            var ret = [];
            for(var k in this.selectedValues){
                if(this.selectedValues[k])
                    ret.push(this.selectedValues[k]);
            }
            return ret.join(this.options['separator']);
        }
    });
    
    Ext.reg('boxselect', Ext.ux.BoxSelect);

  4. #24
    Sencha User
    Join Date
    Sep 2007
    Location
    Poland, Cracow
    Posts
    70
    Vote Rating
    0
    Evolic is on a distinguished road

      0  

    Wink Fixed disable() method

    Fixed disable() method


    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>BoxSelect</title>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <link href="../../resources/css/ext-all.css" media="screen" rel="Stylesheet" type="text/css" />
    <link href="../../examples/examples.css" media="screen" rel="Stylesheet" type="text/css" />
    
      <script type="text/javascript" src="../../source/core/Ext.js"></script>
      <script type="text/javascript" src="../../source/adapter/ext-base.js"></script>
      <!-- <script src="../../adapter/ext/ext-base.js" type="text/javascript"></script> -->
    <script src="../../ext-all-debug.js" type="text/javascript"></script>
    <script src="../form/states.js" type="text/javascript"></script>
    <script type="text/javascript" src="Ext.ux.BoxSelect.v3.js"></script>
    
    <link href="boxselect.css" media="screen" rel="Stylesheet" type="text/css" />
    
    <script type="text/javascript">
        Ext.onReady(function() {
    
        Ext.QuickTips.init();
    
        var states = new Ext.data.SimpleStore({
            fields: ['abbr', 'state', 'nick'],
            data: Ext.exampledata.states
        });
    
        var select = new Ext.ux.BoxSelect({
            id: 'select',
            resizable: true,
            fieldLabel: 'Send To',
            name: 'states',
            anchor:'100%',
            store: states,
            mode: 'local',
            displayField: 'state',
            //displayFieldTpl: '<a href="" title="{nick}">{state} - {abbr}</a>',
            //displayFieldTpl: '{state} - {abbr}',
            valueField: 'abbr',
            value: [{abbr: 'AL', state : 'Alabama'}, {abbr: 'NY', state: 'New York'}, {abbr: 'MN', state: 'Minnesota'}]
        });
    
        var select2 = new Ext.ux.BoxSelect({
            id: 'select2',
            resizable: true,
            fieldLabel: 'Send To',
            name: 'states2',
            anchor:'100%',
            store: states,
            mode: 'local',
            displayField: 'state',
            //displayFieldTpl: '<a href="" title="{nick}">{state} - {abbr}</a>',
            displayFieldTpl: '{state} - {abbr}',
            valueField: 'abbr',
            disabled: true,
            value: [{abbr: 'AL', state : 'Alabama'}, {abbr: 'NY', state: 'New York'}, {abbr: 'MN', state: 'Minessota'}],
            addUniqueValues: true
        });
    
        var form = new Ext.form.FormPanel({
            id: 'form',
            baseCls: 'x-plain',
            labelWidth: 55,
            url: 'submit.php',
            //method: 'get',
            defaultType: 'textfield',
            items: [
                select,
                select2,
                {
                    fieldLabel: 'Subject',
                    name: 'subject',
                    anchor: '100%'
                },
                {
                    xtype: 'textarea',
                    hideLabel: true,
                    name: 'msg',
                    anchor: '100% -53'
                }
            ]
        });
    
        var window = new Ext.Window({
            id: 'window',
            title: 'Resize Me',
            width: 500,
            height:300,
            minWidth: 300,
            minHeight: 200,
            layout: 'fit',
            plain:true,
            bodyStyle:'padding:5px;',
            buttonAlign:'center',
            items: form,
            maximizable: true,
    
            buttons: [{
                text: 'Send',
                scope: this
                ,
                handler: function(){
                    form.getForm().submit();
                    //alert(select.getValues());
                }
            },{
                text: 'Cancel'
            }]
        });
    
        window.show();
        });
    </script>
    
    </head>
    <body>
    
    </body>
    </html>
    JS:
    Code:
    Ext.ux.Box = Ext.extend(Ext.Component, {
        initComponent : function(){
            Ext.ux.Box.superclass.initComponent.call(this);
        },
    
        onElClick : function(e){
            this.focus();
        },
    
        onLnkClick : function(e){
            e.stopEvent();
            this.fireEvent('remove', this);
            this.dispose();
        },
        onLnkFocus : function(){
            this.el.addClass("bit-box-focus");
        },
        onLnkBlur : function(){
            this.el.removeClass("bit-box-focus");
        },
    
        enableElListeners : function() {
            this.el.on('click', this.onElClick, this, {stopEvent:true});
        },
    
        enableLnkListeners : function() {
            this.lnk.on({
                'click': this.onLnkClick,
                'focus': this.onLnkFocus,
                'blur':  this.onLnkBlur,
                scope: this
            });
        },
    
        enableAllListeners : function() {
            this.enableElListeners();
            this.enableLnkListeners();
        },
    
        disableAllListeners : function() {
            this.el.un('click', this.onElClick, this);
    
            this.lnk.un('click', this.onLnkClick, this);
            this.lnk.un('focus', this.onLnkFocus, this);
            this.lnk.un('blur', this.onLnkBlur, this);
        },
    
        onRender: function(ct, position){
            Ext.ux.Box.superclass.onRender.call(this, ct, this.maininput);
    
            this.addEvents('remove');
    
            this.addClass('bit-box');
    
            this.el = ct.createChild({ tag: "li" }, this.maininput);
            this.el.addClassOnOver('bit-hover');
    
            Ext.apply(this.el, {
                'focus': function(){
                    this.down('a.closebutton').focus();
                },
                'dispose': function(){
                    this.dispose();
                }.createDelegate(this)
    
            });
    
            this.enableElListeners();
    
            this.el.update(this.caption);
    
            this.lnk = this.el.createChild({
                'tag': 'a',
                'class': 'closebutton',
                'href':'#'
            });
    
            this.enableLnkListeners();
    
            this.on({
                'disable': this.disableAllListeners,
                'enable': this.enableAllListeners,
                scope: this
            });
    
            new Ext.KeyMap(this.lnk,
            [{
                key: [Ext.EventObject.BACKSPACE, Ext.EventObject.DELETE],
                fn: function(){
                    this.dispose();
                }.createDelegate(this)
            }, {
                key: Ext.EventObject.RIGHT,
                fn: function(){
                    this.move('right');
                }.createDelegate(this)
            }, {
                key: Ext.EventObject.LEFT,
                fn: function(){
                    this.move('left');
                }.createDelegate(this)
            }
            ]).stopEvent = true;
    
        },
    
        move: function(direction) {
            if(direction == 'left')
                el = this.el.prev();
            else
                el = this.el.next();
            if(el)
                el.focus();
        },
    
        dispose: function() {
            //if(el.prev() && this.retrieveData(el.prev(), 'small') ) el.prev().remove();
            //if(this.current == el) this.focus(el.next());
            //if(el.data['type'] == 'box') el.onBoxDispose(this);
    
            Ext.fly(this.hidden).remove();
            this.el.hide({
                duration: .1,
                callback: function(){;
                    this.move('right');
                    this.destroy();
                }.createDelegate(this)
            });
    
    
            return this;
        }
    });
    
    Ext.ux.BoxSelect = Ext.extend(Ext.form.ComboBox, {
    
        /**
         * @cfg {Boolean} addUniqueValues True to add only unique values.
         */
        addUniqueValues: true,
    
        initComponent:function() {
            Ext.apply(this, {
                selectedValues: {},
                boxElements: {},
                current: false,
                options: {
                    className: 'bit',
                    separator: ','
                },
                hideTrigger: true,
                grow: false
            });
    
            Ext.ux.BoxSelect.superclass.initComponent.call(this);
        },
    
        // private
        onEnable: function(){
            Ext.ux.BoxSelect.superclass.onEnable.apply(this, arguments);
    
            for(var k in this.boxElements){
                this.boxElements[k].enable();
            }
        },
    
        // private
        onDisable: function(){
            Ext.ux.BoxSelect.superclass.onDisable.apply(this, arguments);
    
            for(var k in this.boxElements){
                this.boxElements[k].disable();
            }
        },
    
        onRender:function(ct, position) {
            Ext.ux.BoxSelect.superclass.onRender.call(this, ct, position);
    
            this.el.removeClass('x-form-text');
            this.el.className = 'maininput';
            this.el.dom.name = '';
            this.el.setWidth(20);
            this.el.dom.value = ''
    
    
            this.holder = this.el.wrap({
                'tag': 'ul',
                'class':'holder x-form-text'
            });
    
            if(!Ext.isIE) {
                this.holder.dom.style.overflow='hidden';
            }
    
            this.holder.on('click', function(e){
                e.stopEvent();
                if(this.maininput != this.current) this.focus(this.maininput);
            }, this);
    
            this.maininput = this.el.wrap({
                'tag': 'li', 'class':'bit-input'
            });
    
            Ext.apply(this.maininput, {
                'focus': function(){
                    this.focus();
                }.createDelegate(this)
            });
    
            if(typeof this.displayFieldTpl  === 'string')
                this.displayFieldTpl = new Ext.XTemplate(this.displayFieldTpl)
    
            if(typeof this.value !== 'undefined'){
                if(typeof this.value === 'string')
                    this.value = [this.value];
    
                Ext.each(this.value, function(item){
                    if (this.displayFieldTpl) {
                        caption = this.displayFieldTpl.apply(item);
                    } else {
                        caption = item[this.displayField];
                    }
    
                    if (!this.checkValue(caption)) {
                        this.addBox(item[this.valueField], caption);
                    }
                }, this);
            }
        },
    
        onResize : function( w, h, rw, rh ){
            this._width = w;
            Ext.ux.BoxSelect.superclass.onResize.call(this, w, h, rw, rh);
            this.autoSize();
        },
    
        onKeyUp: function(e)
        {
            if(e.getKey() == e.ENTER)
            {
                var value = this.el.dom.value;
                if(value.length > 0)
                {
                    if (!this.checkValue(value)) {
                        this.addBox(value, value);
                    } else {
                        Ext.Msg.alert('Message', 'Item is already on the list');
                    }
    
                    this.el.dom.value = '';
    
                }
            } else {
                if (this.editable !== false && !e.isSpecialKey())
                {
                    this.lastKey = e.getKey();
                    if (e.getKey() == e.BACKSPACE && this.el.dom.value.length == 0)
                    {
                        e.stopEvent();
                        this.collapse();
                        var el = this.maininput.prev();
                        if (el)
                            el.focus();
                        return;
                    }
                    this.dqTask.delay(this.queryDelay);
                }
    
                this.autoSize();
    
                Ext.ux.BoxSelect.superclass.onKeyUp.call(this, e);
            }
        },
    
        onSelect: function(record, index) {
            var val = record.data[this.valueField];
    
            //this.selectedValues[val] = val;
    
            if(typeof this.displayFieldTpl  === 'string')
                this.displayFieldTpl = new Ext.XTemplate(this.displayFieldTpl)
    
    
            var caption;
            if(this.displayFieldTpl)
                caption = this.displayFieldTpl.apply(record.data)
            else if(this.displayField)
                caption = record.data[this.displayField];
    
            if (!this.checkValue(caption)) {
                this.addBox(record.data[this.valueField], caption);
            } else {
                Ext.Msg.alert('Message', 'Item is already on the list');
            }
    
            this.collapse();
            this.setRawValue('');
            this.lastSelectionText = '';
            this.applyEmptyText();
    
            this.autoSize();
        },
    
        checkValue: function (caption) {
            if (this.addUniqueValues) {
                return typeof this.selectedValues[caption] != 'undefined';
            } else {
                return true;
            }
        },
    
        addBox: function(id, caption){
            var box = new Ext.ux.Box({
                id: 'Box_' + id,
                maininput: this.maininput,
                renderTo: this.holder,
                className: this.options['className'],
                caption: caption,
                'value': id,
                listeners: {
                    'remove': function(box){
                        delete this.selectedValues[box.caption];
                        delete this.boxElements[box.caption];
                    },
                    scope: this
                }
            });
            box.render();
    
            if (this.hiddenName) {
                var name = this.hiddenName;
            } else {
                var name = this.name + '[' + id + ']';
            }
    
            box.hidden = this.el.insertSibling({
                'tag':'input',
                'type':'hidden',
                //'value': id,
                'name': name
            },'before', true);
    
            this.selectedValues[caption] = id;
            this.boxElements[caption] = box;
      },
      autoSize : function(){
          if(!this.rendered){
              return;
          }
          if(!this.metrics){
              this.metrics = Ext.util.TextMetrics.createInstance(this.el);
          }
          var el = this.el;
          var v = el.dom.value;
          var d = document.createElement('div');
          d.appendChild(document.createTextNode(v));
          v = d.innerHTML;
          d = null;
          v += "*";
          var w = Math.min(this._width, Math.max(this.metrics.getWidth(v) +  10, 10));
          this.el.setWidth(w);
      },
    
        getValues: function(){
            var ret = [];
            for(var k in this.selectedValues){
                if(this.selectedValues[k])
                    ret.push(this.selectedValues[k]);
            }
            return ret.join(this.options['separator']);
        }
    });
    
    Ext.reg('boxselect', Ext.ux.BoxSelect);

  5. #25
    Sencha User
    Join Date
    Sep 2007
    Location
    Poland, Cracow
    Posts
    70
    Vote Rating
    0
    Evolic is on a distinguished road

      0  

    Default


    Today I noticed that there is problem when I want to load Form
    from e.g. XML or JSON file.

    There is some problem here I cannot solve.
    Finally I managed to display all records, but there is also "[Object, Object]" on the ComboBox
    (in case 2 values).

    Any help?

  6. #26
    Ext User
    Join Date
    Feb 2008
    Posts
    54
    Vote Rating
    0
    razor is on a distinguished road

      0  

    Default


    Great work so far!

    I would like to bring forward a change, would it be possible to press the downkey (or add an icon at the end of the textfield/combo) to see all available options?

    Reason: what if the user forgot which items are in the combo box, this should provide a extra needed functionality.

    Please let me know if anybody will do this, else I will change the code.

  7. #27
    Sencha User
    Join Date
    Mar 2007
    Posts
    767
    Vote Rating
    1
    franklt69 is on a distinguished road

      0  

    Default


    Hi I need to get the event click or remove or delete key and never it is fire, some is wrong?

    Code:
    this.selectAttachment = new Ext.ux.BoxSelect({
    		hideLabel: true,
    		name: 'attachment',
    		anchor:'100%',
    		mode:  'local',
                    typeAhead: false,
                    hideTrigger:true,
                      listeners: {
                        'click': function(p1,p2,p3){
                                   debugger;
                                   var p = p1;
                                  },
                         'remove': function(p1,p2,p3){
                                   debugger;
                                   var p = p1;
                                  }
                       }
        });

    regards
    Frank

  8. #28
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    51
    Vote Rating
    0
    mark_l_lewis is on a distinguished road

      0  

    Default


    Hi,

    How can you reload saved data into the textfield area so that the displayField is displayed.

    Ie the valuelist is 23, 29, 30. I want to save this and then redisplay at a later date?

    Hope this makes sense.

    Cheers,
    Mark

  9. #29
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    51
    Vote Rating
    0
    mark_l_lewis is on a distinguished road

      0  

    Default


    hi,

    i couldn't find a way so i wrote a setValues function;


    Code:
    setValues: function(store, selectedValues){
    		
    		for(var i = 0; i < selectedValues.length; i++){
    			 this.onSelect (store.getById(selectedValues[i]), 0);
    		}
    		
    		 
    	}
    i had to add the store as a parameter to the function as the this.store is left in the filtered state from the previous selection.

    cheers,
    mark

  10. #30
    Ext User
    Join Date
    Aug 2007
    Posts
    10
    Vote Rating
    0
    Andrewd2 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Evolic View Post
    Today I noticed that there is problem when I want to load Form
    from e.g. XML or JSON file.

    There is some problem here I cannot solve.
    Finally I managed to display all records, but there is also "[Object, Object]" on the ComboBox
    (in case 2 values).

    Any help?
    override function InitValue() :
    Code:
    Ext.ux.BoxSelect = Ext.extend(Ext.form.ComboBox, {
    
    ...
    
    	initValue : function(){
    	},
    ...
    });