PDA

View Full Version : Adding CheckBox inline with anchor tag in Panel Body



camus92
Mar 08, 2009, 7:52 AM
 Hi,

I'm struggling with getting the ext:Checkbox component to line up inline with a following anchor element that is meant to display a help icon. Both are contained at the end of the Body of a Panel....what precedes these controls are two fieldsets with various controls.


I've tried setting the x-form-check-wrap style to display: inline to force inline behavior, but this is having no effect. I also tried utilizing a columnlayout, but this causes errors on the page. Is there any recommended way of doing this?


This may be a discussion for another thread, but what exactly is allowed in the Body of a Panel? I have html elements mixed with fieldsets, mixed with the checkbox component and anchor tag, but adding a columnlayout into the body is apparently causing problems?

geoffrey.mcgill
Mar 08, 2009, 2:00 PM
Hi camus92,

Can you post a code quick sample demonstrating how you have these controls/tags nested? 


Within the <Body> of a Panel (Panel, Window, Tab, Fieldset, etc) you can place anything (webcontrol, html, text, etc). Or, you can add a Layout control. But, not both. 

camus92
Mar 08, 2009, 4:25 PM
 Hi Geoffrey,

Here's a snippet for the pertinent part--I should add that my page structure is rather complicated, although I don't believe it has to do with this issue:


1) An ASP .Net MasterPage
2) A ChildPage serving the contentplaceholders.
3) A borderlayout within the childpage that has a west and center panel.
4) A separate aspx page that serves as content that is loaded into the center panel using load and is set to merge.


It's within this page from #4 that this code resides (I'm leaving out the IDs for shortness' sake.




<html>

<head><title/></head>

<body>

<ext:ScriptManager runat="server" RenderScripts="none"/>

<ext:ScriptContainer runat="server""/>

<ext:Panel runat="server">

<Body>

<h1>Main Panel</h1>

<br/>

<ext:FieldSet runat="server">

<Body>

<ext:FormLayout runat="server">

<ext:Anchor>

<ext:TextField runat="server"/>

</ext:Anchor>

</ext:FormLayout>

</Body>

</ext:FieldSet>

<ext:FieldSet runat="server">

<Body>

<ext:FormLayout runat="server">

<ext:Anchor>

<ext:TextField runat="server"/>

</ext:Anchor>

</ext:FormLayout>

</Body>

</ext:FieldSet>
<ext:Checkbox runat="server"/><a href="#"><img src="..."/></a>

</Body>

<Buttons>

</Buttons>

</ext:Panel>

</body>

</html>



I figured and confirmed the checkbox is a box element, but no amount of tinkering with the stylesheet seems to force it inline with the anchor link. I also tried a column layout, but as you explained, this is not allowed within the body of a panel with other elements. I also tried adding a new panel into the body and adding a layout to that, but I got similar issues.


Thanks!


Oh....my example code doesn't seem to stay in the grey box by wrapping code tags around it, sorry

camus92
Mar 08, 2009, 4:55 PM
 Hey Geoffrey,

I've found a solution:  I believe ColumnLayouts are expecting ext controls and balk at straight html elements, is this true? I added another panel into the second columnlayout and stuck the anchor in there, and it renders.


Just out of curiousity, how much overhead is there for nesting so deeply with layouts and panels? Is it negligible to have so many ext components on the page, or something you should consider come design/dev time? I figure I could clean up the above code and instead of using a columnlayout, simply stick a good old fashioned table in the Panel's body.


Thanks!