PDA

View Full Version : [CLOSED] Difference of Margin Margins and MarginSpec



Hlodvig
Dec 10, 2013, 11:29 PM
Couldn't find the full explanation but how exactly differs those properties and which one have precedence over another?



[Description("Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'.")]
public virtual Nullable<int> Margin {get; set;}



[Description("Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'.")]
public virtual string MarginSpec {get; set;}



[Description("Note: this config is only used when this AbstractComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses.")]
public virtual string Margins {get; set;}

So as we can see Margin is just a shortcut for setting all margins to the same value while other two are pretty the same.
Anyway, when I set Margin in Defaults to 5 and Margins to "0 0 5 5" to one of Items in the container - I still get the margins "5 5 5 5" on that item, but if I set MarginSpec of the item to "0 0 5 5" - I'll get correct margins "0 0 5 5".

And if I set Margin or MarginSpec in container's defaults - I won't get correct margins at all on the item's element.style...

Baidaly
Dec 11, 2013, 12:47 AM
Hello!



So as we can see Margin is just a shortcut for setting all margins to the same value while other two are pretty the same.


Yes, Margin and MarginSpec set one config field but in different way: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-margin . In JavaScript this variable can be string or int but .NET requires strong-typed variables, therefore we have to create to variables for one config field.

I'd suggest to use only one of them in the same time. And I'd suggest to avoid the Margins property.



And if I set Margin or MarginSpec in container's defaults - I won't get correct margins at all on the item's element.style...

I don't quite understand what defaults you mean and what's your problem. Could you clarify?

Hlodvig
Dec 11, 2013, 1:09 AM
Hi!


And I'd suggest to avoid the Margins property.

Why? I guess it's not working at all...



I don't quite understand what defaults you mean and what's your problem. Could you clarify?
I mean default parameters of items

<Defaults>
<ext:Parameter Name="Width" Value="100"></ext:Parameter>
<ext:Parameter Name="Height" Value="100"></ext:Parameter>
<ext:Parameter Name="Margin" Value="5"></ext:Parameter>
</Defaults>
If I set Margin and have

<ext:Image ID="pnlImage" runat="server" MarginSpec="0 0 5 5" Width="325" Height="215" ColSpan="3" RowSpan="2" />
All is good - the resulting div will have


element.style {
height: 215px;
margin: 0 0 5px 5px;
width: 325px;
}
But I thought - hey, why different parameters? And tried to set default parameter not Margin but MarginSpec.

<ext:Parameter Name="MarginSpec" Value="5 5 5 5"></ext:Parameter>

And I've got on the resulting div


element.style {
height: 215px;
margin: 0 0 5px 5px;
width: 325px;
}
But! On all other items I've got just

element.style {
height: 100px;
width: 100px;
}
No margin at all.

And if I use Margins on my image, not MarginSpec - I get the default margin: 5px 5px 5px 5px.

geoffrey.mcgill
Dec 11, 2013, 2:32 AM
Can you provide a simplified .aspx code sample demonstrating the whole scenario. Something we can test with.

Baidaly
Dec 11, 2013, 3:27 AM
I believe that Margins property left from ExtJS 3.x: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.BoxComponent-cfg-margins

But in Ext JS 4.x you don't need to have this field. At least I didn't find any related property.

So I tested few cases and it seems that when you use MarginSpec in the Defaults collection it doesn't affect anything, you can use MarginSpec in ASP markup:


<ext:Panel runat="server" Border="true">
<Defaults>
<ext:Parameter Name="MarginSpec" Value="10 10 10 10" />
</Defaults>
<Items>
<ext:Panel ID="Container1" runat="server" Html="Container 1" Width="100" Height="100"></ext:Panel>
<ext:Panel ID="Container2" runat="server" Html="Container 2" Width="100" Height="100"></ext:Panel>
<ext:Panel ID="Container3" runat="server" Html="Container 3" Width="100" Height="100"></ext:Panel>
</Items>
</ext:Panel>

You have to use Margin:


<ext:Panel runat="server" Border="true">
<Defaults>
<ext:Parameter Name="Margin" Value="10 10 10 10" />
</Defaults>
<Items>
<ext:Panel ID="Container1" runat="server" Html="Container 1" Width="100" Height="100"></ext:Panel>
<ext:Panel ID="Container2" runat="server" Html="Container 2" Width="100" Height="100"></ext:Panel>
<ext:Panel ID="Container3" runat="server" Html="Container 3" Width="100" Height="100"></ext:Panel>
</Items>
</ext:Panel>

If you experience any problems with this, please provide samples to reproduce.

Vladimir
Dec 11, 2013, 5:40 AM
Hi

Margins property is handled by layout (so it should be used by child items)
For example, see description of that property
http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Box-cfg-defaultMargins

Daniil
Dec 11, 2013, 6:01 AM
Margins property is handled by layout (so it should be used by child items)


A small clarification: by Box layouts (i.e. HBox, VBox, Border) and Fit layout.