Page 2 of 11 FirstFirst 1234 ... LastLast
Results 11 to 20 of 107

Thread: Ext.ux.BoxSelect (like the Facebook's one)

  1. #11
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    Quote Originally Posted by zilionis View Post
    Heh i made too few weeks ago, already posted here http://extjs.com/forum/showthread.ph...light=facebook
    yes i mentioned that 1 post above yours

    you're both using different approaches though -- you've used a combo for each input, while tintin directly extended a combo. it'd be interesting to see how both plugins develop.

  2. #12
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
      0  

    Default Is there a better way of doing this?

    I added a way to include new tags that aren't on the data collection by overwriting onKeyUp property like this:

    Code:
    onKeyUp: function(e)
    		{
    			if(e.getKey() == e.ENTER)
    			{
    				var value = this.el.dom.value;
    				if(value.length > 0)
    				{
    					this.selectedValues[value] = value;
    					this.addBox(value, value);
    					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);
    			}
    		},
    Is there a better way to do this?

    I also had to add the following to avoid errors on pibos's modifications:

    Code:
    Ext.each(this.value, function(item)
    			{
    				if(item)
    				{
    					if(this.displayFieldTpl)
    					{
    						caption = this.displayFieldTpl.apply(item);
    					}
    					else 
    					{
    						caption = item[this.displayField]
    					}
    					this.addBox(item[this.valueField], caption);
    				}
    			}, this);
    Thanks.

  3. #13
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,042
    Vote Rating
    182
      0  

    Default

    @Pibos: I get "Invalid argument" when trying to use your code to set the initial value (happens in both IE7 and FF3b5). It breaks in this section (line 2735 of ext-all-debug.js (v2.0.2)):

    Code:
    setWidth : function(width, animate){
            width = this.adjustWidth(width);
            if(!animate || !A){
                this.dom.style.width = this.addUnits(width);
            }else{
                this.anim({width: {to: width}}, this.preanim(arguments, 1));
            }
            return this;
        },
    
    Error: Width is NaN
    I think this is because the value property is already being used by the combobox, by changing the name to initialValue or whatever your code runs fine!

    another thing missing: a call to this.selectedValues[id] = id; in the addBox function. Otherwise initally loaded items will not be returned by the getValues() function...

    IE7/IE6: Box-corners are not rounded

  4. #14
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Vote Rating
    1
      0  

    Default

    Is there a way we can make this search through underlying data too perhaps? i.e. something that is not in the displayField. Also, it would be awesome to have this be a soundex search as well.

    just some thoughts...

  5. #15
    Ext User
    Join Date
    Oct 2007
    Posts
    25
    Vote Rating
    0
      0  

    Default

    Tintin - great extension thanks

    I was just testing in IE6, and noticed that if the length of the items inside the box become larger than the box itself, the items do not wrap correctly - see screenshot.

    Works fine in FF.

    I've had a look, but have not yet found a fix.

    Any ideas?
    Attached Images Attached Images

  6. #16
    Ext User
    Join Date
    Oct 2007
    Posts
    25
    Vote Rating
    0
      0  

    Default

    Ok - I found a solution to the bug I raised earlier - though not sure if this is the best approach.
    Code:
    ul.holder { margin: 0; overflow: hidden; height: auto !important; height: 1%; padding: 0; }
    The overflow property was causing the issue in IE. Removing it fixed IE, but broke the display in FF. Instead of putting a hack in the css, I chose remove the overflow property from the css, and make the following change to the onRender function in Ext.ux.BoxSelect

    Code:
    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.setWidth(20);
    
    		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)
    		});
    		
    	},
    Any suggestions on a better way to do this?

  7. #17
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    @sunny_boy, Ext automatically adds a browser-specific CSS class to the <body> tag.

    e.g. ext-gecko, or ext-ie

    use some css like this instead
    Code:
    ul.holder { margin: 0; overflow: hidden; height: auto !important; height: 1%; padding: 0; }
    .ext-gecko ul.holder { overflow: hidden;}
    [edit]
    i haven't dived into this plugin yet, so you might want to somehow make those css rules more specific so they only apply to this plugin.

  8. #18

  9. #19
    Ext User
    Join Date
    Apr 2008
    Location
    PARIS
    Posts
    9
    Vote Rating
    0
      0  

    Exclamation Something wrong without setting the value config option

    Thank you Tintin for this great Extension and also to you Pibos for your improvement.
    Pibos, there is something wrong if you don't set 'value' config option. Ext.ux.Boxselect throws an exception. I suggest you to replace the following code at line number (163 ?) :
    PHP Code:
            if(this.value){
                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]
                    
                 
    this.addBox(item[this.valueField], caption);
           }, 
    this); 
    by this one :
    PHP Code:
    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]
                    
                    
    this.addBox(item[this.valueField], caption);
                }, 
    this);
        } 
    And now, all works fine.

    Al
    http://www.123messagepro.com convert your text into vocal message with background music !!

  10. #20
    Sencha User
    Join Date
    Aug 2007
    Location
    Munich, Germany
    Posts
    135
    Vote Rating
    2
      0  

    Default Question

    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!

Page 2 of 11 FirstFirst 1234 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •