1. #1
    Ext JS Premium Member christocracy's Avatar
    Join Date
    Oct 2006
    Location
    Montreal
    Posts
    381
    Vote Rating
    0
    christocracy is on a distinguished road

      0  

    Default Ext.ux.form.ComboBoxAdd

    Ext.ux.form.ComboBoxAdd


    This is simply an extension of Ext.form.ComboBox which adds a 2nd trigger beside the standard ComboBox trigger. The 2nd trigger fires an event called "add".

    I use it for stuff like "account combos" or "company combos". if a record doesn't exist in your combo's list, click the "add" button and show a form.

    I borrowed some code from Ext.form.TwinTriggerField.

    *** the 2nd trigger has class "x-form-add-trigger -- you must provide your own style implementation for this class ***

    Example trigger style
    Code:
    <style>
     .x-form-add-trigger {
       background-image: url(/images/icons/add.png) !important;
       background-position: center center !important;    
       cursor: pointer;    
       border: 0 !important;    
       margin-left: 2px;
     }
    </style>
    Usage:
    Code:
     <script>
    // create combo using standard ComboBox configuration.
    var combo = new Ext.ux.form.ComboBoxAdd({...});
     
    // listen to 2nd trigger via "add" event
    combo.on('add', function(ev) {
        alert('you clicked the add button');  // <-- you might show a form on a dialog here
    });
     </script>
    Ext.ux.form.ComboBoxAdd
    Code:
    /****
     * Ext.ux.form.ComboBoxAdd
     * a Combination of both ComboBox and TwinTriggerField.
     * adds an "add" button beside the std ComboBox trigger.
     * 
     * like this: [ selected value][v][+]  <--- an add button.
     * 
     * usage is identical to Ext.form.ComboBox.
     * listen to the "add" button via add event.
     * 
     * <script>
     * // create combo using standard ComboBox configuration.
     * var combo = new Ext.ux.form.ComboBoxAdd({...});
     * 
     * // listen to 2nd trigger via "add" event
     * combo.on('add', function(ev) {
     *     alert('you clicked the add button');  // <-- you might show a form on a dialog here
     * });
     * 
     * </script>
     * 
     * NB: you must supply your own style implementation for the 2nd trigger.  it has the class "x-form-add-trigger"
     * you might style it like so:
     * <style>
     * .x-form-add-trigger {
     *   background-image: url(/images/icons/add.png) !important;
     *   background-position: center center !important;    
     *   cursor: pointer;    
     *   border: 0 !important;    
     *   margin-left: 2px;
     * }
     * </style>
     * @author Chris Scott
     * @email christocracy@gmail.com
     *
     */
    Ext.namespace("Ext.ux.form");
    Ext.ux.form.ComboBoxAdd = function(config) {
        Ext.ux.form.ComboBoxAdd.superclass.constructor.apply(this, arguments);        
    };
    Ext.extend(Ext.ux.form.ComboBoxAdd, Ext.form.ComboBox, {
        
        /***
         * trigger classes.
         */
        trigger1Class: '',            
        trigger2Class: 'x-form-add-trigger',
        
        /***
         * initComponent
         */
        initComponent : function(){
            Ext.ux.form.ComboBoxAdd.superclass.initComponent.call(this);
            
            /***
             * @event add
             * @param {field: Ext.ux.form.ComboBoxAdd, button: Ext.Element}
             * fires when 2nd trigger is clicked
             */
            this.addEvents({add : true});
            
            // implement triggerConfig from Ext.form.TwinTriggerField
            this.triggerConfig = {
                tag:'span', cls:'x-form-twin-triggers', cn:[
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
            ]};
        },
        
        /***
         * getTrigger
         * copied from Ext.form.TwinTriggerField
         * @param {Object} index
         */
        getTrigger : function(index){
            return this.triggers[index];
        },
        
        /***
         * initTrigger
         * copied from Ext.form.TwinTriggerField
         */
        initTrigger : function(){
            var ts = this.trigger.select('.x-form-trigger', true);
            this.wrap.setStyle('overflow', 'hidden');
            var triggerField = this;
            ts.each(function(t, all, index){
                t.hide = function(){
                    var w = triggerField.wrap.getWidth();
                    this.dom.style.display = 'none';
                    triggerField.el.setWidth(w-triggerField.trigger.getWidth());
                };
                t.show = function(){
                    var w = triggerField.wrap.getWidth();
                    this.dom.style.display = '';
                    triggerField.el.setWidth(w-triggerField.trigger.getWidth());
                };
                var triggerIndex = 'Trigger'+(index+1);
    
                if(this['hide'+triggerIndex]){
                    t.dom.style.display = 'none';
                }
                t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
                t.addClassOnOver('x-form-trigger-over');
                t.addClassOnClick('x-form-trigger-click');
            }, this);
            this.triggers = ts.elements;
        },
        
        /***
         * onTrigger1Click
         * defer to std ComboBox trigger method
         */
        onTrigger1Click : function() {
            this.onTriggerClick();    
        },
        
        /***
         * onTrigger2Click 
         * this is the "add" button handler.  fire 'add' event     
         */
        onTrigger2Click : function() {
            this.fireEvent('add', {field: this, button: this.triggers[1]});        
        },
            
    	/***
    	 * insert
    	 * provide a convenience method to insert ONE AND ONLY ONE record to the store.	 	 	 	 
    	 * @param {Object} index
    	 * @param {Object} data (
    	 */
    	insert : function(index, data) {
            this.reset();
            
            var rec = new this.store.recordType(data);                
            rec.id = rec.data.id; 
            this.store.insert(index, rec);
    		this.setValue(rec.data.id);
    		this.fireEvent('select', this, rec, index);        
    	}
    });
    Attached Images

  2. #2
    Sencha User
    Join Date
    Oct 2007
    Posts
    57
    Vote Rating
    0
    pludikhu is on a distinguished road

      0  

    Default


    Great!
    I'm keeping this for future use because I'm sure it'll come in handy soon!

    Thanks

    Patrick

  3. #3
    Ext User
    Join Date
    Apr 2007
    Posts
    379
    Vote Rating
    0
    sfwalter is on a distinguished road

      0  

    Default


    nice extension! great from the user experience point of view

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    17
    Vote Rating
    0
    eli_s is on a distinguished road

      0  

    Default


    brilliant! thank you - I started using it as soon as I noticed it.

  5. #5
    Sencha User
    Join Date
    Apr 2008
    Posts
    22
    Vote Rating
    0
    pp2 is on a distinguished road

      0  

    Default


    Thank's a lot, I have integrated this very useful function too.

    Pascal

  6. #6
    Ext User
    Join Date
    Jul 2009
    Posts
    1
    Vote Rating
    0
    sam_16_83 is on a distinguished road

      0  

    Thumbs up (y)

    (y)


    thanks ... is very useful

  7. #7
    Ext User
    Join Date
    Jan 2011
    Location
    Uchaly
    Posts
    1
    Vote Rating
    0
    Ivan777 is on a distinguished road

      0  

    Default


    thanks!
    You helped me a lot

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi