PDA

View Full Version : [CLOSED] Menu Row Command - Item Hide or Disabled



opendat2000
Oct 21, 2014, 10:00 PM
Hi Ext.net support team !!

I'm using the GridPanel control for deploy information, for each row I have added a Menu Row Command.

My problem is, How I can implement the next example:

I want to deploy only the Example 1 option, for the prices between 30 y 50.
I want to deploy the Example 2 option, for the prices between 51 y 70
I don't want to deploy/enable neither option, for the prices lower than 30.
I want to deploy all the options, for the prices higher than 70.

Continuing, to select an option open a windows Example 1 -> window 1 y Example 2 -> window 2,
my problem is, how deliver the value of the row to the controls that exist inside the windows.




<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
};

this.Store1.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Menu Row Command - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var prepare = function (grid, toolbar, rowIndex, record)
{
var theButton = toolbar.items.get(0);
var menuItem1 = theButton.menu.child("[command=Ex1]");
var menuItem2 = theButton.menu.child("[command=Ex2]");

if ((record.data.price >= 30) && (record.data.price <= 50))
{
menuItem2.setDisabled(true);
menuItem2.setTooltip("Disabled");
}
else if ((record.data.price > 50) && (record.data.price <= 70))
{
menuItem1.setDisabled(true);
menuItem1.setTooltip("Disabled");
}
else if (record.data.price < 30)
{
menuItem1.setDisabled(true);
menuItem1.setTooltip("Disabled");

menuItem2.setDisabled(true);
menuItem2.setTooltip("Disabled");
}
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Menu Row Command</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Menu Row Command"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server"
Text="Company"
Width="160"
DataIndex="company"
Flex="1" />
<ext:Column ID="Column2" runat="server"
Text="Price"
Width="75"
DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ID="Column3" runat="server"
Text="Change"
Width="75"
DataIndex="change" />
<ext:Column ID="Column4" runat="server"
Text="Change"
Width="75"
DataIndex="pctChange" />
<ext:DateColumn ID="DateColumn1" runat="server"
Text="Last Updated"
Width="85"
DataIndex="lastChange" />
<ext:CommandColumn ID="CommandColumn1" runat="server" Width="80">
<Commands>
<ext:GridCommand Icon="ArrowDown">
<Menu EnableScrolling="false">
<Items>
<ext:MenuCommand Text="Example 1" Icon="Application" CommandName="Ex1" />
<ext:MenuCommand Text="Example 2" Icon="Application" CommandName="Ex2" />
</Items>
</Menu>
<ToolTip Text="Menu" />
</ext:GridCommand>
</Commands>
<PrepareToolbar Fn="prepare" />
<Listeners>
<Command Handler="
if (command == 'Ex1')
{
#{TextFieldCompany1}.setValue(record.data.company) ;
#{TextFieldPrice1}.setValue(record.data.price);
#{Window1}.show();
}
else if (command == 'Ex2')
{
#{TextFieldCompany2}.setValue(record.data.company) ;
#{TextFieldChange2}.setValue(record.data.change);
#{TextFieldLastUpdated2}.setValue(record.data.last Change);
#{Window2}.show();
}" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
</SelectionModel>
</ext:GridPanel>

<ext:Window ID="Window1" runat="server"
Title="Example 1"
Icon="Table"
Modal="true"
Width="400"
Height="100"
Collapsible="true"
Hidden="true"
Layout="Fit" Closable="false">
<Items>
<ext:FormPanel ID="FormPanelAgregar" runat="server"
DefaultAnchor="100%"
BodyPadding="5">
<Items>
<ext:TextField ID="TextFieldCompany1" runat="server" FieldLabel="Company" ReadOnly="true" Name="Company" />
<ext:TextField ID="TextFieldPrice1" runat="server" FieldLabel="Price" ReadOnly="true" Name="Price" />
</Items>
</ext:FormPanel>
</Items>
<Tools>
<ext:Tool ToolTip="Cerrar" CustomType="my-close" Handler="owner.ownerCt.close();" Width="19" Height="19" />
</Tools>
</ext:Window>

<ext:Window ID="Window2" runat="server"
Title="Example 2"
Icon="Table"
Modal="true"
Width="400"
Height="150"
Collapsible="true"
Hidden="true"
Layout="Fit" Closable="false">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server"
DefaultAnchor="100%"
BodyPadding="5">
<Items>
<ext:TextField ID="TextFieldCompany2" runat="server" FieldLabel="Company" ReadOnly="true" Name="Company" />
<ext:TextField ID="TextFieldChange2" runat="server" FieldLabel="Change" ReadOnly="true" Name="Change" />
<ext:TextField ID="TextFieldLastUpdated2" runat="server" FieldLabel="Last Updated" ReadOnly="true" Name="LastUpdated" />
</Items>
</ext:FormPanel>
</Items>
<Tools>
<ext:Tool ToolTip="Cerrar" CustomType="my-close" Handler="owner.ownerCt.close();" Width="19" Height="19" />
</Tools>
</ext:Window>
</form>
</body>
</html>



From already thank you very much for any comments and/or observation.

Daniil
Oct 22, 2014, 5:48 AM
Hi @opendat2000,

As for the first task to customize the menu, I think a PrepareToolbar is what you need.
http://examples2.ext.net/#/GridPanel/Commands/Prepare_Toolbar/

As for delivering a row's values to the Window control, you have a record inside the Command event handler. You can always take any value from the record and put into some field (TextField, etc.).

Also I would consider a possibility to use the FormPanel's loadRecord method.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Panel-method-loadRecord

opendat2000
Oct 22, 2014, 10:37 PM
Hi Daniil !!

Reviewing the links that you sent, i don't achieved the results who I need.

I modified the code from the first post, with extracted ideas from the links but even so, I did not get what I want.

From already thank you very much for any comments and/or observation.

Daniil
Oct 23, 2014, 5:49 AM
I did not get what I want.

It would be nice if you formulate the questions what exactly you are in trouble with.

Looking at this code line

var MenuOption1 = theGridCommand.MenuButton;
I guess (guessing is much more difficult than just answering some question) that you don't know how to get menu items.

"theGridCommand" is already a Button instance. Actually, a GridCommand is a Button.

So, you can get its menu by

theGridCommand.menu

Then you could get any menu item by any way. For example,

var theGridCommand = toolbar.items.get(0),
menuItem1 = theGridCommand.menu.child("[command=Ex1]"),
menuItem2 = theGridCommand.menu.child("[command=Ex2]");

if (something) {
menuItem2.disable();
}

opendat2000
Oct 23, 2014, 10:15 PM
Thanks a lot Daniil for you collaboration and good understanding.

I modified the example code from the first post for unabled options inside the menu and this contribute to those in need.

According to your first observation

"As for delivering a row's values to the Window control, you have a record inside the Command event handler.
You can always take any value from the record and put into some field (TextField, etc.)."



<Listeners>
<Command Handler="
if (command == 'Ex1')
{
#{TextFieldCompany1}.text = record.data.company;
#{Window1}.show();
}
else if (command == 'Ex2')
{
#{Window2}.show();
#{TextFieldCompany2}.text = record.data.company;
}" />
</Listeners>


I can't put the value record.data.company inside of the textfields.

And with respect to the second observation

"Also I would consider a possibility to use the FormPanel's loadRecord method.
http://docs.sencha.com/extjs/4.2.1/#...hod-loadRecord"

I don't know how do that.

From already, thank you very much for any comments and/or observation.

Daniil
Oct 24, 2014, 6:20 AM
Please wrap the code in [CODE] tags, see #3 here:
More Information Required (http://forums.ext.net/showthread.php?10205)

opendat2000
Oct 24, 2014, 12:55 PM
Hi Daniil

I made the correction indicated in "More information Required" fot the post #6.

Daniil
Oct 24, 2014, 6:31 PM
Please use

#{TextFieldCompany1}.setValue(record.data.company) ;
instead of

#{TextFieldCompany1}.text = record.data.company;

By the way, I would recommend not to use #{} unless you really need it.



"Also I would consider a possibility to use the FormPanel's loadRecord method.
http://docs.sencha.com/extjs/4.2.1/#...hod-loadRecord"

I don't know how do that.


I would recommend to search for "loadRecord" in the Examples Explorer. It is used in some examples. Search in the sources, I mean.

opendat2000
Oct 24, 2014, 7:06 PM
Thank you for your support and comments Daniil.

You can mark this thread with CLOSED

Note: it did not work




TextFieldCompany1.setValue(record.data.company);



Saludos
Mauricio.

Daniil
Oct 24, 2014, 10:04 PM
You should use

App.TextFieldCompany1.setValue(record.data.company );

"App" is the default namespace.

opendat2000
Oct 27, 2014, 12:47 PM
Thank you for your support and comments Daniil.

Saludos
Mauricio.