Search code examples
javascriptextjsextjs3

Scrollable tabpanel in window


I have a grid:

                            var koord_tab = new Ext.grid.EditorGridPanel({
                                title:"Координаты",
                                store: datastore,
                                region: 'center',
                                cm: cm_koord,
                                //height: 300,
                                autoScroll: true,
                                //bbar:[saveButton,cancelButton,editButton]
                            })

I have a window with tabpanel:

                             var x = new Ext.Window({
                                title:'Аттрибуты',
                                //height:390,
                                //autoWidth:true,
                                //autoHeight:true,
                                //autoScroll:true,
                                width:400,
                                listeners:{
                                    'beforeclose':function(){
                                            //app.mapPanel.map.removeLayer(myVecLayer); 

                                            for(var i=0;i<ppp.length;i++){
                                                ppp[i].deactivate();
                                            }
                                        counter=0;


                                    }
                                },items:[{
                                    xtype:'tabpanel',
                                    activeItem:0,
                                    //autoScroll: true,
                                    enableTabScroll : true,
                                    //autoHeight:true,
                                    height:340,
                                    //collapseMode: "mini",
                                    bbar:[saveButton,cancelButton,editButton],
                                    items:[ed_tab,koord_tab]  
                                }]  
                            })
                            x.show();

Question: how to make tabpanel scrollable? When I open the window, I see this: enter image description here

But when I resize the window, I see this:

enter image description here

You can see the toolbar doesn't show up. How can I make that toolbar always show, even if the window was resized?

UPDATE

I see only way to put bbar from tabpanel to window. But there is another problem: how to tabpanel and window unscrollable to have only one grid's scrollbar?

enter image description here


Solution

  • You're right to add the toolbar to the tabpanel.

    For the other problem: get rid of the height: 340 config on your tabpanel and give it a layout: 'fit' config.

    Then add another layout: 'fit' config on your gridpanel.

    That should handle it.

    Here is the fit layout in the ExtJS3 docs.