PDA

View Full Version : Ext.NET 2.0 Tabs - add button in tab bar that is always visible



anup
Jul 02, 2012, 7:47 PM
Ext.NET 2 / Ext JS 4 has a nice new tab bar that you can use with a Tab Panel. The example here shows it quite quickly and simply: http://examples2.ext.net/#/TabPanel/Basic/TabBar_Config/

One thing, however, is when adding lots of tabs, then add button can scroll out of view.

A quick fix (there might be other better solutions) involves the following (based on editing the code from the above example):

1) Give the Add button an id
2) Use that id to scroll it into view after the tab has been added.



<ext:Button runat="server" Flat="true" Icon="Add" Id="AddButton">
<DirectEvents>
<Click OnEvent="AddTab" Success="#{TabPanel1}.tabBar.layout.overflowHandler.scrollT oItem(Ext.getCmp('AddButton'));" />
</DirectEvents>
</ext:Button>


Admittedly the code might be a bit brittle; I got the idea from looking at Sencha's code on how it handle tab overflowing and setting the active tab, which used the above, so if they change their internals then the above is likely not going to work.

This is mostly a note for myself when we get to upgrade our production code to Ext.NET 2, but hopefully is useful for others!

Daniil
Aug 16, 2012, 11:13 AM
Hi Anup,

Interesting, thanks for sharing!

By the way, you can replace

Success="#{TabPanel1}.tabBar.layout.overflowHandler.scrollT oItem(Ext.getCmp('AddButton'));"
with

Success="this.up('tabbar').layout.overflowHandler.scrollToI tem(this);"

anup
Aug 16, 2012, 4:10 PM
Thanks. Yeah, since the post I've learned, and tried to use, .up() .down() etc more.

Also, not sure why I didn't use "this", though! Then it doesn't matter if the button has an id!

Thanks for those pointers!