Results 1 to 9 of 9

Thread: Required ToolTip for the Close icon in TabPanel

  1. #1

    Default Required ToolTip for the Close icon in TabPanel

    Required ToolTip, as Close, for the Close icon in TabPanel when we set , closeable: true,

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

    Default

    Configure the TabPanel with:
    Code:
    itemTpl: new Ext.Template(
      'class="{cls}" id="{id}"><a class="x-tab-strip-close" ext:qtip="Close"></a>',
      '<a class="x-tab-right" href="#"><em class="x-tab-left">',
      '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
      '</em></a></li>'
    )

  3. #3

    Default

    Thanks for the reply.

    Here is the code I have used in bold:
    -------------------------------------
    Code:
    itemsArray[itemsArray.length] = {
                xtype: 'tabpanel',
                hideMode: 'offsets',
                region: 'center',
                id: 'mainiComtab',
                itemTpl: new Ext.Template(
                  'class="{cls}" id="{id}"><a class="x-tab-strip-close" ext:qtip="Close"></a>',
                  '<a class="x-tab-right" href="#"><em class="x-tab-left">',
                  '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
                  '</em></a></li>'
                ),
                animCollapse: Ext.isIE,
                layoutOnTabChange: true,
                activeTab: 0,
                resizeTabs: true,
                tabWidth: 165,
                minTabWidth: 165,
                enableTabScroll: true,
                animCollapse: Ext.isIE,
                monitorResize: true,
                monitorWindowResize: true,
                fitToFrame: true,
                deferredRender: false,
                items:[{xtype: 'icomHomePanel'}]
            };
    But it is giving error javascript. Please help.

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

    Default

    What kind of error?

    If you are using XHTML then you need to register the ext namespace, e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ext="http://www.extjs.com" xml:lang="en" lang="en">
    <head>
    ...

  5. #5

    Default

    Thanks for the reply.

    The Issue I am facing now,
    --------------------------

    if(!this.itemTpl){
    var tt = new Ext.Template(
    '<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;" ext:qtip="Close"></a>',
    '<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
    '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
    '</em></a></li>'
    );
    tt.disableFormats = true;
    tt.compile();
    Ext.TabPanel.prototype.itemTpl = tt;
    }
    -----------------------------------------------------------
    if I am adding the code in the bold, in the Library file : ext-all-debug.js it is working but not in the way I have posted to you. I am not using XHTML.

    Please help.

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

    Default

    Apparently, you are using a different Ext version (compare the 2 templates and notice the difference).

    Simply copy the template from your ext-all-debug file, add the qtip and use it as the itemTpl in your config.

    ps. If you want this for all TabPanels then you could also use:
    Code:
    Ext.TabPanel.prototype.itemTpl = new Ext.Template(
      '<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;" ext:qtip="Close"></a>',
      '<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
      '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
      '</em></a></li>',
      {
        disableFormats: true,
        compiled: true
      }
    );
    (put this before Ext.onReady)

  7. #7

    Default

    Using the library: Ext JS Library 3.0.0
    I cannot change the library file - ext-all-debug.js

    Here is the code I am using, in this code I want to override itemTpl:
    ----------------------------------------------------------------
    Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.QuickTips.getQuickTip().interceptTitles = true;
    Ext.QuickTips.enable();

    var itemsArray = [];
    if (IcomController.icomHome.securityConfig.leftNavAllowed) {
    this.navPanel = new clent.icom.NavPanel({
    id: 'mainIcomWest',
    region: 'west',
    closable: true,
    collapsible: true,
    split: true
    });
    itemsArray[itemsArray.length] = this.navPanel;
    }
    itemsArray[itemsArray.length] = {
    xtype: 'tabpanel',
    hideMode: 'offsets',
    region: 'center',
    id: 'mainiComtab',
    animCollapse: Ext.isIE,
    layoutOnTabChange: true,
    activeTab: 0,
    resizeTabs: true,
    tabWidth: 165,
    minTabWidth: 165,
    enableTabScroll: true,
    animCollapse: Ext.isIE,
    monitorResize: true,
    monitorWindowResize: true,
    fitToFrame: true,
    deferredRender: false,
    items:[{xtype: 'icomHomePanel'}],
    listeners:{
    'afterrender': function(){
    if(!this.itemTpl){
    alert('abcd --> ' + this.itemTpl);
    var tt = new Ext.Template(
    'class="{cls}" id="{id}"><a class="x-tab-strip-close" ext:qtip="Close"></a>',
    '<a class="x-tab-right" href="#"><em class="x-tab-left">',
    '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
    '</em></a></li>'
    );
    tt.disableFormats = true;
    tt.compile();
    Ext.TabPanel.prototype.itemTpl = tt;
    }
    }
    }

    };

    var viewport = new Ext.Viewport({
    renderTo: 'IcomHomepageDiv',
    layout: 'border',
    layoutConfig: {
    alwaysUsePctSizes: true
    },
    items:itemsArray
    });
    });
    ------------------------
    Here is code I have added in bold.

    I am right or not I dont know, Please help.

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

    Default

    Your solution doesn't work, because the default itemTpl is created when the tabpanel is rendered, so it exists and is already used before the afterrender event.

    I think you like the solution in post #6 best.

    ps. You should be calling QuickTips.init() instead of enabled().

  9. #9

    Default

    Many Many Thanks for the help it is working now.

Similar Threads

  1. How to mark a label with a required icon
    By khoivu4477 in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 22 Dec 2011, 1:12 PM
  2. Help required for Ext JS Tooltip (Ext.Tooltip)
    By shravankumar.srinivas in forum Ext 3.x: Help & Discussion
    Replies: 9
    Last Post: 1 Jun 2010, 3:13 AM
  3. How to add Icon for Required Fields in a form ?
    By pavanextjs in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 26 May 2010, 6:34 PM
  4. Close Icon (X) for MessageBox
    By majain in forum Community Discussion
    Replies: 2
    Last Post: 28 Oct 2008, 1:48 PM
  5. How can I show the required icon
    By moegal in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 Apr 2008, 4:21 PM

Posting Permissions

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