somebody can share a home page UI?

[DanielXu]

I am a freshman with web dev,somebody can share a home page UI?
Thanks a lot

[webclouder]

look at the examples.ext.net its good UI for home page [nav panel, header...] mainly all big applications i saw make use of viewport + borderlayout which give nice look and feel and cover all components required from web-design point of view [north:header, south: footer, nav panel: can goes east or west, center: body]

[DanielXu]

thanks webclouder, i creat a webappliction by ext.net demo, but i can not add a link in my home tab
See :

<ext:TreeNode Text="Jack" Icon="User" Href="WebForm1.aspx" />

it's opened in a new blank

      <ext:Panel ID="Panel2" runat="server" Region="West" Layout="AccordionLayout" Width="240" Header="false" Collapsible="true"
                Split="true" CollapseMode="Mini" Margins="0 0 4 4" Border="false">
                        <Items>
            <ext:TreePanel ID="TreePanel1" runat="server" Title="Online Users" RootVisible="false">
                <Tools>
                    <ext:Tool Type="Refresh" />
                </Tools>
                <Root>
                    <ext:TreeNode Text="Root">
                        <Nodes>
                            <ext:TreeNode Text="Friends" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Jack" Icon="User" Href="WebForm1.aspx" />
                                    <ext:TreeNode Text="Brian" Icon="User" />
                                    <ext:TreeNode Text="Jon" Icon="User" />
                                    <ext:TreeNode Text="Tim" Icon="User" />
                                    <ext:TreeNode Text="Nige" Icon="User" />
                                    <ext:TreeNode Text="Fred" Icon="User" />
                                    <ext:TreeNode Text="Bob" Icon="User" />
                                </Nodes>
                            </ext:TreeNode>
                            <ext:TreeNode Text="Family" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Kelly" Icon="UserFemale" />
                                    <ext:TreeNode Text="Sara" Icon="UserFemale" />
                                    <ext:TreeNode Text="Zack" Icon="UserGreen" />
                                    <ext:TreeNode Text="John" Icon="UserGreen" />
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Root>
            </ext:TreePanel>
            <ext:Panel ID="Panel3" runat="server" Title="Settings" />
            <ext:Panel ID="Panel4" runat="server" Title="Even More Stuff" />
            <ext:Panel ID="Panel5" runat="server" Title="My Stuff" />
        </Items>
            </ext:Panel>

[DanielXu]

thanks webclouder,i user add a new tabpanel,do we have any easy way ?

 <script type="text/javascript">
            var addTab = function(tabPanel, id, url) {
                var tab = tabPanel.getComponent(id);

                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: url,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: "iframe",
                            maskMsg: "Loading " 
                        }
                    });

                    tab.on("activate", function() {
                        var item = MenuPanel1.menu.items.get(id + "_item");

                        if (item) {
                            MenuPanel1.setSelection(item);
                        }
                    }, this);
                }

                tabPanel.setActiveTab(tab);
            }
    </script>

                         <ext:TreeNode Text="Jack" Icon="User">
                                        <Listeners>
                                    <Click Handler="addTab(#{HomeTabs}, 'idClt', 'WebForm1.aspx');" />
                                </Listeners>         
                                    </ext:TreeNode>

[webclouder]

you should pass that url to the tab js function which will assign the href to autoload-url param then the tab will be loaded by the page in iframe mode. please see the examples about tabPanel....try always to see and deeply understand examples and other posts before you implement any bit of code. just to reduce the redoing job -> Saving a lot of time!

edit: good job, no its fine. keep going, with extjs/ext.net we are always have to keep track because they keep us busy and amazed by the nice work they do.