[CLOSED] Menu Row Command - Item Hide or Disabled

**opendat2000** · Oct 21, 2014, 9: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.lastChange);
                                                                            #{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, 4:48 AM

Hi @opendat2000,

As for the first task to customize the menu, I think a PrepareToolbar is what you need.
https://examples2.ext.net/#/GridPane...epare_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/#...hod-loadRecord

**opendat2000** · Oct 22, 2014, 9: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, 4: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, 9: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, 5:20 AM

Please wrap the code in [CODE] tags, see #3 here:
More Information Required

**opendat2000** · Oct 24, 2014, 11:55 AM

Hi Daniil

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

**Daniil** · Oct 24, 2014, 5: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, 6: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, 9:04 PM

You should use

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

"App" is the default namespace.

Thread: [CLOSED] Menu Row Command - Item Hide or Disabled

Thread Tools

Search Thread

Display

[CLOSED] Menu Row Command - Item Hide or Disabled

Similar Threads

[CLOSED] Child menu item disabled on parent click

Menu Row Command - which Menu Item Clicked? (as param?)

[RAZOR] Menu Panel , Menu , Menu item not working in ext.net 2.0

[CLOSED] Icon does not hide on item hide

[CLOSED] [1.0] GridPanel Group Command (Menu Type ) show/hide on demand

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Menu Row Command - Item Hide or Disabled

[CLOSED] Menu Row Command - Item Hide or Disabled

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us