extjs - 如何在包含树形面板的网格中添加工具提示

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'
    }
   ];


  } 
};

score 3 · Accepted Answer

我只是在我的模型中添加新字段“qtip”

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

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

    idProperty: 'id'
});

score 0 · Accepted Answer

我已经解决了这个问题，我在网格面板中这样做了，我添加了渲染侦听器，在其中我获取列标题的 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');

                }
            }
        });

score 0 · Accepted Answer

更有效的解决方案是动态获取元素 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); 
                }
            }
        });

extjs - 如何在包含树形面板的网格中添加工具提示

3 回答 3

Related

Reference