Jun 04, 2010, 10:14 PM
Problem with store and user control
Hi eveybody
I'm trying to use the nice user control included in the examples site chooserdialog.ascx (dataview advanced example).
The original example works including a Store in a "standard" aspx page, the same page contains the code for populating the store and then binds it to a dataview.
I'm trying to refactor the chooserdialog control so to cointain itself the needed store and the necessary code to handle the storerefresh event.
In this way I could be able to design a container page in a "cleaner" way.
this is the modified chooserdialog control
<ext:Store runat="server" ID="storeImmaginiServer" AutoLoad="false" IDMode="Static">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="name" />
<ext:RecordField Name="url" />
<ext:RecordField Name="sizeString" />
</Fields>
</ext:JsonReader>
</Reader>
<AjaxEventConfig>
<EventMask ShowMask="true" Target="CustomTarget" />
</AjaxEventConfig>
</ext:Store>
<ext:XTemplate runat="server" ID="DetailsTemplate">
<div class="details">
<tpl for=".">
<img src="{url}" /><div class="details-info">
Nome immagine:
{name}
Dimensione:
{sizeString}
</tpl>
</ext:XTemplate>
<ext:Window
ID="ImageChooserDialog"
runat="server"
Icon="Images"
Title="Scegli una immagine"
MinHeight="300"
MinWidth="500"
Width="515"
Height="350"
Modal="true"
Border="false"
Cls="img-chooser-dlg"
Showonload="false">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center>
<ext:Panel ID="Panel1" runat="server" AutoScroll="true" Cls="img-chooser-view">
<Body>
<ext:ContainerLayout ID="ContainerLayout1" runat="server">
<ext:DataView runat="server" ID="ImageView"
SingleSelect="true"
OverClass="x-view-over"
ItemSelector="div.thumb-wrap"
StoreID="storeImmaginiServer"
EmptyText="<div style='padding:10px;'>Nessuna immagine presente nella cartella specificata
" AutoDataBind="False">
<Template ID="Template1" runat="server">
<tpl for=".">
<div class="thumb-wrap" id="{name}">
<div class="thumb">
{name}
</tpl>
</Template>
<Listeners>
<BeforeSelect Handler="return this.store.getRange().length > 0;" />
</Listeners>
</ext:DataView>
</ext:ContainerLayout>
</Body>
</ext:Panel>
</Center>
<East Collapsible="True" Split="True" MinWidth="150" MaxWidth="250" >
<ext:Panel runat="server" ID="ImageDetailPanel" Title="Immagine selezionata" Width="150px" />
</East>
</ext:BorderLayout>
</Body>
<Buttons>
<ext:Button runat="server" ID="OkBtn" Text="OK" AutoPostBack="false" />
<ext:Button runat="server" ID="CancelBtn" Text="Annulla" AutoPostBack="false" />
</Buttons>
</ext:Window>Partial Class controlli_PieroChooserDialogl
Inherits UserControl
<Serializable()> _
Public Class datiFile
Public name As String
Public sizeString As String
Public url As String
Public lastmod As Date
End Class
Public ReadOnly Property StoreId() As String
Get
Return Me.storeImmaginiServer.ClientID
End Get
End Property
Private _Callback As String
Public Property Callback() As String
Get
Return _Callback
End Get
Set (ByVal value As String)
_Callback = value
End Set
End Property
Private _Folder As String
Public Property Folder() As String
Get
Return _Folder
End Get
Set (ByVal value As String)
_Folder = value
End Set
End Property
Private _AnimateElement As String
Public Property AnimateElement() As String
Get
Return _AnimateElement
End Get
Set (ByVal value As String)
_AnimateElement = value
End Set
End Property
Public ReadOnly Property WindowID() As String
Get
Return Me.ImageChooserDialog.ClientID
End Get
End Property
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Ext.IsAjaxRequest Then
inizializzaControlli()
End If
End Sub
Private Sub inizializzaControlli()
Me.ScriptManagerProxy1.Listeners.DocumentReady.Handler = _
String.Format( _
"this.{0}_class = new ChooserDialog(this.{1}, this.{2}, this.{3}, this.{4}, {5}, null, '{6}');", _
Me.ClientID, Me.ImageChooserDialog.ClientID, Me.ImageView.ClientID, _
Me.ImageDetailPanel.ClientID, Me.DetailsTemplate.ClientID, Me.Callback, Me.Folder)
Me.ImageView.PrepareData.Fn = _
String.Concat("function(data){{ return ", Me.ClientID, "_class.formatData(data);}}")
Me.ImageView.Listeners.SelectionChange.Handler = String.Concat(Me.ClientID, "_class.showDetails();")
Me.ImageView.Listeners.SelectionChange.Buffer = 100
Me.ImageView.Listeners.DblClick.Handler = String.Concat(Me.ClientID, "_class.doCallback();")
Me.OkBtn.Listeners.Click.Handler = String.Concat(Me.ClientID, "_class.doCallback();")
Me.CancelBtn.Listeners.Click.Handler = String.Concat(Me.ClientID, "_class.windowDialog.hide();")
'Me.ImageView.StoreID = Me.StoreId
End Sub
Protected Sub storeImmaginiServer_RefreshData (ByVal sender As Object, ByVal e As StoreRefreshDataEventArgs) _
Handles storeImmaginiServer.RefreshData
storeImmaginiServer.DataSource = getFileNames()
storeImmaginiServer.DataBind()
End Sub
Private Function getFileNames() As List(Of datiFile)
Dim lista As New List(Of datiFile)
If Not String.IsNullOrEmpty(Folder) Then
Dim files() As String = Directory.GetFiles(Server.MapPath(Folder))
For Each Str As String In files
Dim d As New datiFile
Dim fi As New FileInfo(Str)
d.name = fi.Name
d.url = fi.FullName
Dim strSize As String = If(fi.Length < 1024, fi.Length & " bytes", (Math.Round(((fi.Length * 10.0) / 1024)) / 10) & " KB")
d.sizeString = strSize
d.lastmod = fi.LastWriteTime
lista.Add(d)
Next
End If
Return lista
End FunctionI did some debug and the storeRefresh is called and correctly handled but, using firebug, I noticed that the store remains empty.
Some suggestion?
Pierluigi
