Page 2 of 5 FirstFirst 1234 ... LastLast
Results 11 to 20 of 43

Thread: DataTip - show a complex tooltip based upon node's attributes or Record's data.

  1. #11
    Sencha User
    Join Date
    Mar 2010
    Location
    Huntsville, AL
    Posts
    21
    Vote Rating
    0
      0  

    Default

    I'm experiencing the same problem as described by senacle, has anyone found a solution for this? Thanks.

  2. #12
    Ext User
    Join Date
    Apr 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Hi,
    I am pretty new to Ext, so this may be a lame question.
    I have been trying to use this plugin for a tree, which has certain group nodes and for each group nodes there are certain member nodes. So the attributes for the group node and the member node are different, So how can i utilize this plugin to display tooltip basing on the type of the node I am in? Can I mention any "if" conditions to check the node attribute and if its length is greater than 0, then show certain markup else show something else?

    Thanks,
    Vidhur

  3. #13
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,615
    Vote Rating
    55
      0  

    Default

    OK you lazy shower.

    I'll debug your free code that you are using. It's not very difficult.

    It's a bug in Ext.Tip and Ext.ToolTip

    The showAt and show methods of those assume that the superclass.show() call has worked and shown (therefore rendering the Tip).

    The DataTip's "beforeshow" event may veto the show, in which case further operations are not needed.

    You need

    Code:
    Ext.override(Ext.Tip, {
        showAt : function(xy){
            Ext.Tip.superclass.show.call(this);
            if (this.isVisible()) {
                if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
                    this.doAutoWidth();
                }
                if(this.constrainPosition){
                    xy = this.el.adjustForConstraints(xy);
                }
                this.setPagePosition(xy[0], xy[1]);
            }
        }
    });
    
    Ext.override(Ext.ToolTip, {
         show : function(){
            if(this.anchor){
                // pre-show it off screen so that the el will have dimensions
                // for positioning calcs when getting xy next
                this.showAt([-1000,-1000]);
                this.origConstrainPosition = this.constrainPosition;
                this.constrainPosition = false;
                this.anchor = this.origAnchor;
            }
            this.showAt(this.getTargetXY());
            if (this.isVisible()) {
                if(this.anchor){
                    this.syncAnchor();
                    this.anchorEl.show();
                    this.constrainPosition = this.origConstrainPosition;
                }else{
                    this.anchorEl.hide();
                }
            }
        }
    });
    10 minutes work, and you've been hanging around waiting for me to do it for how long?

  4. #14
    Sencha User
    Join Date
    Nov 2007
    Posts
    294
    Vote Rating
    0
      0  

    Default

    I'll refrain from debugging this request so I don't inject another bug into it! hehe.

    Its minor, but the DataTip will display offscreen if the mouse over element is near the edge of the screen.

    If anyone gets bored and wants to fix this (original author included), that'd be great. I'd do it, but haven't the time for now. Maybe later.

  5. #15
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676
    Vote Rating
    9
      0  

    Default

    Animal, you never should forget that your 10 minutes debug is 10 hours for other users You are such familar with core that you know where to look and where to break.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #16
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,615
    Vote Rating
    55
      0  

    Default

    @Sessho: Configure it with

    Code:
    constrainPosition: true

  7. #17
    Ext User
    Join Date
    Apr 2007
    Posts
    38
    Vote Rating
    0
      0  

    Default

    Hi all, I applied this plugin then got an error of 'this.body is undefined' from the following code, can somebody pls help?


    Code:
    Ext.ns("Ops.setting.cmp");
    Ops.setting.cmp.xyz = Ext.extend(Ext.form.CompositeField, {
        fieldLabel: 'xyz',
        initComponent: function(){
    		this.aaa = new Ext.form.TextField({
    					flex:1,
    					tooltip:'This tip is not showing at all'
    				});
            Ext.apply(this, {
                items: [{
    					xtype:'checkbox',
    					width: 20,
    					checked: true,
    					flex:1,
    					inputValue: 1
    				},this.aaa]
            });
    		Ops.setting.cmp.xyz.superclass.initComponent.apply(this, arguments);
    	}	
    });
    Ext.reg('xyz', Ops.setting.cmp.xyz);
    
    
    
    /*!
     * Ext JS Library 3.2.1
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
    
        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'side';
    
        var bd = Ext.getBody();
    
        /*
         * ================  Simple form  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
    
    
        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
    	plugins: [new Ext.ux.DataTip()],
            items: [{
                    fieldLabel: 'xyz',
                    name: 'xyz',
                    xtype: 'xyz'
                },{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, new Ext.form.TimeField({
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
                })
            ],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        simple.render(document.body);
    
    });

  8. #18
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

    What does this have to do with DataTip?

    You want to show a tooltip on an Ext.form.TextField, but that component doesn't have a 'tooltip' config option!

    You can attach the tooptip to the el on render or you could use Animal's FieldTip plugin.

  9. #19
    Ext User
    Join Date
    Apr 2007
    Posts
    38
    Vote Rating
    0
      0  

    Default

    Tks for your input Condor. If I don't get it wrong, there's a line of comment by Animal...

    When applied to a FormPanel, this ToolTip appears when over a Field, and the Field's <code>tooltip</code> property is used is applied

    so I just install this plugin to my formpanel to test...and got error...

  10. #20
    Ext User
    Join Date
    Apr 2007
    Posts
    38
    Vote Rating
    0
      0  

    Default

    kindly bump~

Page 2 of 5 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
  •