[CLOSED] 4.1 ComponentView Editing edit button and combo box store issue

  1. #1

    [CLOSED] 4.1 ComponentView Editing edit button and combo box store issue

    Hi,

    I'm using ComponentView Editing example to do my own control. I changed it a bit, like this one:

    
    <Ext.Net.DirectMethodProxyID(Alias:="WebForm1", IDMode:=Ext.Net.DirectMethodProxyIDMode.Alias)>
    Public Class WebForm1
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
    
        End Sub
    
        <Ext.Net.DirectMethod()>
        Sub addNew()
    
            Me.Store1.LoadData(New List(Of Object)() From {
                   New With {
                        .Number = 1,
                        .Text = "Text 1",
                        .[Date] = DateTime.Now,
                        .Combo = 1,
                        .Bool = True,
                        .editing = False
                   }
               })
    
            Me.ComboStore.LoadData(New List(Of Object)() From {
               New With {
                    .Value = 1,
                    .Text = "Item1"
               },
               New With {
                    .Value = 2,
                    .Text = "Item2"
               },
               New With {
                    .Value = 3,
                    .Text = "Item3"
               },
               New With {
                    .Value = 4,
                    .Text = "Item4"
               },
               New With {
                    .Value = 5,
                    .Text = "Item5"
               }
           })
    
        End Sub
    
    End Class
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ComponentView Overview - Ext.Net Examples</title>
       
    
        <script type="text/javascript">
            var renderText = function (value) {
                return App.ComboStore.getById(value).data.Text;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>ComponentView Editing</h1>
    
            <br />
            <ext:Button ID="btnAdd" runat="server" Icon="Add" Text="Add">
                <Listeners>
                    <Click Handler="App.direct.WebForm1.addNew();">
                    </Click>
                </Listeners>
            </ext:Button>
            <ext:Store ID="ComboStore" runat="server">
                <Model>
                    <ext:Model runat="server" IDProperty="Value">
                        <Fields>
                            <ext:ModelField Name="Value" Type="Int" />
                            <ext:ModelField Name="Text" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
    
            <ext:DataView runat="server" Padding="6" DisableSelection="true" Width="450">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Number" Type="Int" />
                                    <ext:ModelField Name="Text" Type="String" />
                                    <ext:ModelField Name="Date" Type="Date" />
                                    <ext:ModelField Name="Combo" Type="Int" />
                                    <ext:ModelField Name="Bool" Type="Boolean" />
                                    <ext:ModelField Name="editing" Type="Boolean" DefaultValue="false" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ItemTpl runat="server">
                    <Html>
                        <tpl if="!editing">
                            <div style="position:relative; border: solid gray 1px; padding:6px; margin-bottom:6px;">
                                <p>Number: {Number}</p>
                                <p>Text: {Text}</p>
                                <p>Date: {Date:date("d\-m\-Y")}</p>
                                <p>Combo: {[renderText(values.Combo)]}</p>
                                <p>Bool: {Bool}</p>
                                <div class="edit-button" style="position:absolute; right: 10px; bottom:10px;"></div>
                            </div>
                        </tpl>
    
                        <tpl if="editing">
                            <div style="position:relative; border: solid gray 1px; padding:6px; margin-bottom:6px;">
                                <p>{NumberField}</p>
                                <p>{TextField}</p>
                                <p>{DateField}</p>
                                <p>{ComboField}</p>
                                <p>{BoolField}</p>
                                <div class="edit-button" style="position:absolute; right: 10px; bottom:35px;"></div>
                                <div class="cancel-button" style="position:absolute; right: 10px; bottom:10px;"></div>
                            </div>
                        </tpl>
                    </Html>
                </ItemTpl>
                <Plugins>
                    <ext:ComponentView runat="server">
                        <Items>
                            <ext:ViewItem Selector="div.edit-button" Tag="editing">
                                <Component>
                                    <ext:Button
                                        runat="server"
                                        Icon="NoteEdit"
                                        Handler="var record = this.record, editing = record.get('editing'); record.set('editing', !editing); if (editing) {record.commit(true);} " />
                                </Component>
                            </ext:ViewItem>
    
                            <ext:ViewItem Selector="div.cancel-button">
                                <Component>
                                    <ext:Button runat="server" Icon="Decline" Text="Cancel" Handler="this.record.reject();" />
                                </Component>
                            </ext:ViewItem>
    
                            <ext:ViewItem Value="NumberField" BoundField="Number">
                                <Component>
                                    <ext:NumberField runat="server" FieldLabel="Number" />
                                </Component>
                            </ext:ViewItem>
    
                            <ext:ViewItem Value="TextField" BoundField="Text">
                                <Component>
                                    <ext:TextField runat="server" FieldLabel="Text" />
                                </Component>
                            </ext:ViewItem>
    
                            <ext:ViewItem Value="DateField" BoundField="Date">
                                <Component>
                                    <ext:DateField runat="server" FieldLabel="Date" Format="d\-m\-Y" />
                                </Component>
                            </ext:ViewItem>
    
                            <ext:ViewItem Value="ComboField" BoundField="Combo">
                                <Component>
                                    <ext:ComboBox
                                        runat="server"
                                        FieldLabel="Combo"
                                        StoreID="ComboStore"
                                        Editable="false"
                                        DisplayField="Text"
                                        ValueField="Value" />
                                </Component>
                            </ext:ViewItem>
    
                            <ext:ViewItem Value="BoolField" BoundField="Bool">
                                <Component>
                                    <ext:Checkbox runat="server" FieldLabel="Bool" />
                                </Component>
                            </ext:ViewItem>
                        </Items>
                        <Listeners>
                            <BeforeComponentBind Handler="if (item.tag == 'editing') { component.text = record.data.editing ? 'Save' : 'Edit'; }" />
                        </Listeners>
                    </ext:ComponentView>
                </Plugins>
            </ext:DataView>
        </form>
    </body>
    </html>
    If I click on add button, it load all data but, edit button doesn't appear... why?

    Click image for larger version. 

Name:	example1.jpg 
Views:	40 
Size:	11.8 KB 
ID:	24674



    By the other hand, I set editing value to true, to add an new object with editing view enabled:

    
     <Ext.Net.DirectMethod()>
        Sub addNew()
    
            Me.Store1.LoadData(New List(Of Object)() From {
                   New With {
                        .Number = 1,
                        .Text = "Text 1",
                        .[Date] = DateTime.Now,
                        .Combo = 1,
                        .Bool = True,
                        .editing = True
                   }
               })
    
            Me.ComboStore.LoadData(New List(Of Object)() From {
               New With {
                    .Value = 1,
                    .Text = "Item1"
               },
               New With {
                    .Value = 2,
                    .Text = "Item2"
               },
               New With {
                    .Value = 3,
                    .Text = "Item3"
               },
               New With {
                    .Value = 4,
                    .Text = "Item4"
               },
               New With {
                    .Value = 5,
                    .Text = "Item5"
               }
           })
    
        End Sub
    When dataview is loaded, our new object is in edit view but combobox store is not loaded and buttons are not working. What am I doing wrong?

    Click image for larger version. 

Name:	example2.jpg 
Views:	80 
Size:	18.3 KB 
ID:	24675

    Regards!
  2. #2
    Hello @Alfredo!

    If I change back the store load commands to datasource + databind approach, I can get it working only and only if the commands are in Page_Load, like this:

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not Ext.Net.X.IsAjaxRequest
                Me.Store1.DataSource = New List(Of Object)() From {
                    New With {
                        .Number = 1,
                        .Text = "Text 1",
                        .[Date] = DateTime.Now,
                        .Combo = 1,
                        .Bool = True,
                        .editing = False
                    }
                }
    
                Me.ComboStore.DataSource = New List(Of Object)() From {
                    New With {
                        .Value = 1,
                        .Text = "Item1"
                    },
                    New With {
                        .Value = 2,
                        .Text = "Item2"
                    },
                    New With {
                        .Value = 3,
                        .Text = "Item3"
                    },
                    New With {
                        .Value = 4,
                        .Text = "Item4"
                    },
                    New With {
                        .Value = 5,
                        .Text = "Item5"
                    }
                }
            End If
        End Sub
    But having this code on a direct method, or using the store load code you provided in Page_Load works the same as how you provided.

    This post seems to corroborate with the affirmation: Post #2 on Dynamic columns for data view.

    That is, the data view does not use an ordinary store, but a store definition can be used to initially load it.

    Maybe in your case, you'd be better off using an approach similar to this example: FormPanel labels with editor example. Of course, you'll be editing the text to the right of the labels, that could be just ordinary ext:Label fields.

    Or maybe just load the entire dataView from code behind (not just the store!) and destroy it when/if dismissed.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Or maybe just load the entire dataView from code behind (not just the store!) and destroy it when/if dismissed.
    What do you want to mean? Could you show me an example?


    On the other hand, If I use a DirectEvent to add instead an DirectEvent, may it work?


    Related with this post, setting "editing" with a "true" value on page load, when I set focus on second field, this field lost focus immediately, is it normal?


    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            Me.Store1.LoadData(New List(Of Object)() From {
           New With {
                .Number = 1,
                .Text = "Text 1",
                .[Date] = DateTime.Now,
                .Combo = 1,
                .Bool = True,
                .editing = True
           }
       })
    
            Me.ComboStore.LoadData(New List(Of Object)() From {
               New With {
                    .Value = 1,
                    .Text = "Item1"
               },
               New With {
                    .Value = 2,
                    .Text = "Item2"
               },
               New With {
                    .Value = 3,
                    .Text = "Item3"
               },
               New With {
                    .Value = 4,
                    .Text = "Item4"
               },
               New With {
                    .Value = 5,
                    .Text = "Item5"
               }
           })
    
        End Sub
  4. #4
    Hello!

    I've just tried to transcribe the dataview example to be drawn in code behind and it didn't work at all. Appears to have the same issue as trying to set the stores dynamically.

    I doubt using direct event instead of direct method will change anything.

    About the focus being lost, I know there's an issue with tabbing between the fields in this example, so that must be tightly related to this limitation from dataview form fields.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Aug 21, 2015, 3:53 PM
  2. Replies: 3
    Last Post: Oct 11, 2013, 10:28 PM
  3. [CLOSED] Combo query issue when using same store on two combo boxes
    By FpNetWorth in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 05, 2013, 10:53 PM
  4. [CLOSED] Grid Editing - Combo w/ Dynamic data
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 24, 2012, 11:02 AM
  5. combo edit problem in 0.8 version
    By Dinesh.T in forum 1.x Help
    Replies: 2
    Last Post: Jul 22, 2009, 10:15 AM

Posting Permissions