May 08, 2012, 12:57 PM
Refresh DataSource on Window Load or Shortcut Click
I can't seem to figure out how to refresh the DataSource of a Store within a UserControl every time the Shortcut is clicked on the Desktop or every time the Window is opened. I'm planning on having a substantial amount of Window's and would like to do this in such a way that the code is easily maintainable.
I'm getting the following JavaScript error: "Uncaught TypeError: Object #<Object> has no method 'RefreshDataSource'"
Desktop.aspx
I'm getting the following JavaScript error: "Uncaught TypeError: Object #<Object> has no method 'RefreshDataSource'"
Desktop.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Desktop.aspx.cs" Inherits="DesktopWeb.Desktop" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="modules/UsersView.ascx" TagPrefix="mod" TagName="UsersView" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Examples</title>
<link href="resources/desktop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var tile = function () {
Ext.ComponentQuery.query('desktop')[0].tileWindows();
};
var cascade = function () {
Ext.ComponentQuery.query('desktop')[0].cascadeWindows();
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Desktop ID="Desktop2" runat="server">
<Modules>
</Modules>
<DesktopConfig Wallpaper="resources/wallpapers/blue.jpg" ShortcutDragSelector="true">
<ShortcutDefaults IconCls="x-default-shortcut" />
<ContextMenu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Change Settings" />
<ext:MenuSeparator ID="MenuSeparator1" runat="server" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Tile" Handler="tile" Icon="ApplicationTileVertical" />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Cascade" Handler="cascade" Icon="ApplicationCascade" />
</Items>
</ext:Menu>
</ContextMenu>
<Content>
<ext:Image ID="Image1" runat="server" ImageUrl="resources/logo.png" StyleSpec="position:absolute;top: 50%;left: 50%;width: 77px; height: 78px;margin-top: -39px; margin-left: -39px;"/>
<ext:Image ID="Image2" runat="server" ImageUrl="resources/powered.png" StyleSpec="position:absolute;right:10px;bottom:20px;"/>
</Content>
</DesktopConfig>
<StartMenu Title="Ext.Net Desktop" Icon="Application" Height="300">
<ToolConfig>
<ext:Toolbar ID="Toolbar1" runat="server" Width="100">
<Items>
<ext:Button ID="Button1" runat="server" Text="Settings" Icon="Cog" />
<ext:Button ID="Button2" runat="server" Text="Logout" Icon="Key">
<DirectEvents>
<Click OnEvent="Logout_Click">
<EventMask ShowMask="true" Msg="Good Bye..." MinDelay="1000" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</ToolConfig>
</StartMenu>
<TaskBar TrayWidth="100">
<QuickStart>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="Button3" runat="server" Handler="tile" Icon="ApplicationTileVertical">
<QTipCfg Text="Tile windows" />
</ext:Button>
<ext:Button ID="Button4" runat="server" Handler="cascade" Icon="ApplicationCascade">
<QTipCfg Text="Cascade windows" />
</ext:Button>
</Items>
</ext:Toolbar>
</QuickStart>
<Tray>
<ext:Toolbar ID="Toolbar3" runat="server">
<Items>
<ext:Button ID="LangButton" runat="server" Text="EN" MenuArrow="false" Cls="x-bold-text" MenuAlign="br-tr">
<Menu>
<ext:Menu ID="Menu2" runat="server">
<Items>
<ext:CheckMenuItem ID="CheckMenuItem1" runat="server" Group="lang" Text="English" Checked="true" CheckHandler="function(item, checked) {checked && #{LangButton}.setText('EN');}" />
<ext:CheckMenuItem ID="CheckMenuItem2" runat="server" Group="lang" Text="French" CheckHandler="function(item, checked) {checked && #{LangButton}.setText('FR');}" />
<ext:MenuSeparator ID="MenuSeparator2" runat="server" />
<ext:MenuItem ID="MenuItem4" runat="server" Text="Show the Language Bar" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
</Items>
</ext:Toolbar>
</Tray>
</TaskBar>
</ext:Desktop>
<%--Modules from User controls--%>
<mod:UsersView ID="UsersView1" runat="server" EnableViewState="true" />
</form>
</body>
</html><%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UsersView.ascx.cs" Inherits="DesktopWeb.demo.modules.UsersView" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="DesktopWeb.DataClasses1DataContext" EntityTypeName=""
TableName="Tbl_Users" Where="isActive = True"
EnableDelete="True" EnableInsert="True" EnableUpdate="True"></asp:LinqDataSource>
<script type="text/javascript">
var edit = function (editor, e) {
/*
"e" is an edit event with the following properties:
grid - The grid
record - The record that was edited
field - The field name that was edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid table row
column - The grid Column defining the column that was edited.
rowIdx - The row index that was edited
colIdx - The column index that was edited
*/
// Call DirectMethod
if (e.value !== e.originalValue) {
CompanyX.Edit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
}
};
</script>
<ext:DesktopModuleProxy ID="DesktopModuleProxy1" runat="server">
<Module ModuleID="grid-win">
<Shortcut Name="Grid Window" IconCls="x-grid-shortcut" SortIndex="1">
</Shortcut>
<Launcher Text="Grid Window" Icon="Table">
</Launcher>
<Window>
<ext:Window ID="windowUsers" runat="server"
Icon="Table"
Width="740"
Height="480"
AnimCollapse="false"
ConstrainHeader="true"
Layout="Fit"
Title="Grid Window">
<Listeners>
<BeforeShow Handler="function() {#{DirectMethods}.RefreshDataSource();}"></BeforeShow>
</Listeners>
<TopBar>
<ext:Toolbar ID="toolbarUsers" runat="server">
<Items>
<ext:Button ID="Button10" runat="server" Text="Add Something" Icon="Add" ToolTip="Add a new row">
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator3" runat="server" />
<ext:Button ID="Button20" runat="server" Text="Options" Icon="Plugin">
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator4" runat="server" />
<ext:Button ID="Button30" runat="server" Text="Remove Something" ToolTip="Remove the selected item" Icon="Decline">
<QTipCfg Text="Remove the selected user" />
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:GridPanel ID="GridPanel3" runat="server"
Border="false">
<Store>
<ext:Store ID="Store3" runat="server" DataSourceID="LinqDataSource1">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="Username" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn3" runat="server" />
<ext:Column ID="Column1" runat="server" Flex="1" Sortable="true" DataIndex="Username" Text="User Name">
<Editor>
<ext:TextField runat="server"></ext:TextField>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="ce1">
<Listeners>
<Edit Fn="edit"></Edit>
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</Items>
</ext:Window>
</Window>
</Module>
</ext:DesktopModuleProxy>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using Ext.Net.Utilities;
namespace DesktopWeb.demo.modules
{
public partial class UsersView : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public void RefreshDataSource()
{
this.GridPanel3.Store.Primary.DataBind();
}
[DirectMethod(Namespace = "CompanyX")]
public void Edit(int id, string field, string oldValue, string newValue, object customer)
{
string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
// Send Message...
X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();
this.GridPanel3.GetStore().GetById(id).Commit();
}
}
}
