如何在包含樹型面板的網格中添加工具提示

Question

您好我在過去兩週在互聯網上搜索這個問題，但找不到解決方案。我幾乎嘗試過所有的事情，但都沒有成功

下面是代碼：

ContractsTree = function() { 
    this.labels  = $W.LANGUAGE.labels.customerView.contractTab.contractsTree; 
    this.sizeHelper = $W.SIZEHELPER; 
    this.initColumns(); 


    var fields = [ { name: "number", mapping:"number"}, 
        { name: "description", mapping:"description", convert: this.fullDesc_renderer}, 
        { name: "products", mapping:"products"}, 
        { name: "isBarred", mapping:"isBarred"}, 
        { name: "status", mapping:"status"} 
       ]; 


    var store = new Ext.data.JsonStore({ 
     fields  :  fields, 
     root  :  "contractProductService", 
     totalProperty:  'contractProductsTotalCount', 
     url: Customer_JSON_URL+'?method=getPageForContractServiceProductGrid' 
    }); 

    this.pagingBar = new Ext.PagingToolbar({ 
     pageSize: $W.productServicePageSize, 
     store: store, 
     displayInfo: true, 
     displayMsg: 'Angezeigte Treffer {0} - {1} von {2}', 
     emptyMsg: "Keine Treffer" 
    }); 

    this.pagingBar.on('change', this.loadNewPage, this); 

    this.tree = new Ext.tree.ColumnTreePanel({ 
     width  : this.sizeHelper.tabRowWidth - 20, 
     height  : 550, 
     rootVisible : false, 
     autoScroll : true, 
     animCollapse: false, 
     animate  : false, 
     header  : false, 
     columns  : this.columns, 
     root  : new Ext.tree.TreeNode("root"), 
     bbar  : this.pagingBar, 
     trackMouseOver: false, 
     listeners: { 
      contextmenu : { 
       fn: this.onContextMenu, 
       scope: this 
      },     
      dblclick : { 
       fn: this.navigateWizzardToDetails, 
       scope: this 
      } 
     } 
    }); 

    // was PID 90783 but it's not supported within the scope of the FDD! 
    // we should disable the keybord navigation at all. 
    //this.tree.getSelectionModel().on("selectionchange",this.handleSelectionChange,this); 


    //this.tree.on('headerclick', this.sort, this);   

    var gridColumns = [ { 
        header  : "", //this.labels.contract.description, 
        width  : 300, 
        dataIndex : 'description' 
        },{ 
        header  : "", //this.labels.contract.description, 
        width  : 300, 
        dataIndex : 'products' 
        }];   

    this.grid = new Ext.grid.GridPanel({ 

              store  : store, 
              columns  : gridColumns, //gridColumns 
              bbar  : this.pagingBar, 
              hidden  : true 
              //height : 200 

             }); 

    this.panel = new Ext.form.FieldSet({ 
     title : this.labels.boxTitle, 
     width : this.sizeHelper.tabRowWidth, 
     autoHeight: true, 
     items: [{ 
      items: [this.tree, this.grid], 
      border: false 
     }] 
    }); 
    }; 

    ContractsTree.prototype = { 
labels  : null, 
sizeHelper : null, 
columns  : null, 
panel  : null, 
    tree  : null, 
    refAccountS : null, 
    lastSortDir : null, 

    sort: function(obj, index) { 
    if (index == 0) { 
     var sortDir = 'DESC'; 
     if (this.lastSortDir && this.lastSortDir == 'DESC') { 
      sortDir = 'ASC'; 
      obj.className = "x-tree-hd sort-asc-tree"; 
     } else { 
      obj.className = "x-tree-hd sort-desc-tree"; 
     } 

     this.lastSortDir = sortDir; 
     this.grid.store.sort("description", sortDir); 
    } 
}, 

handleSelectionChange: function (selModel, treeNode) { 

    var cs = treeNode.ownerTree.getTreeEl().dom.scrollTop; 
    var top = treeNode.ui.wrap.getBoundingClientRect().top; 

    var tDif = 560 - top; 

    if (tDif < cs) { 
     treeNode.ownerTree.getTreeEl().dom.scrollTop = cs +20; 
    } else if (tDif > 485) { 
     treeNode.ownerTree.getTreeEl().dom.scrollTop = cs -20; 
    } 

}, 

navigateWizzardToDetails: function(node, e) { 
    if (!$W.isPrivExist("CRMC_WIZ_CONTRACT_NAV")) { 
     return; 
    } 

    if (!$W.CitrixActiveX.IsConnected()){ 
     $W.VIEWSMGR.pushError(this.labels.citrixNotStarted); 
     return; 
    } 

    var refA; 
    var contract; 

    if(node.getDepth() == 1){ 
     if(node.hasChildNodes){ 
      //refA = node.firstChild.attributes.refAccount; 
      contract = node.attributes.contract; 
     } 
    } 

    if(node.getDepth() == 2){ 
     //refA = node.attributes.refAccount; 
     contract = node.parentNode.attributes.contract; 
    } 

    if(node.getDepth() == 3){ 
     //refA = node.parentNode.attributes.refAccount; 
     contract = node.parentNode.parentNode.attributes.contract; 
    } 

    if(contract){ 
     contract = contract.slice(0,contract.indexOf("-")-1);  
     this.navigateWizzardToDetailsCall(contract); 
    } 
}, 

ajaxCallback : function(options, success, response) { 
    try { 
     $W.ShowTabById("CustomerTab"); 
     $W.VIEWSMGR.unlockWizardTabWithCounter(); 
     if (success) { 
      if(response.responseText) 
      { 
       var respData = Ext.decode(response.responseText); 

       $W.VIEWSMGR.handleError(respData); 

       if (respData.errorCode != null && respData.errorCode != 0) { 
         //nothing to do 
       } else { 
        $W.ShowTabById("WizardTab"); 
       } 
      } 
     } else { 
      $W.VIEWSMGR.pushError(response); 
     } 
    } catch(ex) { 
     debugger; 
    } 
    $W.CUSTOMERVIEW.panel.enable(); 
}, 

navigateWizzardToDetailsCall: function(contractNumber) { 

    if ($W.CUSTOMERVIEW.isDetailSearchRunning()) { 
     // don't allow because of search! 
     Ext.jacada.Msg.alert($W.LANGUAGE.labels.contractData.searchRunning); 
     return; 
    } 

    $W.customerDetailSearchWasCanceled = true; 
    $W.clearDetailsSearchTimeout(); 

    $W.VIEWSMGR.lockWizardTabWithCounter(); 

    $W.CUSTOMERVIEW.panel.disable(); 

    var req = new Object(); 
    req.action = "navigateWizardsToContracts"; 
    req.contractNumber=contractNumber; 

    $W.requestManager.addRequest(Customer_JSON_URL, req, this.ajaxCallback, this, $W.LANGUAGE.labels.contractData.waitMsg); 
}, 

onContextMenu : function(node, e) { 
    var refA; 
    var contNum; 
    this.refAccount = null; 
    this.liableRefAcc = null; 
    this.contractNumber = null; 

    try { 
     this.tree.getSelectionModel().select(node); 
    } catch (exe) {} 

    if(node.getDepth() == 1){ 
     if(node.hasChildNodes()) 
      if(node.firstChild.attributes) { 
       refA = node.firstChild.attributes.refAccount; 
       contNum = node.attributes.number; 
      } 
    } 

    if(node.getDepth() == 2) { 
     refA = node.attributes.refAccount; 
     contNum = node.parentNode.attributes.number; 
    } 

    if(node.getDepth() == 3) { 
     refA = node.parentNode.attributes.refAccount; 
     contNum = node.parentNode.parentNode.attributes.number; 
    } 

    this.refAccount = refA; 
    this.contractNumber = contNum; 

    if(this.refAccount){ 
     if (!this.contextMenu) { 
      this.contextMenu = new Ext.menu.Menu({ 
       id: 'customerActivityGridCtxMenu', 
       shadow : false, 
       items: [{ 
        text : this.labels.liablemenu, 
        handler : function() { 
         debugger; 
         var index = $W.CUSTOMERVIEW.tabPanel.customerTab.contractGrid.store.find("number", this.contractNumber); 
         if (index != -1) { 
          var element = $W.CUSTOMERVIEW.tabPanel.customerTab.contractGrid.store.getAt(index); 
          if (element) { 
           this.liableRefAcc = element.data.liable; 
          } 
         } 
         this.getLiableReferenceAccountDetails(); 
        }, 
        scope:this 
       },{ 
        text : this.labels.menu, 
        handler : function() { 
         this.getReferenceAccountDetails(); 
        }, 
        scope:this 
       }] 
      }); 

     } 

     e.stopEvent(); 
     var xy = e.getXY(); 
     this.contextMenu.showAt(xy); 
    } 
}, 

adjustAccountNumberPart: function (accountNumber) { 
    if(accountNumber.length > 4){ 
     accountNumber = accountNumber.split('-'); 
     accountNumber = accountNumber[0]; 
    } 

    return accountNumber; 
}, 

getLiableReferenceAccountDetails: function() { 
    this.contextMenu.hide(); 

    // If Different customer then put status message for leaving current users context 
    if(!$W.isPrivExist('CRMC_LOAD_OTHER_CUST') && this.liableRefAcc && this.liableRefAcc.length > 0){ 
     if($W.CUSTOMERVIEW.getCustomerId() != this.adjustAccountNumberPart(this.liableRefAcc)){ 
      $W.VIEWSMGR.clearStatusBar(); 
      $W.VIEWSMGR.pushFrontendError("5148", $W.errorCode5148, this.labels.aktion); 
      return; 
     } 
    } 

    $W.customerDetailSearchWasCanceled = true; 
    $W.clearDetailsSearchTimeout();  

    $W.ShowTabById("ReferenceAccountDetailsTab"); 
    $W.REFERENCEACCOUNTDETAILSPANEL.callLiableService(this.refAccount); 
}, 

getReferenceAccountDetails: function() { 
    this.contextMenu.hide(); 

    $W.customerDetailSearchWasCanceled = true; 
    $W.clearDetailsSearchTimeout(); 

    $W.ShowTabById("ReferenceAccountDetailsTab"); 
    $W.REFERENCEACCOUNTDETAILSPANEL.callService(this.refAccount,true); 
}, 

updateData: function(data) {   
    if (data){ 
     var element_data = '{"Belegezahlungen":[]}'; 
     if (data != null) element_data = data;     
     this.grid.store.loadData(element_data);  
     this.pagingBar.enable(); 
    } else { 
     try { // Reset any sorting 
      this.pagingBar.disable(); 
      this.grid.getView().updateHeaders(); 
      delete this.grid.store.sortInfo;  
      this.grid.store.removeAll(); 
      var root = this.tree.getRootNode(); 

      // Remove all children of the root node. 
      while (root.hasChildNodes()) { 
       root.removeChild(root.item(0)); 
      } 
     } catch (e) {} 
    } 

}, 

loadTree: function(data) { 
    var root = this.tree.getRootNode(); 

    // Remove all children of the root node. 
    while (root.hasChildNodes()) { 
     root.removeChild(root.item(0)); 
    } 


    if (data == null || typeof(data) == "undefined" || typeof(data.contractProductService) == "undefined") { 
     return; 
    } 

    var contractNodesArr= new Array();   
    var contracts  = data.contractProductService; 

    var barredContracts = {}; 
    var hasBarredContracts = false; 

    for (var i = 0; i < contracts.length; i++) { 
     var contractData = contracts[i]; 
     contractData.uiProvider  = Ext.tree.ColumnNodeUI; 
     contractData.contract  = contractData.description; 
     contractData.description = ''; // Avoid mixup with the service 'description' field 
     contractData.text   = contractData.contract; 
     contractData.id = "_c" + i;    

     if (contractData.isBarred) { 
      hasBarredContracts = true; 
      barredContracts[contractData.number] = true; 
      contractData.cls = "barredService"; 
     } 
     var contractNode = new Ext.tree.TreeNode(contractData); 
     //contractNode.expanded = true; 

     var products = contractData.products; 
     for (var j = 0; j < products.length; j++) { 
      var productData = products[j]; 
      productData.type = undefined; 
      productData.categorie = undefined; 
      productData.additional = undefined; 
      productData.uiProvider = Ext.tree.ColumnNodeUI; 
      productData.id = contractData.id + "_p" + j; 
      if (productData.productDescriptionUrl!=null && productData.productDescriptionUrl!=""){ 
       productData.href=productData.productDescriptionUrl; 
       productData.hrefTarget = "_blank"; 
       productData.cls= "jacada_tree_url"; 
      } 
      productData.text = productData.productDescription; 

      var productNode = new Ext.tree.TreeNode(productData); 
      //productNode.expanded = true; 

      contractNode.appendChild(productNode); 

      var services = productData.services; 
      for (var n = 0; n < services.length; n++){ 
       var serviceData = services[n]; 

       // Ohad: Check if this service is barred. 
       // IT is barred if the 'additional' field contains 'Vollsperre' or 'Teilsperre'. 
       // To be on the safe side, we will convert all to lowercase before comparing. 
       var statusStr = serviceData.status.toLowerCase();      

       serviceData.uiProvider = Ext.tree.ColumnNodeUI; 
       serviceData.id = productData.id + "_s" + n; 
       if(serviceData.serviceDescriptionUrl!=null && serviceData.serviceDescriptionUrl!=""){ 
        serviceData.href=serviceData.serviceDescriptionUrl; 
        serviceData.hrefTarget = "_blank"; 
        serviceData.cls= "jacada_tree_url"; 
       } 
       serviceData.text = serviceData.description; 
       var serviceNode = new Ext.tree.TreeNode(serviceData); 
       productNode.appendChild(serviceNode); 
      }   
     } 
     contractNodesArr.push(contractNode); 
    } 

    if (hasBarredContracts) { 
     $W.CUSTOMERVIEW.tabPanel.customerTab.contractGrid.updateBarringInfo(barredContracts); 
    } 

    root.appendChild(contractNodesArr); 
    root.expand();  
    root.expandChildNodes(false); 

    this.tree.getTreeEl().scroll("top", this.tree.getTreeEl().getScroll().top, false);   

    // Scrolling to right - aparently to overcome etxjs scrolling bug. 
    this.tree.getTreeEl().scroll("right", this.tree.getTreeEl().getScroll().left, false);   
}, 

loadNewPage: function() { 
    var arr = new Array(); 
    var i = 0; 
    this.grid.store.each(function(store){ 
     arr[i] = store.data; 
     i++; 
    }); 

    var obj = new Object(); 
    obj["contractProductService"] = arr; 
    this.loadTree(obj); 

},  

fullDesc_renderer: function(value, rec) { 
    return rec.number + ' - ' + value; 
}, 

initColumns: function() { 
    this.columns = [ 
     { 
      header  : "&nbsp;", //this.labels.contract.description, 
      width  : 300, 
      dataIndex :'contract', 
      sortable : false 
     },{ 

      header  : this.labels.product.price, 
      tooltip  : this.labels.product.price, 
      //renderer : Ext.util.Format.CurrencyValue, 
      width  : 80, 
      align  : 'right', 
      dataIndex :'price' 

     }, 

    { 
      id   : 'bruttPrice', 
      header  : this.labels.product.bruttPriceTooltip, 
      width  : 80, 
      align  : 'right', 
      dataIndex :'bruttPrice' 
      //tooltip  : this.labels.product.bruttPriceTooltip 
      /* listeners : { 

       render: function() { 
        var tip = Ext.create('Ext.tip.ToolTip', { 
         target: bruttPrice , 
         html: 'test text' 
         }); 
        return tip; 
       } 
       }*/ 


    }, 
    { 
     header  : this.labels.product.refAccount, 
     tooltip  : this.labels.product.refAccount, 
     width  : 55, 
     dataIndex :'refAccount' 
    },{ 
     header  : this.labels.product.connection, 
     tooltip  : this.labels.product.connection, 
     width  : 60, 
     dataIndex :'connection' 
    },{ 
     header  : this.labels.product.promotion, 
     tooltip  : this.labels.product.promotion, 
     width  : 80, 
     dataIndex :'promotion' 
    },{ 
     header  : this.labels.product.start, 
     tooltip  : this.labels.product.start, 
     width  : 80, 
     dataIndex :'start' 
    },{ 
     header  : this.labels.product.end, 
     tooltip  : this.labels.product.end, 
     width  : 80, 
     dataIndex :'end' 
    },{ 
     header  : this.labels.product.count, 
     tooltip  : this.labels.product.count, 
     width  : 50, 
     align  : 'right', 
     dataIndex :'count' 
    },{ 
     header  : this.labels.product.status, 
     tooltip  : this.labels.product.status, 
     width  : 160, 
     dataIndex :'status' 
    },{ 
     header  : this.labels.service.type, 
     tooltip  : this.labels.service.type, 
     width  : 85, 
     dataIndex :'type' 
    },{ 
     header  : this.labels.service.category, 
     tooltip  : this.labels.service.category, 
     width  : 90, 
     dataIndex :'categorie' 
    },{ 
     header  : this.labels.service.addition, 
     tooltip  : this.labels.service.addition, 
     width  : 800, 
     dataIndex :'additional' 
    } 
    ]; 


    } 
}; 

Answer 1

更高效的解決方案是動態獲取元素ID。

this.grid = new Ext.grid.GridPanel(
     { 

      store : store, 
      columns : gridColumns, //gridColumns 
      bbar : this.pagingBar, 
      hidden : true, 
      //height : 200 
      listeners : { 

       render : function() { 
        debugger; 

        function getElementByAttributeValue(attribute, value) 
        { 
         var allElements = document.getElementsByTagName('*'); 
         for (var i = 0; i < allElements.length; i++) 
         { 
         if (allElements[i].getAttribute(attribute) == value) 
         { 
          return allElements[i]; 
         } 
         } 
        } 

        var el = getElementByAttributeValue('innerText', 'Preis Brutto'); 
        el.setAttribute(
          'title', 
          bruttPriceTooltip); 
       } 
      } 
     }); 

Answer 2

我已經解決了這個問題，我在網格面板中我添加監聽器的渲染中，我得到了列標題的HTML元素的ID和設置做了這樣的其'標題'屬性。

this.grid = new Ext.grid.GridPanel(
     { 

      store : store, 
      columns : gridColumns, //gridColumns 
      bbar : this.pagingBar, 
      hidden : true, 
      //height : 200 
      listeners : { 

       render : function() { 
        debugger; 
        var el= document 
          .getElementById("ext-gen740") 
          .setAttribute(
            'title', 
            'Your tooltip text here'); 

       } 
      } 
     }); 

Answer 3

我只是在我的模型添加新字段「qtip」

Ext.define('Internet.model.document.Headline', { 
    extend: 'Ext.data.Model', 

    fields: [{ 
     name: 'id' 
    }, { 
     name: 'text' 
    }, { 
     name: 'qtip', 
     mapping: 'text' 
    }], 

    idProperty: 'id' 
});