The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Ext.Net.Mobile Bottom-tabs

  1. #1

    Ext.Net.Mobile Bottom-tabs

    Hello
    When i use Ext.Net.Mobile lib to construct my test app,i accord sample code do like this

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProxyMobile.Default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TabPanel runat="server" ActiveTabIndex="0" Cls="card" >
            <TabBarConfig Docked="Bottom">
                <CustomConfig>
                    <ext:ConfigItem
                        Name="platformConfig"
                        Value="{ blackberry: { ui: 'dark' } }"
                        Mode="Raw" />
                </CustomConfig>
                <LayoutConfig>
                    <ext:LayoutConfig>
                        <CustomConfig>
                            <ext:ConfigItem Name="pack" Value="center" />
                            <ext:ConfigItem Name="align" Value="center" />
                        </CustomConfig>
                    </ext:LayoutConfig>
                </LayoutConfig>
                <Defaults>
                    <ext:Parameter Name="iconAlign" Value="top" />
                </Defaults>
            </TabBarConfig>
            <Defaults>
                <ext:Parameter Name="scrollable" Value="true" Mode="Raw" />
            </Defaults>
            <Items>
                <ext:Panel
                    runat="server"
                    Title="About"
                    Layout="VBoxLayout"
                    Cls="card"
                    Html="<p>Docking tabs to the bottom will automatically change their style.</p>"
                    IconCls="x-fa fa-info-circle">
                </ext:Panel>
                <ext:Panel
                    runat="server"
                    Title="Favorites"
                    Cls="card"
                    IconCls="x-fa fa-star"
                    Html="Badges <em>(like the 4, below)</em> can be added by setting <code>badgeText</code> when creating a tab or by using <code>setBadgeText()</code> on the tab later."
                    BadgeText="4">
                </ext:Panel>
                <ext:Panel
                    ID="tab3"
                    runat="server"
                    Title="Downloads"
                    Cls="card"
                    IconCls="x-fa fa-download"
                    Html="Badge labels will truncate if the text is wider than the tab."
                    BadgeText="Overflow test">
                    <CustomConfig>
                        <ext:ConfigItem
                            Name="hidden"
                            Value="(Ext.filterPlatform('ie10') && Ext.os.is.Phone) ? true : false"
                            Mode="Raw" />
                    </CustomConfig>
                </ext:Panel>
                <ext:Panel
                    runat="server"
                    Title="Settings"
                    Cls="card"
                    Html="Tabbars are <code>ui:&quot;dark&quot;</code> by default, but also have light variants."
                    IconCls="x-fa fa-gear">
                    <CustomConfig>
                        <ext:ConfigItem
                            Name="hidden"
                            Value="(Ext.filterPlatform('ie10') && Ext.os.is.Phone) ? true : false"
                            Mode="Raw" />
                    </CustomConfig>
                </ext:Panel>
                <ext:Panel
                    runat="server"
                    Title="User"
                    Cls="card"
                    Html="<span class=&quot;action&quot;>User tapped User</span>"
                    IconCls="x-fa fa-user">
                </ext:Panel>
            </Items>
        </ext:TabPanel>
    </body>
    </html>
    Then i run it with Chrome,so i got a web like this
    Click image for larger version. 

Name:	Screen.png 
Views:	2 
Size:	11.3 KB 
ID:	25135

    Unfortunately,that tabPanel position doesn't work correctly.

    Now i'm confused how can i create a index page for my test app using ext.net.mobile lib.

    Can you help me to fix this issue plz?
  2. #2
    Hello, xauwidy! And welcome to Ext.NET forums!

    I see you have no viewport set up in your sample, so either add one or try adding Fullscreen="true" to your ResourceManager.

    I hope this helps!
  3. #3
    THANKS A LOT fabricio.murta
    It works.

Similar Threads

  1. [CLOSED] bottom tabs
    By Z in forum Mobile Premium Help
    Replies: 5
    Last Post: Nov 07, 2017, 5:58 PM
  2. Replies: 9
    Last Post: Jan 14, 2017, 8:35 PM
  3. [CLOSED] Native App with Ext.Net Mobile
    By Zdenek in forum Mobile Premium Help
    Replies: 9
    Last Post: Dec 26, 2016, 1:44 PM
  4. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 12:58 PM
  5. [CLOSED] TabPanel tabs activating differently if remove tabs
    By rnachman in forum 1.x Premium Help
    Replies: 7
    Last Post: Mar 15, 2013, 3:41 PM

Tags for this Thread

Posting Permissions