[CLOSED] Topbar

[Vasudhaika]

Hi,

i have kept <TopBar> in my panel..my panel width is 300px,in <TopBar> i have kept 9 <ext:ToolbarTextItem >...My problem is these ToolBarTextItems width is more than 300px..some of textitems are not displaying..i have kept AutoScroll=true for panel but it is scrolling vertically

<ext:Panel ID="Panel" Cls="font" AutoScroll="true" runat="server" Title="Price List" Draggable="false" Width="300px"
                                                                                       >
                                                                                        <TopBar>
                                                                                       <ext:Toolbar ID="jksdfh" runat="server" >
                                                                                      <Items>
                                                                                  <ext:ToolbarTextItem runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                      
                                                                                       <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                       <ext:ToolbarSeparator runat="server" />
                                                                                       <ext:ToolbarTextItem ID="ToolbarTextItem2" runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                                                                                       <ext:ToolbarTextItem ID="ToolbarTextItem3" runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
                                                                                       <ext:ToolbarTextItem ID="ToolbarTextItem4" runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator3" runat="server" />
                                                                                       <ext:ToolbarTextItem ID="ToolbarTextItem5" runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator4" runat="server" />
                                                                                       <ext:ToolbarTextItem ID="ToolbarTextItem6" runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator5" runat="server" />
                                                                                       <ext:ToolbarTextItem ID="ToolbarTextItem7" runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator6" runat="server" />
                                                                                       <ext:ToolbarTextItem ID="ToolbarTextItem8" runat="server" Text="kjhdgjkhdfsjkl" />
                                                                                       </Items>
                                                                                        
                                                                                                                                                                         
                                                                                       
                                                                                       
                                                                                       </ext:Toolbar>
                                                                                        </TopBar>
<body></body></ext:Panel>

[Daniil]

Hi,

I would suggest you to use a Menu if you have too many items.

Like this


This screen-shot from here
https://examples1.ext.net/#/Toolbar/Menu/Overview/

[Vasudhaika]

Hi,

I would suggest you to use a Menu if you have too many items.

Like this


This screen-shot from here
https://examples1.ext.net/#/Toolbar/Menu/Overview/

No... i can't use menu..plz solve my problem

[Vladimir]

Hi,

I am not sure what we should to resolve. Toolbar is nonescrollable component (AutoScroll affects on body only). If items are exceed toolbar width then we cannot help you. Please consider to use several toolbars (Multiple toolbar, please note that it is Ext.Net 1.0)
https://examples1.ext.net/#/Toolbar/...ayout_Toolbar/

[Vasudhaika]

Hi,

I am not sure what we should to resolve. Toolbar is nonescrollable component (AutoScroll affects on body only). If items are exceed toolbar width then we cannot help you. Please consider to use several toolbars (Multiple toolbar, please note that it is Ext.Net 1.0)
https://examples1.ext.net/#/Toolbar/...ayout_Toolbar/

some how i tried...

                      <ext:Portlet ID="PortletPricleList"   Frame="true" Shim="true"  runat="server" Title="Price List" Draggable="false"
                                                                                        Height="260">
                                                                                       <%-- <TopBar>
                                                                                    
                                                                                        </TopBar>--%>
                                                                                        <Body>
                                                                                           

                                                                                    <ext:Toolbar  Height="25" Flat="false" Cls="fonts"  ID="jksdfh" runat="server" > 
                                                                                      <Items>
                                                                                       <ext:ToolbarFill />
                                                                                    <%--  <ext:ToolbarFill Height="25"    />--%>
                                                                                  
                                                                                  <ext:Label ID="ToolbarTextItem1" Height="25" Cls="fonts"   runat="server" Text="Commodity Name" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator8" runat="server"  />
                                                                                       <ext:Label ID="ToolbarTextItem2" runat="server" Text="Unit" Cls="fonts" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                                                                                       <ext:Label ID="ToolbarTextItem3" runat="server" Text="Quantity" Cls="fonts" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
                                                                                       <ext:Label ID="ToolbarTextItem4" runat="server" Text="Rate" Cls="fonts" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator3" runat="server" />
                                                                                       <ext:Label ID="ToolbarTextItem5" runat="server" Text="Value" Cls="fonts" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator4" runat="server" />
                                                                                       <ext:Label ID="ToolbarTextItem6" runat="server" Text="kjhdgjkhdfsjkl" Cls="fonts" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator5" runat="server" />
                                                                                       <ext:Label ID="ToolbarTextItem7" runat="server" Text="kjhdgjkhdfsjkl" Cls="fonts" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator6" runat="server" />
                                                                                       <ext:Label ID="ToolbarTextItem8" runat="server" Text="kjhdgjkhdfsjkl" Cls="fonts" />
                                                                                       <ext:ToolbarSeparator ID="ToolbarSeparator7"  runat="server" />
                                                                                       <ext:Label ID="ToolbarTextItem9" runat="server" Text="kjhdgjkhdfsjkl" Cls="fonts" />
                                                                                       </Items>                                                                              
                                                                                       </ext:Toolbar>
                                                                                       <asp:Literal ID="lblPriceList" runat="server" />
                                                                                        </Body>



                                                                                        <BottomBar>
                                                                                            <ext:Toolbar ID="toolbarpriceList" runat="server">
                                                                                                <Items>
                                                                                                    <ext:ToolbarFill />
                                                                                                    <ext:LinkButton ID="btnPriceList" runat="server" Text="More Details">
                                                                                                        <Listeners>
                                                                                                            <Click Handler="addTabDashBoard(#{TabPanelDashBoard}, '51', 'Charts/Charts.aspx','Charts');" />
                                                                                                        </Listeners>
                                                                                                    </ext:LinkButton>
                                                                                                </Items>
                                                                                            </ext:Toolbar>
                                                                                        </BottomBar>
                                                                                    </ext:Portlet>

and i kept horizontal scrolling for portlet using this code PortletPricleList.AutoScroll =Convert.ToBoolean(ScrollBars.Horizontal); in page load...i applied style sheet for toolbar but it is not working..how to apply?

[Vladimir]

Hi,

I did not understand your problem in last post. Please provide more details about the issue
How the scrolling is related with toolbar? As I mentioned before, toolbar is none scrollable and AutoScroll doesn't affect on it

[Vasudhaika]

i kept scrolling for Portlet...and i kept toolbar in Portlet <body>.....scrolling problem is solved...
but my problem is how to bold or increase the size of text in Label ? inside toolbar items..
i have applied style sheet but it is not working..

[Daniil]

Hi,

Unfortunately this requirement cannot be achieved using Toolbar in 0.8.x versions of toolkit.

We can suggest the following solution.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Coolite 0.8.X Example</title>
</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" />
    <ext:Panel 
        runat="server" 
        Title="Test Panel" 
        Width="300px" 
        Height="300">
        <Body>
            <ext:Panel 
                runat="server" 
                Height="40" 
                BodyStyle="background-color: #d0def0" 
                AutoScroll="true">
                <Body>
                    <ext:TableLayout runat="server">
                        <ext:Cell>
                            <ext:Button runat="server" Text="Button1" Flat="true" />
                        </ext:Cell>
                        <ext:Cell> 
                            <ext:Button runat="server" Text="Button2" Flat="true" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Button runat="server" Text="Button3" Flat="true" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Button runat="server" Text="Button4" Flat="true" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Button runat="server" Text="Button5" Flat="true" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Button runat="server" Text="Button6" Flat="true" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Button runat="server" Text="Button7" Flat="true" />
                        </ext:Cell>
                    </ext:TableLayout>
                </Body>
            </ext:Panel>
        </Body>
    </ext:Panel>
    </form>
</body>
</html>