Results 1 to 1 of 1

Thread: A little help and advice new Component Lookup Multiple

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    50

    Default A little help and advice new Component Lookup Multiple

    For my first testproject in Ext i'm currently developing in extjs with adobe air.
    I needed a couple of special fields :

    - edit lookup combo (user can lookup item, or type another new item)
    (realized with a standard ComboBox

    - edit lookup combo than can hold and lookup multiple items

    This one was al little bit trickier, i works but i still have some problems :

    The js code for the component :
    PHP Code:
      Ext.form.ComboBoxMulti = function(config) {
            
    this.hideTriggertrue,
          
    this.itemSeperator "\n",
        
    Ext.form.ComboBoxMulti.superclass.constructor.call (thisconfig);
    };

    Ext.extend(Ext.form.ComboBoxMultiExt.form.ComboBox, {
        
        
    onRender : function(ctposition){
            
    Ext.form.ComboBox.superclass.onRender.call(thisctposition);
            if(
    this.hiddenName){
                
    this.hiddenField this.el.insertSibling({tag:'textarea',namethis.hiddenNameid: (this.hiddenId||this.hiddenName)},
                        
    'before'true);
                
    this.hiddenField.value =
                    
    this.hiddenValue !== undefined this.hiddenValue :
                    
    this.value !== undefined this.value '';

                
    // prevent input submission
                
    this.el.dom.removeAttribute('name');
            }
            if(
    Ext.isGecko){
                
    this.el.dom.setAttribute('autocomplete''off');
            }

            if(!
    this.lazyInit){
                
    this.initList();
            }else{
                
    this.on('focus'this.initListthis, {singletrue});
            }

            if(!
    this.editable){
                
    this.editable true;
                
    this.setEditable(false);
            }
        },
        
        
    onSelect : function(recordindex){
            if(
    this.fireEvent('beforeselect'thisrecordindex) !== false){
                
    this.setMultiValue(record.data[this.valueField || this.displayField]);
                
    this.collapse();
                
    this.setRawValue('');
                
    this.fireEvent('select'thisrecordindex);
            }
        },

        
    setValue: function(v){
            
    Ext.form.ComboBoxMulti.superclass.setValue.call(this,v);
            
    this.setRawValue('');
        },
        
        
    setMultiValue: function(v){
            if (
    this.hiddenField.value != '') {
                
    this.hiddenField.value += this.itemSeperator
            
    }   
            
    this.hiddenField.value +=  v
        
    }, 
        
        
    fireKey : function(e){
            if (
    e.getKey() == '13' && this.getRawValue() != '') {
                
    this.setMultiValue(this.getRawValue());
                
    this.setRawValue('');

                
            }
            else {
            
                if (
    e.isNavKeyPress() && !this.isExpanded() && !this.delayedCheck) {
                    
    this.fireEvent("specialkey"thise);
                }
            }
        },

        
        

    }); 
    I create the component with :

    PHP Code:
     new Ext.form.ComboBoxMulti(
    {
    xtype'combo',
      
    fieldLabel'Afmetingen',

        
    //if we enable typeAhead it will be querying database
                //so we may not want typeahead consuming resources
                
    typeAheadfalse
                
    triggerAction'all',
                
    allowBlanktrue,
                
    editabletrue,
                
    hiddenName'certificate[measurements]',
                
    //By enabling lazyRender this prevents the combo box
                //from rendering until requested
                
    lazyRendertrue,//should always be true for editor


                
                //where to get the data for our combobox
                
    storestore_measurements = new Ext.data.Store({
                   
    remoteSort true,
                   
    autoLoadtrue,
                   
    proxy: new Ext.data.HttpProxy({
                      
    url'/customers/4/clients/lookup.json',
                      
    method'GET',
                      }), 
                  
    reader:  new Ext.data.JsonReader(
                  {
                      
    root'records',//name of the property that is container for an Array of row objects
                      
    id'id'//the property within each row object that provides an ID for the record (optional)
                  
    },
                      [
                          {
    name'id'},{name'name'},//name of the field in the stock table (not the industry table)
                       
    ]
                ),    
                }),    
                
    mode'remote',  
                
                
                
    //the underlying data field name to bind to this
                //ComboBox (defaults to undefined if mode = 'remote'
                //or 'text' if transforming a select)
                
    displayField'name',
                
    //the underlying value field name to bind to this
                //ComboBox
                
    valueField'name',
                
                  
            
              
    typeAheadtrue,
        
      
        
            
    anchor'95%',
        
      
        
            
    label'Afmetingen',
        
      

    }) 
    The only thing i have changed is onrender so that not a hidden input is created but a textarea. Also i have overridden some options to handle the events on list select ed (so that mulitple items can be selected)

    This all works, but it is ugly as hell

    What i would like to do is :

    - Style the textarea according to the styling of the combobox (sameWidth make height optional with config)
    put the combobox on a new line

    - Clean this code up, this works but i don't think this is the nicest way to handlse something like this. Is it better to make a plugin of it or a default xtype , and if yes can anyone give me some pointers how to do this ?

    Kind regards daniel
    Last edited by dewie; 6 Mar 2008 at 12:12 PM. Reason: Added

Posting Permissions

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