Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 973
Kliver Max Avatar asked Feb 14 '26 13:02

Kliver Max


1 Answers

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.

like image 137
egerardus Avatar answered Feb 17 '26 02:02

egerardus



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!