[CLOSED] How to add 2 toolbar in GridPanel TopBar?

[aditya]

Hi all,
i want to add 2 toolbar in GridPanel TopBar? but it gives error "Only one item is allowed in this Collection".

                    <TopBar>
                        <ext:Toolbar ID="extTopToolbar" runat="server">
                        </ext:Toolbar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                        </ext:Toolbar>
                    </TopBar>

[blueworld]

What about something like this? I am not sure if this is the best solution here:

            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server" Layout="FitLayout">
                    <Items>
                        <ext:Container Layout="VBoxLayout">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:Toolbar>
                                    <Items>
                                        <ext:Button />
                                        <ext:Button />
                                        <ext:Button />
                                    </Items>
                                </ext:Toolbar>
                                <ext:Toolbar>
                                    <Items>
                                        <ext:Button />
                                        <ext:Button />
                                        <ext:Button />
                                    </Items>
                                </ext:Toolbar>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Toolbar>
            </TopBar>

[Daniil]

Hi everybody,

It is better to use DockedItems.

<ext:Panel runat="server">
    <DockedItems>
        <ext:Toolbar runat="server" Dock="Top">
            <Items>
                <ext:Button runat="server" Text="Button" />
            </Items>
        </ext:Toolbar>
        <ext:Toolbar runat="server" Dock="Top">
            <Items>
                <ext:Button runat="server" Text="Button" />
            </Items>
        </ext:Toolbar>
    </DockedItems>
</ext:Panel>

Actually, TopBar is a short-hand for a top docked item.

[aditya]

thanks all for help,
i did this like

                   <TopBar>
                        <ext:Toolbar ID="Toolbar2" runat="server" Flex="1">
                            <Items>
                                <ext:Panel ID="pnl" Flex="1" runat="server">
                                    <Items>
                                        <ext:Toolbar ID="extTopToolbar" runat="server" Flex="1">
                                            <Items>
                                                <ext:Button ID="Button1" runat="server" Text="Save">
                                                </ext:Button>
                                             </Items>
                                        </ext:Toolbar>
                                        <ext:Toolbar ID="Toolbar1" runat="server" Flex="1">
                                            <Items>
                                                <ext:Button ID="Button2" runat="server" Text="update">
                                                </ext:Button>
                                             </Items>
                                        </ext:Toolbar>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>

[aditya]

hi @Daniil,
please set it's status as closed.

[Daniil]

Well, your solution is OK, but a small tip - the less controls, the better performance.

I mean that there are 4 controls (Panel and 3 Toolbars) in your solution, but just 2 (Toolbars) in mine. Well, it doesn't affect the performance in this simple example. But when the applications grows, it becomes more and more important.