Results 1 to 5 of 5

Thread: Custum Form Field Extension - Doesn't disappear when clicked off in grid

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    33

    Exclamation Custum Form Field Extension - Doesn't disappear when clicked off in grid

    I wrote a custom form field extension comprised of a textfield and combobox. Everything is working great, except when I implement the field inside of a grid. When I double click the cell, my custom fields appears just fine; however, when I click off onto another part of the screen, the custom field does not disappear. The only way to get it to disappear and update my DB is by double clicking on another cell to edit.

    Here is the code for my extension:
    PHP Code:
    Ext.ux.sendIntervalField Ext.extend(Ext.form.Field, {
        
    afterText'-After Previous Message',
        
    seperatorText'-',
        
        
    onRender: function(ctposition){        
            if(!
    this.el){
                
    this.sIamount = new Ext.form.TextField({
                    
    idthis.id+'-sIamount',
                    
    width:25,
                    
    minLength1,
                    
    maxLength2,
                    
    allowBlankfalse
                
    });
                
    this.sIamountType = new Ext.form.ComboBox({
                    
    idthis.id+'-sIamountType',
                    
    labelWidth0,
                    
    hideLabel:true,
                    
    width:90,
                    
    typeAheadfalse
                    
    triggerAction'all',
                    
    lazyRendertrue,
                    
    editablefalse,
                    
    value:"Day(s)",
                    
    allowBlankfalse,
                    
    store : [
                                [
    "Day(s)""Day(s)"], 
                                [
    "Week(s)""Week(s)"],
                                [
    "Month(s)""Month(s)"]
                            ]
                });
                
    this.afterLabel = new Ext.form.Label({
                    
    xtype'label',
                    
    idthis.id+'-afterLabel',
                    
    textthis.afterText
                
    });
                
    this.seperatorLabel = new Ext.form.Label({
                    
    xtype'label',
                    
    idthis.id+'-seperatorLabel',
                    
    textthis.seperatorText
                
    });
                
    this.fieldCt = new Ext.Container({
                    
    autoEl: {id:this.id}, //make sure the container el has the field's id
                    
    cls'ext-dt-range',
                    
    renderToct,
                    
    layout:'table',
                    
    layoutConfig: {
                        
    columns4
                    
    },
                    
    defaults: {
                        
    //hideParent: true
                    
    },
                    
    items:[ 
                        
    this.sIamount,
                        
    this.seperatorLabel,
                        
    this.sIamountType,
                        
    this.afterLabel
                    
    ]
                });
                
                
    this.fieldCt.ownerCt this;
                
    this.el this.fieldCt.getEl();
                
    this.items = new Ext.util.MixedCollection();
                
    this.items.addAll([this.sIamountthis.seperatorLabelthis.sIamountTypethis.afterLabel]);
            }
            
    Ext.ux.sendIntervalField.superclass.onRender.call(thisctposition);
        },   
        
        
    getValue: function(){
            return [
                
    this.sIamount.getValue()+' '+this.sIamountType.getValue()
            ];
        },
        
        
    setValue: function(v){
            
    v=v.toString();
            var 
    explodeArray v.split(' ');        
            
    this.sIamount.setValue(explodeArray[0]);
            
    this.sIamountType.setValue(explodeArray[1]);
        },
        
    isDirty: function(){
            var 
    dirty false;
            if(
    this.rendered && !this.disabled) {
                
    this.items.each(function(item){
                    if (
    item.isDirty()) {
                        
    dirty true;
                        return 
    false;
                    }
                });
            }
            return 
    dirty;
        },    
        
    onDisable : function(){
            
    this.delegateFn('disable');
        },
        
    onEnable : function(){
            
    this.delegateFn('enable');
        },    
        
    reset : function(){
            
    this.delegateFn('reset');
        },    
        
    // private
        
    delegateFn : function(fn){
            
    this.items.each(function(item){
                if (
    item[fn]) {
                    
    item[fn]();
                }
            });
        },    
        
    beforeDestroy: function(){
            
    Ext.destroy(this.fieldCt);
            
    Ext.ux.sendIntervalField.superclass.beforeDestroy.call(this);
        },
        
    onDestroy : function(){
            
    Ext.removeNode(this.fieldCt);
            
    Ext.ux.sendIntervalField.superclass.onDestroy.call(this);
        },
        
    getRawValue Ext.emptyFn,
        
    setRawValue Ext.emptyFn
    });

    Ext.reg('sendintervalfield'Ext.ux.sendIntervalField); 
    I have also included a screen shot of this to better explain what is going on:
    clickoff.png

    Here is how I define it in my column model:
    PHP Code:
    colModelCampaignMessages = new Ext.grid.ColumnModel([ 
                    new 
    Ext.grid.RowNumberer(),
                     {                         
                        
    dataIndex'message_name',
                        
    header:"Message Name",
                        
    sortabletrue                        
                    
    },{                         
                        
    dataIndex'send_interval',
                        
    header"Send Interval",
                        
    sortabletrue,
                        
    editor: {
                            
    xtype'sendintervalfield',
                            
    hideLabeltrue,
                            
    height:30,
                            
    afterText:'',
                            
    labelWidth0,
                            
    hideLabel:true
                        
    }
                    },{                         
                        
    dataIndex'message',
                        
    header"Message",
                        
    sortabletrue,
                        
    editor: {
                            
    xtype'textarea',
                            
    minLength1,
                            
    maxLength140,
                            
    allowBlankfalse 
                        
    }
                    },{                         
                        
    dataIndex'orderM',
                        
    header"Message Order",
                        
    style:'text-align:right;',
                        
    sortabletrue
                    
    }
                    
                ]); 
    How can I get the custom field to disappear? Is this an extjs bug or am I doing something wrong? Thanks!

  2. #2
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246

    Default

    question** have your custom field a hide method ?

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    33

    Default

    I've added a hide method to it and it still doesn't work... this is the code I tried using:
    PHP Code:
    hide : function(){
            if(
    this.fireEvent('beforehide'this) !== false){
                
    this.doHide();
                
    this.fireEvent('hide'this);
            }
            return 
    this;
        },
        
    // private
        
    doHide: function(){
            
    this.hidden true;
            if(
    this.rendered){
                
    this.onHide();
            }
        },
        
    // private
        
    onHide : function(){
            
    this.getVisibilityEl().addClass('x-hide-' this.hideMode);
        }, 
    Nonetheless, even if I were to add these methods, would I not have to call them directly? How would specifying a hide method affect what is happening on the grid? I've even looked at the extjs-all-dubug.js file and didn't see other fields like textarea with these methods.... which makes me suspicious as to why my custom field extension is not working... Any more thoughts?

  4. #4
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246

    Default

    When I read your extension and when I read "Everything is working great except..." I have some doubts !! ))

    try this
    PHP Code:
    hide: {
      
    this.sIamount.hide();
      
    this.seperatorLabel.hide();


    Have you try CompositeElement ?

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Your custom component needs to fire 'blur' and 'specialkey' events (and you have to make sure - using a buffer delay? - that the blur event isn't fired when you move from the textfield to the combobox and vv.).

Similar Threads

  1. Replies: 3
    Last Post: 27 Nov 2012, 6:10 AM
  2. Custom Content Form Field Extension
    By SilveR316 in forum Ext 2.x: User Extensions and Plugins
    Replies: 7
    Last Post: 23 Mar 2010, 5:40 AM
  3. How do you make a tooltip on a link not disappear when clicked on?
    By borg in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 13 Feb 2009, 6:25 AM
  4. [2.1]Menus do not disappear when submenus are opened but not clicked
    By wm003 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 24 Apr 2008, 3:55 AM

Tags for this Thread

Posting Permissions

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