Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Answers
    1
    Vote Rating
    1
    adavis2 is on a distinguished road

      0  

    Default Unanswered: Tooltip Not Updating in Tree Panel

    Unanswered: Tooltip Not Updating in Tree Panel


    I have a tree panel which displays a list of folders and the items which they contain. The folders can be locked or unlocked. Locked folders have a different icon than unlocked folders. They should also have different tooltip text. Unlocked folders will display the folder description in the tooltip, but locked folders should display who locked the folder (and when). This works perfectly when the folders are initially loaded, but if an already displayed folder is changed from unlocked to locked, the tooltip is not updated. Please note that the icon is updated immediately, and closing and reopening the parent of that folder will cause the new tooltip text to be displayed correctly.

    The tooltip comes from a non-persistent qtip field in the tree's data model:

    Code:
    Ext.define('app.FolderTreeNode', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'folderId', type: 'int', defaultValue: null},
            {name: 'parentFolderId', type: 'int'},
            {name: 'nodeName', type: 'string'},
            {name: 'nodeDescription', type: 'string'},
            {name: 'lockDateTime', type: 'string', defaultValue: null},
            {name: 'lockUserId', type: 'string', defaultValue: null},
            {name: 'leaf', type: 'bool', defaultValue: false, persist: false, 
                convert: isFolderTreeNodeLeaf},
            {name: 'qtip', type: 'string', persist: false, 
                convert: getFolderTreeNodeQtip},
            {name: 'text', type: 'string', persist: false, 
                convert: getFolderTreeNodeText},
            {name: 'icon', type: 'string', persist: false, 
                convert: getFolderTreeNodeIcon}
        ],
        
        /**
         * Assign the nonpersistent fields of this model object from the persistent 
         * fields.
         */
        assignNonpersistentFields: function() {
            this.set('qtip', getFolderTreeNodeQtip(null, {data: this.getData()}));
            this.set('icon', getFolderTreeNodeIcon(null, {data: this.getData()}));
            ...
        }
        
    });
    Here are the relevant conversion functions used by the data model:

    Code:
    function getFolderTreeNodeIcon(v, record) {
        if (record.data.lockUserId) {
            return 'resources/folder_locked.png';
        }
        return 'resources/folder_unlocked.png';
    }
    
    function getFolderTreeNodeQtip(v, record) {
        if (record.data.lockUserId) {
            return 'Locked by ' + record.data.lockUserId + ' on ' 
                    + record.data.lockDateTime;
        }
        return record.data.nodeDescription;
    }
    When a folder is toggled from unlocked to locked (or vice versa), I set the lockUserId and lockDateTime fields of the folder, then call its assignNonpersistentFields method:

    Code:
    currentFolder.set('lockUserId', result[0]);
    currentFolder.set('lockDateTime', result[1]);
    currentFolder.assignNonpersistentFields();
    As I mentioned above, the folder icon is updated immediately, but the folder's tooltip is only updated when that folder's parent is closed and reopened. What do I need to do to make the tooltip text update immediately?

  2. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    109
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    FYI: The following example works fine with Ext 4.1.1 on Chrome.
    Code:
    Ext.onReady(function() {
        Ext.tip.QuickTipManager.init();
    
    
        var store = Ext.create('Ext.data.TreeStore', {
            fields: [{
                name: 'text'
            },{
                name: 'locked', type: 'boolean', defaultValue: false
            },{
                name: 'qtip', persist: false, convert: function(v, r){
                    return r.get('locked') ? 'Locked' : 'Unlocked';
                }
            },{
                name: 'icon', persist: false, convert: function(v, r){
                    return r.get('locked') ? 'images/locked.png' : 'images/unlocked.png';
                }
            }],
            root: {
                text: 'root',
                children: [{
                    "text": "To Do", 
                    "cls": "folder",
                    "expanded": true,
                    "children": [{
                        id: 1,
                        "text": "Go jogging",
                        "leaf": true,
                        "checked": false
                    },{
                        id: 2,
                        "text": "Take a nap",
                        "leaf": true,
                        "checked": false
                    },{
                        id: 3,
                        "text": "Climb Everest",
                        "leaf": true,
                        "checked": false
                    }]
                },{
                    "text": "Grocery List",
                    "cls": "folder",
                    "children": [{
                        "text": "Bananas",
                        "leaf": true,
                        "checked": false
                    },{
                        "text": "Milk",
                        "leaf": true,
                        "checked": false
                    },{
                        "text": "Cereal",
                        "leaf": true,
                        "checked": false
                    },{
                        "text": "Energy foods",
                        "cls": "folder",
                        "children": [{
                            "text": "Coffee",
                            "leaf": true,
                            "checked": false
                        },{
                            "text": "Red Bull",
                            "leaf": true,
                            "checked": false
                        }]
                    }]
                }]      
            }
        });
    
    
        var tree = Ext.create('Ext.tree.Panel', {
            store: store,
            rootVisible: false,
            useArrows: true,
            frame: true,
            title: 'Tree Demo',
            renderTo: Ext.getBody(),
            width: 200,
            height: 250,
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Toogle lock',
                    handler: function(){
                        var node = tree.getView().getSelectionModel().getLastSelected();
                        if(node){
                            node.set({
                                locked: !node.get('locked'),
                                icon: null, qtip: null
                            });
                        }
                    }
                }]
            }]
        });
    });

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Answers
    1
    Vote Rating
    1
    adavis2 is on a distinguished road

      0  

    Default


    That example does not work with ExtJS 4.1.0 (although it does work with ExtJS 4.0.7). So I guess I will upgrade (soon) and try again. Thank you for the quick answer and complete example.
    Last edited by adavis2; 11 Sep 2012 at 6:31 AM. Reason: To give credit where credit is due.

Thread Participants: 1

Tags for this Thread

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