search field disappear

[dario]

Hello

I'm converting my web app from ext 2.2 to ext3.0 (rc 1.1), it was quite easy but I have this problem: in the west panel of my viewport I have an accordion layout with a tree in each panel. Each trees has a toolbar with a searchfield (http://extjs.com/deploy/ext-3.0-rc1/...SearchField.js) and some simple buttons.

The tree on the first panel (which is expanded at the beginning) is correctly rendered but when I expand the other panel of the accordion, the second tree is shown but the searchfield in its toolbar is not displayed (the buttons are shown).

I tried to set hideMode="offsets" or call doLayout on "show" but nothing changed.
If I use vbox layout instead of accordions both the searchfield are correctly shown; all my code did perfectly work on ext2.2

Any hint?
Thanks in advance

[[email protected]]

can you provide your code?

[dario]

Yes,
My code is much longer and full of irrelevant data...the relevant snippets are below.

Toolbar and tree (both trees have similar configuration), only their stores are different

myTree =  Ext.extend(  Ext.Panel , {   

    initComponent: function (  ) 
    {
          this.tbar = new Ext.Toolbar ({
                items   : [
                        new Ext.app.SearchField({
                        width           : 190 ,
                        store: this.ds
                    }), 
              {    text        : "",   
                    icon        : WebRoot + 'content/images/default/layout/ns-collapse.gif',
                    handler     : function(){ this.tree.collapseAll(); }.createDelegate(this)
                },{
                   text        : "", 
                    icon        : WebRoot + 'content/images/default/layout/ns-expand.gif',
                    handler     : function(){ this.tree.expandAll(); }.createDelegate(this)
                },{
                    text        : "",  
                    iconCls     : "icon-showAll",
                    handler     : this.hideAllPushpins.createDelegate(this)
                }] 
            })
         
        //init the tree
        this.tree = new Ext.tree.TreePanel({
            animate         : true, 
            rootVisible     : false,
            enableDD        : true,
            preloadChildren : true,
            stateful        : true,
           containerScroll : true,      
            dragConfig      : { hlColor:'#fff' },
            allowContainerDrop  : false, 
            allowParentInsert   : false ,
            appendOnly          : true,
            tbar: this.tbar
        });
}) 

Viewport:

this.northPanel = new Ext.Panel({ region: 'north', border: true, contentEl: 'header', height: 50 });
        
this.westPanel = new Ext.Panel({ region: 'west',   id: 'westPanel', split: true, width: 300, border: true, layoutConfig: { renderHidden:true },
            collapsible: true, titlebar: false, minSize: 300, maxSize: 400, title: ' ', layout:   'accordion'
        });

         this.southPanel = new Ext.Panel({ region: "south", id: 'southPanel', title: " ", height: 160, split: true, collapsible: true,
            titleCollapse: true, collapsed: true, cmargins: '0 0 0 0', minSize: 120, maxSize: 300, layout: 'fit',
            items: new Ext.TabPanel({})
        });
      
        this.mapPanel = new Ext.Panel ({ region: "center", contentEl: 'centerPanelDiv', split: true });
                
      
        this.centerPanel = new Ext.Panel({ layout: 'border', region: "center", border: true,
            items: [this.mapPanel, this.southPanel]
        });

  this.mainPanel = new Ext.Panel({ region: "center", layout: "fit", 
            items: [{
                layout: "border",
                items: [this.centerPanel,  this.westPanel ]
            }]
        });

        mapViewPort = new Ext.Viewport({
            layout: 'border',
            items: [this.northPanel, this.mainPanel]
        });

//ContactTree and PlacemarkTree are extensions of ext.panel which contains one tree as defined above 

        contactTree = new  myTree ();
        placemarkTree = new myTree ();
        
        this.westPanel.insert(0, contactTree.tree);
        this.westPanel.insert(1, placemarkTree.tree);
        contactTree.tree.expand();
        this.westPanel.doLayout(); 

[Condor]

Unfortunately hideMode:'offsets' doesn't work for Accordion layout (see bugreport).

But that doesn't explain why it does work on Ext 2.2...

[[email protected]]

Have you tried abstracting the component into a vanilla page to see where the problem is?

[dario]

Unfortunately hideMode:'offsets' doesn't work for Accordion layout (see bugreport).

But that doesn't explain why it does work on Ext 2.2...

With Ext2.2 I did not change hideMode (which therefore has the default value) and I got no problems at all

[dario]

Have you tried abstracting the component into a vanilla page to see where the problem is?

I will asap. Thanks!

[dario]

I just created a simple page with essential elements to see the problem with the toolbar of the collapsed panel.

The page is here:
http://www.get2getr.com/test.html

As you can see there's no search field displayed in the tree 2.
Any idea?!

[dario]

....really, no ideas? :|

[oliverseitz]

did u solve your problem with this search function?

I have the same problem...
no error at debug, but also no searchbox, no search button shown...

any ideas???

....really, no ideas? :|