PDA

View Full Version : [CLOSED] 4.1 ComponentView Editing edit button and combo box store issue



Alfredo
Jul 13, 2016, 8:52 AM
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?

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?

24675

Regards!

fabricio.murta
Jul 13, 2016, 9:18 PM
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 (http://forums.ext.net/showthread.php?24149-CLOSED-Dynamic-columns-for-data-view&p=105829&viewfull=1#post105829).

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 (http://examples4.ext.net/#/Editor/Basic/FormPanel_Labels/). 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.

Alfredo
Jul 14, 2016, 8:22 AM
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

fabricio.murta
Jul 14, 2016, 10:20 PM
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.