CODEWITHSUNDEEP
javascriptextjs
neolaser
neolaser

Reputation: 6907

ExtJS mask a TreePanel without toolbar

Im trying to mask a tree panel without the toolbar so that the user can keep typing as the panel is masked. This seems to be harder than I thought so some suggestions would be great!

Although its prob not necessary, Here is my (stripped down) base tree panel:

Ext.tree.TreePanel({
    id:'quicksearch_panel',
    root:{
        nodeType:'async',   
        preloadChildren:false       
    },
    loader: new Ext.tree.TreeLoader({
        dataUrl:'...',        
        baseParams:{}       
    }),
    tbar:['Quicksearch:', {     
        xtype:'textfield',
        id:'quicksearch_combo',
        emptyText: 'search...',
        listeners:{
            keyup:{buffer:400, fn:function(field, e) {

                     // Mask Panel and not Combo HERE
                }}     
        }
    }]
});

Upvotes: 0

Views: 1973

Answers (1)

Lionel Chan
Lionel Chan

Reputation: 8079

I think you can try to mask the body of the TreePanel? The Element body is an element in all components that inherits Panel, and the Toolbar is in fact out of this body element so you probably could just mask the body, your toolbar will be out of the masking overlay.

Try this:

var tree = Ext.tree.TreePanel({
    //......
    tbar: ['Quicksearch:', {
        xtype:'textfield',
        emptyText: 'search...',
        enableKeyEvents: true, //you need this for key events
        listeners:{
            keyup:{
                buffer:400,
                fn:function(field, e) {
                     tree.body.mask();

                     //When the searching done, unmask it
                     //tree.body.unmask();
                }
            }
        }
    }]
});

Do update us if it works :)

Upvotes: 1

Related Questions