PDA

View Full Version : Ext.Net.Mobile Bottom-tabs


xauwidy
Mar 26, 2018, 10:43 AM
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
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?
fabricio.murta
Mar 26, 2018, 8:27 PM
Hello, xauwidy! And welcome to Ext.NET forums!

I see you have no viewport (http://docs.sencha.com/extjs/6.0.2/modern/Ext.Viewport.html) set up in your sample, so either add one or try adding Fullscreen="true" to your ResourceManager.

I hope this helps!
xauwidy
Mar 27, 2018, 1:51 AM
THANKS A LOT fabricio.murta
It works.