PDA

View Full Version : [CLOSED] Command's HideMode is not honered during PrepareToolbar (Hiding a Command)



RCN
May 09, 2013, 7:25 PM
In the following example, when the command is hidden during PrepareToolbar event, the dimensions of the command are not maintained. It was supposed to maintain the dimensions since the Command's HideMode property is set to 'offsets'

6190

That's what sencha says about HideMode property: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.AbstractComponent-cfg-hideMode


'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.


It's possible tom reproduce the issue by mouse over the 'ODD' rows.


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var prepareToolbar = function (toolbar, record) {
var command = toolbar.items.get(0);
if (parseInt(record.raw.id) % 2 == 0) {
command.show();
}
else {
command.hide();
}
};

</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel ID="_tpnl" RootVisible="false" Title="Ext.Net" HideHeaders="true"
Height="300" Width="300" Margin="10" runat="server">
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadFakeChildren">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Task" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn1" Text="Task" DataIndex="Task" Flex="2" runat="server" />
<ext:CommandColumn ID="CommandColumn1" OverOnly="True" Width="25" MinWidth="25" MaxWidth="25"
runat="server">
<Commands>
<ext:GridCommand CommandName="abrirAplicacaoComDuplicidade" HideMode="Offsets" Icon="BulletPlus" />
</Commands>
<PrepareToolbar Handler="prepareToolbar(toolbar, record);" />
</ext:CommandColumn>
</Columns>
</ColumnModel>
</ext:TreePanel>
</body>
</html>




namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}

public StoreResult LoadFakeChildren()
{
NodeCollection nodes = new NodeCollection(false);

for (int index = 1; index < 6; index++)
{
Node node = new Node
{
NodeID = index.ToString()
};

node.CustomAttributes.Add(new ConfigItem
{
Name = "Task",
Value = ((index % 2 == 0) ? string.Format("{0} - OK", index) : string.Format("{0} - Fail - Hover me", index)),
Mode = ParameterMode.Value
});
nodes.Add(node);
}

return new StoreResult
{
Data = nodes.ToJson()
};
}
}
}

Vladimir
May 09, 2013, 7:51 PM
Maintain component (command button) dimension, not container (toolbar)
Offset hide mode moves a component out the screen therefore

You can set fixed toolbar height in prepareToolbar


toolbar.height = 22;

RCN
May 09, 2013, 8:12 PM
Sorry, i forgot to mention ways to overcome this issue.

It's also possible to overcome this issue by doing the following:


<style type="text/css">
.x-grid-componentcolumn .x-grid-cell
{
vertical-align: top;
}
</style>


I would like to know whether it's a bug and if it's gonna be 'fixed' internally by Ext.Net.

Daniil
May 14, 2013, 2:20 PM
Hi,

Vladimir meant that a GridCommand's HideMode doesn't affect on a Toolbar itself, i.e. a child's HideMode doesn't affect on a parent's one. So, seems, it is nothing to fix here.

Could you, please, clarify what exactly we should consider as a bug?

RCN
May 17, 2013, 7:54 PM
I just avoid as much as possible setting the value of properties that in my opinion should be controlled internally by the framework. But i accept this workaround since both of you said that there is no problem about setting this property. So, if you have nothing to add, please mark this thread as closed.

Once again, thank both of you

RCN
Jun 03, 2013, 3:38 PM
After updating from SVN, i found an issue regaring the height of the item when this is selected, as shown below:

6311

Daniil
Jun 03, 2013, 4:44 PM
Seems it is OK if set up RowLines="true" for the TreePanel. Could you confirm?

RCN
Jun 03, 2013, 5:06 PM
I am gonna retest. Please wait few minutes

RCN
Jun 03, 2013, 5:10 PM
Daniil, setting RowLines to true changes the control's apperance. Is there any way to overcome this issue without changing the control's appearance?

Daniil
Jun 04, 2013, 9:27 AM
Yes, I understand. I just needed a confirmation.

Please try these CSS rules.

<style>
.x-grid-componentcolumn.x-grid-no-row-lines .row-cmd-cell-ct.x-grid-cell-inner {
padding-top: 1px;
padding-bottom: 1px;
}

.x-grid-componentcolumn.x-grid-no-row-lines .x-grid-row-focused .row-cmd-cell-ct.x-grid-cell-inner {
padding-top: 0px;
padding-bottom: 0px;
}
</style>

RCN
Jun 04, 2013, 1:28 PM
The solution provided by you fixes the height of the item when this is selected, but it breaks the height of the item when the mouse is over it.


Note: Tested against the latest version from SVN (#5170).



<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var prepareToolbar = function (toolbar, record) {
toolbar.height = 22;
var command = toolbar.items.get(0);
if (parseInt(record.raw.id) % 2 == 0) {
command.show();
}
else {
command.hide();
}
};
</script>
<style type="text/css">
.x-grid-componentcolumn.x-grid-no-row-lines .row-cmd-cell-ct.x-grid-cell-inner
{
padding-top: 1px;
padding-bottom: 1px;
}

.x-grid-componentcolumn.x-grid-no-row-lines .x-grid-row-focused .row-cmd-cell-ct.x-grid-cell-inner
{
padding-top: 0px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel ID="_tpnl" RootVisible="false" Title="Ext.Net" HideHeaders="true"
Height="300" Width="300" Margin="10" runat="server">
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadFakeChildren">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Task" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn1" Text="Task" DataIndex="Task" Flex="2" runat="server" />
<ext:CommandColumn ID="CommandColumn1" OverOnly="True" Width="25" MinWidth="25" MaxWidth="25"
runat="server">
<Commands>
<ext:GridCommand CommandName="abrirAplicacaoComDuplicidade" HideMode="Offsets" Icon="BulletPlus" />
</Commands>
<PrepareToolbar Handler="prepareToolbar(toolbar, record);" />
</ext:CommandColumn>
</Columns>
</ColumnModel>
</ext:TreePanel>
</body>
</html>




namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}

public StoreResult LoadFakeChildren()
{
NodeCollection nodes = new NodeCollection(false);

for (int index = 1; index < 6; index++)
{
Node node = new Node
{
NodeID = index.ToString()
};

node.CustomAttributes.Add(new ConfigItem
{
Name = "Task",
Value = ((index % 2 == 0) ? string.Format("{0} - OK", index) : string.Format("{0} - Fail - Hover me", index)),
Mode = ParameterMode.Value
});
nodes.Add(node);
}

return new StoreResult
{
Data = nodes.ToJson()
};
}
}
}

Daniil
Jun 04, 2013, 4:35 PM
Confirm, we are investigating.

RCN
Jun 04, 2013, 4:58 PM
Thank you Daniil. Please keep me posted.

Vladimir
Jun 05, 2013, 9:51 PM
What about to use RowLines=true and the following css rule (set Cls="white-border" RowLines="true" for the tree)


.white-border .x-grid-td
{
border-bottom: 1px solid white;
}