[CLOSED] Enable and disable the controls in particular sequence

  1. #1

    [CLOSED] Enable and disable the controls in particular sequence

    Hi,

    I need to populate the grid with data (in the example, 3 records).

    At first viewing it should only be enabled the first "NumberField", one corresponding to Record 0 ... while the other two "NumberField" should be disabled.

    When I change the value of the first "NumberField" and this reaches its maximum value "Value = MaxValue", I must enable the second "NumberField" and disable the first.

    When I change the value of secndo "NumberField" and this reaches its maximum value "Value = MaxValue", should enable the third "NumberField" and disable the second.

    and so on...

    What is the best way to implement this working?

    <%@ Page Language="vb" %>
    
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        
            If (Not Ext.Net.X.IsAjaxRequest) Then
                Dim Data As New List(Of Object)
                
                Data.Add(New Object() {"Desc 1", 1, 4})
                Data.Add(New Object() {"Desc 2", 2, 6})
                Data.Add(New Object() {"Desc 3", 3, 8})
                
                GridPanel1.GetStore().DataSource = Data
                GridPanel1.GetStore().DataBind()
            End If
        End Sub
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Description" />
                                    <ext:ModelField Name="Quantity" />
                                    <ext:ModelField Name="MaxQuantity" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Description" DataIndex="Description" />
                        <ext:ComponentColumn runat="server" Text="Max quantity" DataIndex="Quantity" >
                            <Component>
                                <ext:NumberField runat="server" ID="NumberFieldQuantita" MinValue="0" />
                            </Component>
                            <Listeners>
                                <BeforeBind Handler="e.config[0].value = e.record.data.Quantity; e.config[0].maxValue = e.record.data.MaxQuantity"/>
                            </Listeners>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Oct 06, 2015 at 11:24 AM. Reason: [CLOSED]
  2. #2
    Hi @Mario,

    I would implemented it in the following way.

    Example
    <%@ Page Language="vb" %>
    
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        
            If (Not Ext.Net.X.IsAjaxRequest) Then
                Dim Data As New List(Of Object)
                
                Data.Add(New Object() {"Desc 1", 1, 4, False})
                Data.Add(New Object() {"Desc 2", 2, 6, True})
                Data.Add(New Object() {"Desc 3", 3, 8, True})
                
                GridPanel1.GetStore().DataSource = Data
                GridPanel1.GetStore().DataBind()
            End If
        End Sub
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var onBeforeBind = function (componentColumn, e) {
                e.config[0].maxValue = e.record.data.MaxQuantity;
                e.config[0].disabled = e.record.data.Disabled;
            };
    
            var onEdit = function (componentColumn, e) {
                var nextRecord;
    
                if (e.value === e.record.data.MaxQuantity) {
                    e.record.data.Disabled = false;
                    e.cmp.disable();
                    nextRecord = e.grid.getStore().getAt(e.rowIdx + 1);
    
                    if (nextRecord) {
                        nextRecord.set("Disabled", false);
                    }
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Description" />
                                    <ext:ModelField Name="Quantity" />
                                    <ext:ModelField Name="MaxQuantity" />
                                    <ext:ModelField Name="Disabled" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Description" DataIndex="Description" />
    
                        <ext:ComponentColumn runat="server" Text="Max quantity" DataIndex="Quantity" Editor="true">
                            <Component>
                                <ext:NumberField runat="server" ID="NumberFieldQuantita" MinValue="0" />
                            </Component>
                            <Listeners>
                                <BeforeBind Fn="onBeforeBind"/>
                                <Edit Fn="onEdit" />
                            </Listeners>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Thanks Daniil,
    your solution works.

    But I'd need to enable / disable the "NumberField" without generating postback on page... because this generates an annoying page refresh and clears the contents of "IsDirty".

    So instead of using this code...
    e.grid.getStore().getAt(e.rowIdx + 1).set("Disabled", false);
    ...I would use this code
    e.grid.getStore().getAt(e.rowIdx + 1).data.Disabled = false;
    But how can I access the individual controls "NumberField" of each line?
  4. #4
    No postback occurs in my example. Is something triggering it on your page?

    But how can I access the individual controls "NumberField" of each line?
    In this way:
    App.ComponentColumn1.getComponent(rowIndex)
  5. #5
    Yes, it is true Daniil, you have not raised a postback but the your solution resets the list of changed records.
    I must access to the list of changed records and so I can not use the Set method proposed by you.

    As regards the use of

    App.ComponentColumn1.getComponent (rowIndex)
    to enable and disable the "NumberField" can you write me an example?
  6. #6
    It is just a couple of slight changes in my initial example.

    Example
    <%@ Page Language="vb" %>
    
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        
            If (Not Ext.Net.X.IsAjaxRequest) Then
                Dim Data As New List(Of Object)
                
                Data.Add(New Object() {"Desc 1", 1, 4, False})
                Data.Add(New Object() {"Desc 2", 2, 6, True})
                Data.Add(New Object() {"Desc 3", 3, 8, True})
                
                GridPanel1.GetStore().DataSource = Data
                GridPanel1.GetStore().DataBind()
            End If
        End Sub
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var onBeforeBind = function (componentColumn, e) {
                e.config[0].maxValue = e.record.data.MaxQuantity;
                e.config[0].disabled = e.record.data.Disabled;
            };
    
            var onEdit = function (componentColumn, e) {
                var nextRecord;
    
                if (e.value === e.record.data.MaxQuantity) {
                    e.record.data.Disabled = false;
                    e.cmp.disable();
                    nextRecord = e.grid.getStore().getAt(e.rowIdx + 1);
                    
                    if (nextRecord) {
                        nextCmp = componentColumn.getComponent(nextRecord);
                        nextCmp.enable();
                        nextRecord.data.Disabled = false;
                    }
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Description" />
                                    <ext:ModelField Name="Quantity" />
                                    <ext:ModelField Name="MaxQuantity" />
                                    <ext:ModelField Name="Disabled" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Description" DataIndex="Description" />
    
                        <ext:ComponentColumn runat="server" Text="Max quantity" DataIndex="Quantity" Editor="true">
                            <Component>
                                <ext:NumberField runat="server" ID="NumberFieldQuantita" MinValue="0" />
                            </Component>
                            <Listeners>
                                <BeforeBind Fn="onBeforeBind"/>
                                <Edit Fn="onEdit" />
                            </Listeners>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 2
    Last Post: Apr 27, 2011, 8:08 AM
  2. Button Enable/Disable
    By Maia in forum 1.x Help
    Replies: 5
    Last Post: Jul 02, 2010, 8:03 PM
  3. [CLOSED] How to disable/enable all controls in formpanel
    By idrissb in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 13, 2009, 12:21 PM
  4. how to disable and enable combobox?
    By sadeque in forum 1.x Help
    Replies: 1
    Last Post: Jul 27, 2009, 5:00 AM
  5. Enable or disable the button
    By VietView in forum 1.x Help
    Replies: 4
    Last Post: Jan 09, 2009, 11:59 AM

Tags for this Thread

Posting Permissions