Jan 04, 2011, 6:27 AM
Can't add record to store from partial view
Is it possible to update a store that was loaded through a partial view?
The partial view below was loaded to a tab. I've got a store of photos attached to a dataview. On that same page I have an image uploader. After uploading the image i want to add that record to the store and refresh the dataview. This would probably be a good image upload example for your website.
My only problem is that the store is non existant or I can't find it. I know i can't use .net to update it since it's a partialview, but I was hoping to at least be able to use javascript.
I tried to refresh the tab using javascript, but .net broke on the Page_Load call. So i tried different methods to load the datastore.
I tried the PageProxy and that didn't work. The storePhoto_Refresh couldn't find the store. It was the same code as the Page_Load method.
I also tried the http proxy (commented out) but that didn't work either. It was returning the exact same JSON but for some reason the dataview kept showing 0 images. That method returned an AjaxStoreResult. I tried AutoBind, AutoLoad, and a bunch of other things. It doesn't like me :-)
Basically, does anyone have a good idea how to refresh the store after i upload an image. My obstacle seems to be that i'm loading this from a partialview and trying to update after the page is loaded.
The partial view below was loaded to a tab. I've got a store of photos attached to a dataview. On that same page I have an image uploader. After uploading the image i want to add that record to the store and refresh the dataview. This would probably be a good image upload example for your website.
My only problem is that the store is non existant or I can't find it. I know i can't use .net to update it since it's a partialview, but I was hoping to at least be able to use javascript.
I tried to refresh the tab using javascript, but .net broke on the Page_Load call. So i tried different methods to load the datastore.
I tried the PageProxy and that didn't work. The storePhoto_Refresh couldn't find the store. It was the same code as the Page_Load method.
I also tried the http proxy (commented out) but that didn't work either. It was returning the exact same JSON but for some reason the dataview kept showing 0 images. That method returned an AjaxStoreResult. I tried AutoBind, AutoLoad, and a bunch of other things. It doesn't like me :-)
Basically, does anyone have a good idea how to refresh the store after i upload an image. My obstacle seems to be that i'm loading this from a partialview and trying to update after the page is loaded.
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void storePhoto_Refresh(object sender, StoreRefreshDataEventArgs e)
{
// tried to use a refresh on the store, but that didn't work either. it seems you can't do a refresh on a strore in a partialview
}
protected void Page_Load(object sender, EventArgs e)
{
var photos = (Session["GroupMembership"] as GroupMembership).photos;
if (photos.Count > 0)
{
List<object> data = new List<object>(photos.Count);
foreach (var photo in photos)
{
data.Add(new
{
name = photo.caption,
url = "../../" + photo.path,
size = Convert.ToInt32(photo.image_size)
});
}
this.storePhoto.DataSource = data;
this.storePhoto.DataBind();
}
}
</script>
<script type="text/javascript">
var prepareData = function (data) {
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
return data;
};
var selectionChaged = function (dv, nodes) {
var l = nodes.length;
var s = l != 1 ? 's' : '';
ImagePanel.setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
};
var photoUploadFailureHandler = function (form, action) {
Ext.Msg.show({
title: "Save Error",
msg: action.response.responseText,
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
};
var photoUploadSuccessHandler = function (result, request) {
Ext.Msg.show({
title: "Complete.",
msg: "Image uploaded successfully.",
buttons: Ext.Msg.OK
});
// // can't access storePhoto
// MyRecordType = Ext.data.Record.create(['name', 'url', 'size']);
// myrec = new MyRecordType({ "name": "101", "name": "Craig", "size": "10000" });
// Ext.getCmp("storePhoto").add(myrec);
Ext.getCmp("dvPhotos").refresh();
};
</script>
<ext:Panel ID="plnPhotosBorderLayoutWrapper" runat="server" Layout="fit" Height="400" Border="false">
<Items>
<ext:BorderLayout ID="brdlayoutPhotosTab" runat="server">
<west MarginsSummary="5 5 5 0" collapsible="true" split="true">
<ext:FormPanel
ID="frmPhotoUpload"
runat="server"
Width="225"
Frame="true"
Closable = "false"
Collapsible = "true"
Title="Upload Photos"
AutoHeight="true"
MonitorValid="true"
PaddingSummary="10px 10px 0 10px"
LabelWidth="50"
url="/Group/UploadPhotoExt/"
Method="POST"
FileUpload="true">
<Items>
<ext:TextField Width="140" ID="PhotoName" runat="server" FieldLabel="Caption" Name="caption" />
<ext:FileUploadField
ID="FileName"
runat="server"
Width = "140"
EmptyText="Select an image"
FieldLabel="Photo"
ButtonText=""
Icon="Attach"
/>
</Items>
<Buttons>
<ext:Button ID="SaveButton" runat="server" Text="Save">
<Listeners>
<Click Handler="#{frmPhotoUpload}.getForm().submit({ waitMsg : 'Uploading photo...', success : photoUploadSuccessHandler, failure : photoUploadFailureHandler });" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Reset" ID="ctl40">
<Listeners>
<Click Handler="#{frmPhotoUpload}.getForm().reset();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</west>
<center MarginsSummary="5 5 5 0">
<ext:Panel ID="plnPhotosCenterLayout" runat="server" Border="false" AutoHeight="true" Layout="fit">
<Items>
<ext:Panel
runat="server"
ID="plnPhotosImagePanel"
Cls="images-view"
Frame="true"
AutoHeight ="true"
Collapsible = "false"
Layout = "fit"
Title="Group Photos">
<Items>
<ext:DataView ID="dvPhotos"
runat="server"
AutoHeight = "true"
MultiSelect="true"
OverClass="x-view-over"
ItemSelector="div.thumb-wrap"
EmptyText="There are no images in this group.">
<Store>
<ext:Store runat="server" ID="storePhoto" AutoLoad="true" >
<%-- <Proxy>
<ext:HttpProxy Method="POST" Url="/Group/GetPhotos/" />
// this doesn't work - no idea why.. forced to use page_load to bind
</Proxy>--%>
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="name" />
<ext:RecordField Name="url" />
<ext:RecordField Name="size" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="15" Mode="Raw" />
</AutoLoadParams>
</ext:Store>
</Store>
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
<div class="thumb-wrap">
<div class="thumb"><img src="{url}" title="{name}"></div>
<span class="x-editable">{name}</span>
</div>
</tpl>
<div class="x-clear"></div>
</Html>
</Template>
<%-- <PrepareData Fn="prepareData" />
<Listeners>
<SelectionChange Fn="selectionChaged" />
</Listeners> --%>
</ext:DataView>
</Items>
<BottomBar>
<ext:PagingToolbar ID="pgTbPhotoViewer" runat="server" StoreID="storePhoto" PageSize="15" HideRefresh="true" />
</BottomBar>
</ext:Panel>
</Items>
</ext:Panel>
</center>
</ext:BorderLayout>
</Items>
</ext:Panel>
