Feb 02, 2011, 4:53 PM
-
-
Feb 02, 2011, 4:58 PMThe HBoxLayout may be an option as well, although both HBoxLayout and ColumnLayout are proportional width layouts. They do not support fixed widths.
-
Feb 02, 2011, 5:01 PMAnother pro-tip here, in future threads, you might want to split things up into separate questions. You're asking a lot of questions in one thread, which makes things challenging to keep straight, follow and respond too.
Asking lots of questions is obviously fine (encouraged), but doing so in a manner which helps keep things organised and clear will benefit everyone. -
Feb 02, 2011, 5:27 PMsorry, i thought both were relevant since they are height and width issues.
Were you able to get the sample working without specifying a set height? -
Feb 02, 2011, 5:30 PM
-
Feb 02, 2011, 5:33 PM
-
Feb 02, 2011, 5:53 PMActually, this is not entirely accurate.
The HBoxLayout does support fixed widths for child BoxComponents. You can set a fixed Width on any Panel and that fixed width will be observed correctly.
If you have multiple fixed width Panels inside an HBoxLayout, one of the Panels could also be configured to use the remainder of the space available, by setting .Flex="1" on that Panel.
Hope this helps. -
Feb 02, 2011, 6:01 PMwell that seemed to work, but now i get a height issue with the HBoxLayout :-)
-
Feb 02, 2011, 6:13 PMHi,
What height issue do you have? Try to add the following config to the container
<LayoutConfig> <ext:HBoxLayoutConfig Align="Stretch" /> </LayoutConfig>
-
Feb 02, 2011, 6:24 PMHi,
I prepared for you an example with some tricks - please investigate the code and ask questions if you will have any.
This example also demonstrate how readable and clear can look the code:)
Index.aspx
HomeTab.ascx<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <asp:Content ContentPlaceHolderID="MainContent" runat="server"> <ext:ResourceManager runat="server" /> <ext:Panel runat="server"> <Items> <ext:TabPanel runat="server" Height="500"> <Items> <ext:Panel ID="homeTab" runat="server" Title="Home" Layout="fit"> <AutoLoad Url="/Home/HomeTab" NoCache="true" ShowMask="true"> <Params> <ext:Parameter Name="containerId" Value="function () { return #{homeTab}.id; }" Mode="Raw" /> </Params> </AutoLoad> </ext:Panel> <ext:Panel runat="server" Title="Another tab" /> </Items> </ext:TabPanel> </Items> </ext:Panel> </asp:Content>
HomeGrid.ascx<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <ext:Panel ID="homeTabLayoutWrapper" runat="server" Layout="hbox"> <LayoutConfig> <ext:HBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:Panel ID="homeGrid" runat="server" Flex="1" Layout="fit"> <AutoLoad Url="/Home/HomeGrid" ShowMask="true"> <Params> <ext:Parameter Name="containerId" Value="function () { return #{homeGrid}.id; }" Mode="Raw" /> </Params> </AutoLoad> </ext:Panel> <ext:Panel runat="server" Width="200" Layout="accordion"> <Items> <ext:Panel runat="server" Title="Events" Html="Events" /> <ext:Panel runat="server" Title="Photos" Html="Photos" /> </Items> </ext:Panel> </Items> </ext:Panel>
HomeController.cs part<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { Store store = this.GridPanel1.GetStore(); store.DataSource = new object[] { new object[] {"test1"}, new object[] {"test2"}, new object[] {"test3"}, new object[] {"test4"}, new object[] {"test5"}, new object[] {"test6"}, new object[] {"test7"}, new object[] {"test8"}, new object[] {"test9"} }; store.DataBind(); } } </script> <ext:GridPanel ID="GridPanel1" runat="server"> <Store> <ext:Store runat="server"> <Reader> <ext:ArrayReader> <Fields> <ext:RecordField Name="test" /> </Fields> </ext:ArrayReader> </Reader> </ext:Store> </Store> <ColumnModel runat="server"> <Columns> <ext:Column Header="Test" DataIndex="test" /> </Columns> </ColumnModel> <BottomBar> <ext:PagingToolbar runat="server" PageSize="3" /> </BottomBar> </ext:GridPanel>
public ActionResult HomeTab(string containerId) { Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo); pr.ControlToRender = "homeTabLayoutWrapper"; return pr; } public ActionResult HomeGrid(string containerId) { Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo); pr.SingleControl = true; //alternative of .ControlToRender if there is only one top control. return pr; }
Last edited by Daniil; Feb 07, 2011 at 8:38 AM.
Similar Threads
-
[CLOSED] setting column width in javascript has no effect
By GLD in forum 1.x Legacy Premium HelpReplies: 1Last Post: May 23, 2012, 1:48 PM -
Gridpanel Column width based on column content?
By Uziel in forum 1.x HelpReplies: 1Last Post: Nov 04, 2011, 8:51 AM -
[CLOSED] Content Gridpanel does not resize back to a full width
By deejayns in forum 1.x Legacy Premium HelpReplies: 3Last Post: Apr 28, 2011, 12:32 PM -
Gridpanel in Tab iframe - width not setting correctly
By Tbaseflug in forum 1.x HelpReplies: 0Last Post: May 14, 2009, 10:11 PM -
[CLOSED] User Control width within ColumnLayout
By Steve in forum 1.x Legacy Premium HelpReplies: 2Last Post: May 13, 2009, 5:08 AM