Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    28
    Vote Rating
    0
    sankarbaluz is on a distinguished road

      0  

    Exclamation Unanswered: ToolTip Issue in Ext Window.....

    Unanswered: ToolTip Issue in Ext Window.....


    Hi,
    I am Sankar.I am wondering to see that the tooltip that I am giving inside the Ext window is hiding.It is going back to the window.The code is working fine without a window(It works fine in formPanel).I am attaching the screenshots and code with this message.I know that the change would be made in target of the tip.But dont know what to give.Please help me out.
    Code:
    Ext.onReady(function() {
        Ext.tip.QuickTipManager.init();
        var btn = new Ext.Button({
            renderTo: Ext.getBody(),
            text:'Submit',
            handler:function(){
                new Ext.Window({
                    width:600,
                    height:500,
                    items:[formPanel]
                }).show();
            
            }
        })
        var formPanel = Ext.widget('form', {
        
            width: 350,
            bodyPadding: 10,
            title: 'Account Registration',
    
            defaults: {
                anchor: '100%'
            },
    
            /*
             * Listen for validity change on the entire form and update the combined error icon
             */
            listeners: {
                fieldvaliditychange: function() {
                    this.updateErrorState();
                },
                fielderrorchange: function() {
                    this.updateErrorState();
                }
            },
    
            updateErrorState: function() {
                var me = this,
                    errorCmp, fields, errors;
    
                if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
                    errorCmp = me.down('#formErrorState');
                    fields = me.getForm().getFields();
                    errors = [];
                    fields.each(function(field) {
                        Ext.Array.forEach(field.getErrors(), function(error) {
                            errors.push({name: field.getFieldLabel(), error: error});
                        });
                    });
                    errorCmp.setErrors(errors);
                    me.hasBeenDirty = true;
                }
            },
    
            items: [{
                xtype: 'textfield',
                name: 'username',
                fieldLabel: 'User Name',
                allowBlank: false,
                minLength: 6
            }],
    
            dockedItems: [{
                xtype: 'container',
                dock: 'bottom',
                layout: {
                    type: 'hbox',
                    align: 'middle'
                },
                padding: '10 10 5',
    
                items: [{
                    xtype: 'component',
                    id: 'formErrorState',
                    baseCls: 'form-error-state',
                    flex: 1,
                    validText: 'Form is valid',
                    invalidText: 'Form has errors',
                    tipTpl: Ext.create('Ext.XTemplate', '<ul><tpl for="."><li><span class="field-name">{name}</span>: <span class="error">{error}</span></li></tpl></ul>'),
    
                    getTip: function() {
                        var tip = this.tip;
                        if (!tip) {
                            tip = this.tip = Ext.widget('tooltip', {
                                target: this.el,
                                title: 'Error Details:',
                                autoHide: false,
                                anchor: 'top',
                                mouseOffset: [-11, -2],
                                closable: true,
                                constrainPosition: false,
                                cls: 'errors-tip'
                            });
                            tip.show();
                        }
                        return tip;
                    },
    
                    setErrors: function(errors) {
                        var me = this,
                            baseCls = me.baseCls,
                            tip = me.getTip();
    
                        errors = Ext.Array.from(errors);
    
                        // Update CSS class and tooltip content
                        if (errors.length) {
                            me.addCls(baseCls + '-invalid');
                            me.removeCls(baseCls + '-valid');
                            me.update(me.invalidText);
                            tip.setDisabled(false);
                            tip.update(me.tipTpl.apply(errors));
                        } else {
                            me.addCls(baseCls + '-valid');
                            me.removeCls(baseCls + '-invalid');
                            me.update(me.validText);
                            tip.setDisabled(true);
                            tip.hide();
                        }
                    }
                }]
            }]
        });
    
    });
    Attached Images

  2. #2
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    I'm not sure you can fix this just by using the target option, it seems quite tricky to me. I've included a potential solution below but I would suggest that this is actually not a good use for a tooltip in the first place.

    Code:
    getTip: function() {
        if (!this.tip) {
            var tip = this.tip = Ext.widget('tooltip', {
                target: this.el,
                title: 'Error Details:',
                autoHide: false,
                anchor: 'top',
                mouseOffset: [-11, -2],
                closable: true,
                constrainPosition: false,
                cls: 'errors-tip'
            });
    
            var win = this.up('window');
    
            if (win) {
                tip.mon(win, 'move', function() {
                    if (tip.isVisible()) {
                        Ext.defer(tip.show, 50, tip);
                    }
                });
            }
    
            tip.show();
        }
    
        return this.tip;
    },

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    28
    Vote Rating
    0
    sankarbaluz is on a distinguished road

      0  

    Smile Thank You Skirtle

    Thank You Skirtle


    Thank you skirtle...Now it sounds good.But Skirtle I want the event in the click of the window also,because the tooltip is hiding while clicking on the window...I modified ur code and attaching with this post..Please let me know if it is the correct way...Once again thanks for your commitment skirtle...

    Code:
    getTip: function() {
        if (!this.tip) {
            var tip = this.tip = Ext.widget('tooltip', {
                target: this.el,
                title: 'Error Details:',
                autoHide: false,
                anchor: 'top',
                mouseOffset: [-11, -2],
                closable: true,
                constrainPosition: false,
                cls: 'errors-tip'
            });
            var win = this.up('window');
            if (win) {
      tip.mon(Ext.getBody(), 'click', function() {
        if (tip.isVisible()) {
                        Ext.defer(tip.show, 50, tip);
                    }
      
      })
                /*tip.mon(win, 'move', function() {
                    if (tip.isVisible()) {
                        Ext.defer(tip.show, 50, tip);
                    }
                });*/
            }
            tip.show();
        }
        return this.tip;
    },

  4. #4
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Not convinced about listening for mouse clicks, feels like there should be a better way. I think this keeps coming back to the more fundamental issue that what you're trying to do isn't really a tooltip.

    Sticking with the clicking approach for now, I believe the following is a little neater and works for the window being moved, resized and clicked.

    Code:
    tip.mon(Ext.getBody(), 'mouseup', function() {
        if (tip.isVisible()) {
            tip.show();
        }
    }, null, {delay: 50});
    You could do with an onDestroy() too to ensure the tip is destroyed:

    Code:
    getTip: function() {
        ...
    },
    
    onDestroy: function() {
        Ext.destroy(this.tip);
        Ext.Component.prototype.onDestroy.call(this);
    },
    You've got some other issues around destruction which are beyond the scope of your original question but the one I've addressed here will ensure that the click handler doesn't cause problems when the window is closed.

  5. #5
    Sencha User
    Join Date
    May 2010
    Posts
    28
    Vote Rating
    0
    sankarbaluz is on a distinguished road

      0  

    Thumbs up Let me check skirtle...

    Let me check skirtle...


    Thank you skirtle about your suggestion.I implemented the code that you gave.Working fine for me.I am checking for any issue.Actually it is not going to the onDestroy function as you specified.Any way let me know for any issues.

    Once again thanks.....

    Regards,
    Sankar

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar